Search code examples
htmlaccessibilitywai-ariajaws-screen-readersection508

Making JAWS announce aria-selected status

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)?

Solution

  • 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.