4

I have a page with tabbed navigation, and I need to make JAWS announce the tab statuses. For example:

      ________
 Shop | Cart | Recent orders | Profile
--------------------------------------

When the user moves through the above tabs, JAWS should say something like

Shop tab; not selected
(Tab)
Cart; selected
(Tab)
Recent orders; not selected
(Tab)
Profile; not selected

Where I have "(Tab)" with the parens above, I mean that JAWS is saying the word "tab" because the Tab key was pressed to move between navigation tabs.

Currently, the words "not selected" and "selected" are not being spoken by JAWS, but the rest is. I'm using markup like

<a aria-selected="false" href="profile.html" id="profileTab">

Official JAWS documentation (reproduced online here) indicates that JAWS recognizes aria-selected but doesn't say what effect(s) the property has.

I can see the ARIA markup in my page source, but JAWS doesn't read it aloud, or do anything at all with it as far as I can tell. How can I get JAWS to say "selected" and "not selected" (or something similar)?

SOLO
  • 868
  • 9
  • 19

1 Answers1

4

The authoring practice has a good section on the tab control. The demo site is using aria-selected like you are but it sounds fine with JAWS and Internet Explorer when I tested it just now, although the demo is setting aria-selected on a <button> instead of a link.

What browser were you using?
The latest version of JAWS?

Also, a tab control normally uses the arrow keys to navigate between the tabs (see aforementioned "authoring practice") rather than the tab key but that shouldn't affect whether aria-selected is read or not.

(As a side fun fact, you can turn off JAWS' announcement of "tab" every time you press the tab key. I use JAWS quite often and don't need it to tell me when I press the tab key. It's just audio clutter (for me). Ins+J > Utilities > Settings Center > Manage Key Labels > Tab > Toggle Mute)

Update Sorry, had a brain lapse for a moment. I forgot to mention role="tab". That's what causing your problem. aria-selected is not valid on role="button" or role="link" but is valid on role="tab". See "Allowed ARIA roles, states and properties"

Change your code to

<a aria-selected="true" href="profile.html" id="profileTab" role="tab">

and it should work.

slugolicious
  • 15,824
  • 2
  • 29
  • 43
  • IE11 and a recent-but-not-latest JAWS (because of company requirements). I was warned off of using `role="tab"` by [a blog post](https://simplyaccessible.com/article/danger-aria-tabs/) that claimed to have done a real-world test. I'll at least give it a shot in dev to see what happens and go from there. – SOLO Sep 21 '18 at 13:22
  • Alright, I tested it and this gets me halfway there. The tab with `aria-selected="true"` is announced by JAWS as "selected", but the tabs with `aria-selected="false"` don't get a corresponding announcement. – SOLO Sep 21 '18 at 18:08
  • 2
    Sounds like it's working correctly. `aria-selected` is only announced when its value is "true". Nothing should be announced if it's "false". That is, you won't hear "not selected" when the value is "false". Regarding the blog, real visually-impaired users wrote a rebuttal blog here - https://medium.theuxblog.com/danger-testing-accessibility-with-real-people-4515f72db648, mimicking the original blog's title. The rebuttal was written by well-respected accessibility experts. It's ok to use `role="tab"` on links and buttons. – slugolicious Sep 21 '18 at 22:10
  • Ah, very nice! I guess I'll have to add some custom workaround for my "say 'not selected'" requirement. – SOLO Sep 24 '18 at 13:22
  • if you want to force a "not selected" announcement, that's certainly your choice, but screen reader users are used to hearing "selected" or not hearing anything. you have to be careful not to be too verbose in what is read. screen reader users generally like as terse of information as possible because it can get very "noisy" reading a screen, but that preference can vary widely based on personal preference. you can add an `aria-label` to your tab that has "not selected". – slugolicious Sep 24 '18 at 18:22
  • By the way it seems that NVDA+Firefox behaves exactly the other way around. It announced nothing on the selected item (options inside a listbox for me) and "not selected" for all the others. Currently thinking about adding a custom `aria-label`, but it seems to me like something the screenreader should handle so I'll probably leave it. – Simon Lenz May 29 '19 at 14:57
  • role="option" and aria selected reads the option as selected and not selected – Diego Mar 14 '22 at 05:32
  • @Diego, maybe. It depends what browser and the behavior is different between NVDA and JAWS. See my recent answer about `aria-selected` at https://stackoverflow.com/questions/71468332/select2-li-aria-selected-true-is-not-read-as-selected-by-screen-reader#answer-71475345 – slugolicious Mar 15 '22 at 11:16