[wp-trac] [WordPress Trac] #43154: JAWS and Internet Explorer 11 don't announce the fieldset legends

[WordPress Trac]

#43154: JAWS and Internet Explorer 11 don't announce the fieldset legends
----------------------------+-----------------------------
 Reporter:  afercia         |      Owner:
     Type:  defect (bug)    |     Status:  new
 Priority:  normal          |  Milestone:  Awaiting Review
Component:  Administration  |    Version:
 Severity:  normal          |   Keywords:  has-screenshots
  Focuses:  accessibility   |
----------------------------+-----------------------------
 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.

 [[Image(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). [https://accessibility.blog.gov.uk/2016/07/22
 /using-the-fieldset-and-legend-elements/ 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
 [https://webaim.org/projects/screenreadersurvey7/#browsercombos 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.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/43154>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform