Headings/Links within Fieldset Legend Elements Not Recognized by JAWS 2018

[bethwhitmer]

Summary

If a heading or link or heading with a nested link is coded within a fieldset’s legend element then JAWS 2018 doesn’t recognize the heading and a screen reader cannot navigate to sections of the page using heading quick key (H) nor do the headings show up in the JAWS List of Headings. See CodePen page: https://s.codepen.io/jlgauvreau/debug/KBJVgb.

Expected result

Since the code on our test page seems to be valid (i.e. passes the Nu HTML Checker validation) then I would expect that with JAWS 2018 I could interact with the headings that are nested within a fiedset's legend element in the same way that I interact with any other heading (e.g. use the H key to navigate, see the heading listed in the JAWS Heading list, etc.).

Actual result

When testing the above codepen page, the first 2 heading links (CMS.gov and CDC.gov) are recognized by JAWS 2018 but not the remaining headings/links that are coded within a fieldset's legend element (CNN, NBC Favorites, BuyBuyBaby, and Blue Nile). I can't jump to these last 4 headings using the H key and they aren't in the JAWS Headings list.

Example

See CodePen page: https://s.codepen.io/jlgauvreau/debug/KBJVgb.

Additional Information

We typically don't build pages with fieldset legends that are also links and headings but one of the websites we support has this design already implemented so we were debugging various implementations.

JAWS version and build number

JAWS 2018.1807.8

Operating System and version

Windows 7

Browser and version:

Internet Explorer 11

[sentience]

We worked around this using ARIA attributes to get the groups and descriptions we wanted from fieldset/legend.

Before:

<fieldset>
  <legend><h3>Question text</h3></legend>
  <div>
    <input type="radio" name="question1option1" id="question1option1" value="1">
    <label for="question1option1">Strongly Disagree</label>
  </div>
  <div>
    <input type="radio" name="question1option2" id="question1option2" value="2">
    <label for="question1option2">Disagree</label>
  </div>
  …
</fieldset>

After:

<div aria-labelledby="question1" role="group">
  <h3 id="question1">Question text</h3>
  <div>
    <input type="radio" name="question1option1" id="question1option1" value="1" aria-describedby="question1">
    <label for="question1option1">Strongly Disagree</label>
  </div>
  <div>
    <input type="radio" name="question1option2" id="question1option2" value="2" aria-describedby="question1">
    <label for="question1option2">Disagree</label>
  </div>
  …
</div>

[bethwhitmer]

Just saw this...thank you @sentience!!

[bethwhitmer]

Also wanted to note that the original issue still occurs with JAWS 2019 as well.

[hannalaakso]

We've also run into this issue with Jaws 2018 and IE11 (test page).

• Shift + H announces "There are no headings on this page"
• Ins + F6 announces "No headings found"

Jaws 17 and 18 announce the headings correctly.

[lamador]

The issue was replicated using the latest version of JAWS 2020 (2020.2004.66) and IE11 (11.778.18362.0) on Windows 10. Additional tests were performed using Codepen Issue 100 Test (debug).

Although not within the scope of this ticket, using the latest version of Firefox (76.0.1, 64-bit) also exhibited the same issue as IE11. The one exception is when there is no content contained within a fieldset with the a heading nested in the legend. JAWS did announce the heading in this scenario.

[JAWS-test]

The problem seems to occur only in IE 11. In Chrome and Edge the headings in the legend are recognized correctly

[rinto-c]

A new service I am working on went through an internal accessibility assessment and the team have raised an issue when using JAWS screen reading software. When they press h the screen reader will jump to the first h1 heading. However they have said that this does not happen when the first heading is within a group (e.g. when there is a radio button question on the page and so the h1 is inside a legend within a fieldset). They have raised this as a potential issue, however I got them to test on a standard gds page (https://design-system.service.gov.uk/patterns/question-pages/default/index.html) and they observed the same problem.

[TPGJRogers]

Issue is marked IE11. Closing.