视障人士无障碍：aria-current工作机制及页面定位ARIA属性咨询

Hey there! Let's dive into your questions about ARIA and screen reader accessibility for visually impaired users—super important stuff. Let's break each one down clearly:

aria-current is a dedicated ARIA attribute built to mark an element as the current item within a set of related elements. Think of it as a clear signpost for screen readers: it tells the user, "Hey, this is the exact page/section you’re currently viewing."

It accepts several targeted values, but the most relevant for page navigation are:

• page: The go-to choice for marking the active page in a navigation menu (the most common use case)
• location: For flagging a current geographic or physical location
• true: A generic fallback if none of the specific values fit (though page is always preferred for page contexts)

When a screen reader encounters an element with aria-current="page", it will announce something like "Home, current page" (depending on the reader), removing any ambiguity about where the user is. Here's a quick, practical example:

<nav>
  <ul>
    <li><a href="/home" aria-current="page">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

Pro tip: You only need to apply aria-current to the specific active item—no need to add it to parent elements like the <ul> or <nav>.

When a page loads (without any user interaction), you want screen readers to immediately orient the user to their current context. Here’s how to do it effectively:

• Start with a unique, descriptive <h1> heading: Screen readers typically announce the page’s main heading first. This is the fastest way to tell users what page they’re on (e.g., <h1>Home - My Personal Portfolio</h1>).
• Apply aria-current="page" to your navigation’s active link on load: As soon as the page renders, this attribute should be attached to the corresponding nav item. Screen readers will pick this up when scanning the navigation, even if the user hasn’t clicked anything.
• Leverage HTML5 semantic landmarks: Tags like <main>, <nav>, <header>, and <footer> have implicit ARIA roles (no need to add role="main" manually!) that screen readers recognize instantly. For example, <main> tells the user "this is the primary content of the page," helping them quickly focus on what matters.
• For custom sections: Use role="region" paired with aria-label or aria-labelledby to name unique page areas. For example:

  <div role="region" aria-label="User Dashboard Overview">
    <!-- Dashboard content here -->
  </div>
  

  This lets users jump directly to key regions via screen reader shortcuts, even without interacting with the page first.

Stick to these reliable options, always prioritizing semantic HTML first (it’s more consistent and easier to maintain than manual ARIA):

• aria-current="page": The gold standard for marking the active page in navigation menus. It’s specifically designed for this use case and fully supported by all major screen readers.
• Semantic HTML tags (with implicit ARIA roles): <h1>, <main>, <nav>, <header>, <footer>—these native tags eliminate the need for extra ARIA code and have universal support.
• role="region" + aria-label/aria-labelledby: For custom page sections that don’t fit standard semantic tags. This gives screen readers a clear, human-readable name for the region, helping users orient themselves quickly.

A critical don’t: Avoid overusing ARIA. If a native HTML tag does the job (like <nav> instead of <div role="navigation">), use the native tag—it’s simpler and more accessible.

内容的提问来源于stack exchange，提问作者suraj singh