Browsers are "getting there" with support for aria-current: https://rawgit.com/w3c/aria/master/aria/aria.html#aria-current
Support is in for (most of) Chrome: https://bugs.chromium.org/p/chromium/issues/detail?id=609362
and Webkit/VO: https://bugs.webkit.org/show_bug.cgi?id=155469
Still waiting on FF: https://bugzilla.mozilla.org/show_bug.cgi?id=1104947
Would be nice if AT could support this, too, so that devs don't have to hack in a roving aria-label="current page" or similar.
Update: JAWS 18 Beta now supports aria-current.
Just FYI. ;)
Adding the browse mode label.
Some thought will need to be put into the UX for this. But I think we can prioritise this as P2 for now. @jcsteh We will need to add this to the aria 1.1 project.
I think we can basically just add a new state "current" and report it whenever it is present.
Problem is that the spec for aria-current has several values other than true: page, step, location, date, time. I'm not sure what the use case is for these, however the expected implementation seems to be along the lines of "current page".
My bad. I neglected to realise aria-current now has several values.
I discussed this with several people. I think we should report "current page", "current location", etc. as the expected implementation suggests. I have my concerns about this; e.g. it seems counter-intuitive that we report a "current step" but no other steps get reported as "step". Nevertheless, this is what other screen readers are doing and it does seem like this is the best experience we can get here.
VoiceOver also support it cf https://ljwatson.github.io/design-patterns/aria-current/
If I read the spec correctly, this should also be used where the current page is indicated, but is not a link. For example in a breadcrumb. I just implemented this with aria-current="page" on a span and it diesn't seem to work in NVDA next and Firefox.
It does work on a div, but not a span. It seems both Firefox and Chrome are pruning spans from the tree even when they have aria-current. We'll need to file bugs against both browsers.
I just filed a bug against Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1365904
Filed Chrome issue: https://bugs.chromium.org/p/chromium/issues/detail?id=730917
Filed Chrome issue: https://bugs.chromium.org/p/chromium/issues/detail?id=730917
Verified fixed in Chrome Version 62.0.3201.2 (Official Build) canary (64-bit).
I just filed a bug against Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1365904
Fixed for Firefox 65.
I found in my single page react application, when the url changes because of a link within the side (eg. on the nav) that NVDA reads the old active nav item.
It's almost as if in a single paged react app that even though the url and the DOM have the correct attributes on the correct elements, NVDA doesn't update until I refresh the page.
I found in my single page react application, when the url changes because of a link within the side (eg. on the nav) that NVDA reads the old active nav item.
What browser did you test in? This works as expected for me in Firefox:
data:text/html,<button aria-current="true">a</button><br><button>b</button><script>document.addEventListener("click", function(event) { document.querySelector("[aria-current=true]").removeAttribute("aria-current"); event.target.setAttribute("aria-current", "true"); });</script>
Pressing the button that isn't current makes it current and that gets reflected in browse mode.
This doesn't work in Chrome, however.
Investigation note: My guess is they're not firing IA2_EVENT_OBJECT_ATTRIBUTE_CHANGED when aria-current changes, but I haven't verified this.
I found in my single page react application, when the url changes because of a link within the side (eg. on the nav) that NVDA reads the old active nav item.
What browser did you test in? This works as expected for me in Firefox:
data:text/html,<button aria-current="true">a</button><br><button>b</button><script>document.addEventListener("click", function(event) { document.querySelector("[aria-current=true]").removeAttribute("aria-current"); event.target.setAttribute("aria-current", "true"); });</script>Pressing the button that isn't current makes it current and that gets reflected in browse mode.
This doesn't work in Chrome, however.
Investigation note: My guess is they're not firing IA2_EVENT_OBJECT_ATTRIBUTE_CHANGED when aria-current changes, but I haven't verified this.
Hi jcstech,
Using NVDA/Chrome i am able to replicate this issue.
I am facing same issue in my vue single page application.
@milindannadate I filed a Chromium bug re changes not being conveyed https://bugs.chromium.org/p/chromium/issues/detail?id=1099323
Support is scheduled to land in Chrome v89. I tested it with NVDA and Chrome Canary and it works great. https://bugs.chromium.org/p/chromium/issues/detail?id=1099323