JAWS and Internet Explorer 11 don't announce the fieldset legends

[afercia]

This was reported by a user of the JAWS screen reader and I was able to reproduce using JAWS 2018 and Internet Explorer 11.

Seems that any fieldset legend is not announced at all by JAWS and IE 11 when focusing the fields within the fieldset. Screen readers should announce the fieldset legend when entering the fieldset, and most of them do it correctly. For example, testing with JAWS and Firefox ESR, the legends are announced correctly. I wasn't able to reproduce with other combos so it seems it's specific to the JAWS + IE11 combo.

Turns out the aria-label="Main content" and tabindex="0" applied on the wpbody-content container trigger this bug. Worth noting they're used as the target for the "Skip link" but that's not relevant for the bug. The only presence of the aria-label and tabindex attributes triggers the bug.

For testing purposes, I've prepared a couple patches. The first patch adds a form in the Reading Settings page. It's a simple form with a fieldset, a legend, and 2 radio buttons placed outside of the table in the page so that nothing interferes with the way it's announced by screen readers.

A reduced test case is available on this Codepen: ​https://codepen.io/afercia/full/GyaNOX/

To reproduce:

• apply the first patch
• go in the Reading Settings page
• using JAWS and IE 11, tab to the first radio button
• be sure JAWS switches to "forms mode" (you will hear a "beep"); if it doesn't, switch manually pressing Enter
• JAWS should announce the legend and the radio button label: Do you have a passport? Yes radio button not checked
• instead, it announces just Yes
• use the down arrow key to select the second radio button: JAWS announces just No

This happens also with all the other radio buttons in the page, it's just a bit more difficult to test them because of the table cells etc.

Now apply the second patch. It just removes the aria-label and tabindex attributes from the main container. Repeat the steps above. JAWS will now announce the fieldset legend correctly.

Note: JAWS will announce the legend for every field in the fieldset (not just the first field). ​This is not the expected behaviour and it's a known JAWS behavior.

Worth noting, as per the WebAIM survey run on October 2017, JAWS + Internet Explorer is still the ​most used browser / screen reader combination. Whether it's an IE11 or JAWS bug, the consequence for many users is pretty serious. They won't have a clue what the radio buttons (and other fields) relates to.

Of course, those aria-label and tabindex attributes can't be simply removed. Any fix should also preserve the "Skip link" functionality.

[afercia]

The 5.1 release beta 1 is today. This issue requires some more investigation. Punting to Future Release.

[stommepoes]

(never mind, I see you are getting Steve's reply!)

[afercia]

@stommepoes thanks! Yep, worth mentioning the related GitHub issue for details and suggested fix: ​https://github.com/FreedomScientific/VFO-standards-support/issues/152

Props to (note: twitter handles) @stevefaulkner and @aardrian for looking into this:
​https://twitter.com/stevefaulkner/status/1083684338846314496

[afercia]

After some code archeology: the aria=label "Main content" with a negative tabindex was added more than 6 years ago in [21305]. At that time, old IE versions needed the element targeted by the skip link to be focusable.

After that, two tabindex="0" attributes were added in [22249] to the content area and the toolbar, to fix "the WebKit focus bug" (always related to in-page links).

Today, WebKit doesn't suffer from that bug any longer, and all other browsers including IE 11 don't need the tabindex.

The role="main" was added to the wpbody element in [31955] missing the wpbody-content was probably more appropriate.

At this point, the cleaner solution is to remove the two tabindex="0", but...

...the wpbody-content element is still used as fallback to move focus to by the media modal. That JavaScript part needs a workaround or maybe the fallback should be removed. Once that is done, I'd propose to:

• remove the two tabindex="0"
• remove the aria-label "Main content"
• keep the role="main" as is, on the wpbody element

Will prepare a patch and test it with JAWS / IE11.

[afercia]

To clarify: quoting from ​the JAWS GitHub issue:

Use of tabindex=-1 adds the div to the accessibility tree with a role=group and an accessible name from the div content unless another accessible name is provided.

So the current markup:

<div id="wpbody-content" aria-label="Main content" tabindex="0">

is then interpreted by IE11 and JAWS as a "group" with name "Main content". The fieldset element has an implicit semantics of "group", with the name given by its legend element. This combination confuses IE11 and JAWS in a way the fieldset legends within the main content area are not announced.

Aside: I guess this is also the reason why Safari + VoiceOver announce "group" for that div:

43154.diff​ does the following:

• removes the tabindex="0" from the content div and the toolbar div: those tabindex attributes are not needed any longer
• removes aria-label="Main content" from the content div: not needed
• keeps the media modal focus fallback introduced in [38142] by making the #wpbody-content element focusable only when used as fallback

[afercia]

To test, apply jaws-test-01.diff​ and repeat the steps described above, or:

• go to Settings > General
• the Date Format radio buttons there are grouped within a fieldset with a visually hidden legend "Date Format":

• tab to the first radio button
• verify IE11 + JAWS announce only the radio button label
• apply 43154.diff​
• (refresh)
• tab to the first radio button again
• verify the visually hidden legend "Date Format" is announced

[afercia]

In https://core.trac.wordpress.org/ticket/43154#comment:5 I've moved this ticket from 5.1 to Future Release and then to 5.2 because there wasn't an identified solution. Now there's a tested patch and a clear identified cause of the original bug so I'd like to propose this for 5.1 consideration.

[afercia]

In 44639:

Accessibility: Improve the way Internet Explorer 11 and JAWS announce fieldset legends.

When Internet Explorer encounters a non interactive element with a tabindex
attribute, it adds the element to the accessibility tree with a role=group and
an accessible name computed from the element. This prevents JAWS from announcing
any fieldset legend within the element.

• removes tabindex="0" from the content and the toolbar containers: these tabindex attributes are no longer needed
• removes aria-label="Main content" from the content container: not needed
• keeps the media modal focus fallback introduced in [38142] by making the #wpbody-content element focusable only when needed

Props stevefaulkner, aardrian.
Fixes #43154.