WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 2 years ago

#43154 closed defect (bug) (fixed)

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

Reported by: afercia Owned by: afercia
Milestone: 5.1 Priority: normal
Severity: normal Version:
Component: Administration Keywords: has-screenshots has-patch
Focuses: accessibility Cc:

Description

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.

https://cldup.com/zX6S1Fl39u.png

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.

Attachments (3)

jaws-test-01.diff (633 bytes) - added by afercia 3 years ago.
jaws-test-02.diff (401 bytes) - added by afercia 3 years ago.
43154.diff (1.6 KB) - added by afercia 2 years ago.

Download all attachments as: .zip

Change History (16)

@afercia
3 years ago

@afercia
3 years ago

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


3 years ago

#2 @afercia
3 years ago

  • Milestone changed from Awaiting Review to 5.0

This ticket was mentioned in Slack in #accessibility by rianrietveld. View the logs.


2 years ago

#4 @pento
2 years ago

  • Milestone changed from 5.0 to 5.1

#5 @afercia
2 years ago

  • Milestone changed from 5.1 to Future Release

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

#6 @stommepoes
2 years ago

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

Last edited 2 years ago by stommepoes (previous) (diff)

#7 @afercia
2 years ago

@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

Last edited 2 years ago by afercia (previous) (diff)

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


2 years ago

#9 @afercia
2 years ago

  • Keywords needs-patch added
  • Milestone changed from Future Release to 5.2
  • Owner set to afercia
  • Status changed from new to assigned

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.

Last edited 2 years ago by afercia (previous) (diff)

@afercia
2 years ago

#10 @afercia
2 years ago

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:

http://cldup.com/CBZjlPjkwd.png

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
Last edited 2 years ago by afercia (previous) (diff)

#11 @afercia
2 years ago

  • Keywords has-patch added; needs-patch removed

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":

http://cldup.com/H8F4U4QoCN.png

  • 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

#12 @afercia
2 years ago

  • Milestone changed from 5.2 to 5.1

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.

#13 @afercia
2 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

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.

Note: See TracTickets for help on using tickets.