Suppose I have a page with different <section>s. Some <sections> may contain, within them, other <sections> and so forth. Now, suppose I want to create a non-primary navigation to allow easy navigation through all these sections and also highlight the current section the user is scrolling through (done via JavaScript, of course).

Since, by reading a nested section, you are also still reading the parent section, I ended up with a situation where the parent and at most one if its direct children may both have aria-current="true". I would like to know if this is ill-formed or problematic.

Here is a simple demonstration of the sort of hierarchy being dealt with. At most one link to a section may end up with aria-current per level of nesting.

<nav>
  <ol>
    <li>
      <a href="#sec1" aria-current="true">Section 1</a>
      <nav>
        <ol>
          <li><a href="#sec1_1">Section 1.1</a></li>
          <li><a href="#sec1_2" aria-current="true">Section 1.2</a </li>
        </ol>
      </nav>
    </li>
    <!-- Other Sections (can be arbitrarily nested) -->
  </ol>
</nav>

(In the actual code, I have added aria labels to the navs. Omitted here for clarity)

According to the MDN docs on aria-current:

Only mark one element in a set of elements as current with aria-current.

However, the wording of "a set of elements" is a bit too ambiguous to answer my doubt. Would items inside a nested navigation classify as a sufficiently separate context, or would they ultimately still belong to the "set of elements" of their parent (as if they were logically flattened)?

That's ultimately where my issue is: Can each list have its own aria-current that highlights the current item within its own context? Or would nested lists share the logical context of their parent lists and hence only a single aria-current can be allowed for the entire nested structure? To phrase it more specifically, can Section 1 and Section 1.1 both be current?

Suppose I have a page with different <section>s. Some <sections> may contain, within them, other <sections> and so forth. Now, suppose I want to create a non-primary navigation to allow easy navigation through all these sections and also highlight the current section the user is scrolling through (done via JavaScript, of course).

Since, by reading a nested section, you are also still reading the parent section, I ended up with a situation where the parent and at most one if its direct children may both have aria-current="true". I would like to know if this is ill-formed or problematic.

Here is a simple demonstration of the sort of hierarchy being dealt with. At most one link to a section may end up with aria-current per level of nesting.

<nav>
  <ol>
    <li>
      <a href="#sec1" aria-current="true">Section 1</a>
      <nav>
        <ol>
          <li><a href="#sec1_1">Section 1.1</a></li>
          <li><a href="#sec1_2" aria-current="true">Section 1.2</a </li>
        </ol>
      </nav>
    </li>
    <!-- Other Sections (can be arbitrarily nested) -->
  </ol>
</nav>

(In the actual code, I have added aria labels to the navs. Omitted here for clarity)

According to the MDN docs on aria-current:

Only mark one element in a set of elements as current with aria-current.

However, the wording of "a set of elements" is a bit too ambiguous to answer my doubt. Would items inside a nested navigation classify as a sufficiently separate context, or would they ultimately still belong to the "set of elements" of their parent (as if they were logically flattened)?

That's ultimately where my issue is: Can each list have its own aria-current that highlights the current item within its own context? Or would nested lists share the logical context of their parent lists and hence only a single aria-current can be allowed for the entire nested structure? To phrase it more specifically, can Section 1 and Section 1.1 both be current?

• html
• accessibility
• wai-aria
• semantic-markup

Share Improve this question Follow edited Nov 20, 2024 at 9:01 RaisinCrab asked Nov 19, 2024 at 18:02 RaisinCrabRaisinCrab 9911 silver badge55 bronze badges 1

• Are you changing the visual styling of the active section? I'd argue that if multiple items in a nested list had "active"-looking visual styling, I'd be momentarily confused. From that standpoint, I'd recommend only having one "current" thing at a time (both visually and with ARIA). – Sean Commented Nov 27, 2024 at 17:31

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Yes, a "set of elements" is potentially ambiguous, but in my opinion, what you have here is a TOC and thus all of the links are elements of the TOC. So I think it might be a reach to consider each nested list of links as a separate set.

As for as whether you can do this, if you look at the ARIA 1.3 docs, it says that "Authors SHOULD only mark one element in a set of elements as current with aria-current." That "should" is important. It means that it is strongly encouraged and considered a best practice, but it's not "illegal". So technically, it is permitted to have multiple aria-current attributes in a set and thus you "can" do it, but whether you should is another question.

Most accessibility professionals will tell you that the only way you can really determine what works best is to test with your users. My suggestion would be to start out as simple as possible and only make it more complex if you find out through feedback/testing that you need to do more. Thus, I would recommend you start with only one aria-current at a time and put it on the link for the actual section that is currently in view.