New ARIA technique for the aria-current attribute

[fstrr]

This PR is in relation to issue #1681

[detlevhfischer]

View Technique Using aria-current to identify the current item in a set

[detlevhfischer]

Looks good. The only thing I wondered about is if the current (recursive) link should actually link to the current page or better get rid of the href-Attribute - but then it would not be reached by tabbing as a default - not sure.

[fstrr]

I go back and forth on removing the href attribute from current links, but have pretty much settled on keeping it. My thinking is that having the aria-current attribute gives a screen reader user the information that this is the current page, which hopefully clarifies things.

[detlevhfischer]

having the aria-current attribute gives a screen reader user the information that this is the current page, which hopefully clarifies things.

@fstrr There is the visual aspect as well, the link with aria-current will likely still appear active (underline, other focus indication) even though is does nothing but reload the page (and some people say that can be a useful thing). I can certainly live with both options, I just wanted views on what would be the preferable implementation (as Techniques will be seen as best practice).

[JAWS-test]

The only thing I wondered about is if the current (recursive) link should actually link to the current page or better get rid of the href-Attribute

It can also be a main menu and the current page was located under the same main menu item, but is not identical to the page accessed via the menu item in the main menu. That's why I think href makes sense

[OwenEdwards]

I go back and forth on removing the href attribute from current links, but have pretty much settled on keeping it. My thinking is that having the aria-current attribute gives a screen reader user the information that this is the current page, which hopefully clarifies things.

The problem with removing the href from the current link is that it is then just semantically a <span> element, which is no different from static text, so it isn't very clear to screen reader users. To some extent, what the developer may be trying to achieve is closer to <a href="..." disabled>, so that it is still semantically a link but is no longer focusable or actionable. It's not exactly disabled though, because a disabled button doesn't need to meet contrast requirements, whereas the link to the current page probably shouldn't be grayed out (maybe it should in some cases?).

But I think at least JAWS treats a link with aria-current on it as disabled, so it conveys the correct semantic intent, right?

[JAWS-test]

But I think at least JAWS treats a link with aria-current on it as disabled, so it conveys the correct semantic intent, right?

In HTML a link cannot be disabled (the attribute is not allowed). aria-disabled is allowed on links. Disabled and aria-current are different things and are also output differently by screen readers. But a link with aria-current is not automatically disabled (because e.g. with this link the current page can be reloaded), so the different output is correct.

[OwenEdwards]

@JAWS-test sorry, I should have been clearer - I didn't mean that <a href="..." disabled> was valid HTML.

I meant that in some ways what developers mean when they remove the href on a link that refers to the current page is similar to what they mean when using <button disabled>, in that it is still semantically a button. But removing an href from a link has a more significant effect, and it seems like a lot of developers don't realize that.

I agree that disabled and aria-current aren't the same thing, though. I just didn't express it very well!

I guess I should ask the question - how do JAWS (and other screen readers) announce each of these:

1. <a href="..." aria-current="page">name of current page</a>
2. <a aria-current="page">name of current page</a> (where the link doesn't have an href)
3. <span aria-current="page">name of current page</span>

[JAWS-test]

@OwenEdwards

how do JAWS (and other screen readers) announce each of these

With JAWS and NVDA, "current page" is correctly output as the status in all three examples (because aria-current is a global attribute according to the ARIA specification and may be used with any role). The only difference between example 1 and 2+3 is that in example 1 a link is output and in 2+3 only text is output. Only example 1 is reached via quick navigation for links and is displayed in the link overview. Only example 1 gets focus with tab key