Open the call page on a viewport with a width of 600px or more.
Press ⌘ + F5 to start VoiceOver.
Press ^⌥U to open the rotor.
Press → and ← to find the headings menu.
Expected outcome
The headings list here should reflect the page's visual structure, which is three adjacent columns with a title each at the top and content within. The column titles should be level two headings and any headings within should be level three and so on, never increasing by more than one level at a time.
The headings menu is an important tool for screen reader users, and the heading levels are a key part of that. They give a quick, high-level overview of the structure of the page and the relationships between the sections. This use case falls under WCAG success criterion 1.3.1.
Actual outcome
The column headings aren't rendered as headings so they're missing from the menu. Heading levels also sometimes increase by more than one.
Severity
The success criterion covering this issue is WCAG level AA – the middle level. This is the conformance level that most organizations aim for. Messy heading levels alone are unlikely to prevent anyone from achieving their goals in the app but due to the basic level A conformance level this is still moderately severe.
Recommendation
Render the section titles as <h2> elements. Render the name and all the other headings in the Personal Info section as <h3> elements despite the styling differences between them. Render Active Campaigns and Surveys as <h3> and the subheadings within as <h4>.
Steps to reproduce
⌘ + F5to start VoiceOver.^⌥Uto open the rotor.→and←to find the headings menu.Expected outcome
The headings list here should reflect the page's visual structure, which is three adjacent columns with a title each at the top and content within. The column titles should be level two headings and any headings within should be level three and so on, never increasing by more than one level at a time.
The headings menu is an important tool for screen reader users, and the heading levels are a key part of that. They give a quick, high-level overview of the structure of the page and the relationships between the sections. This use case falls under WCAG success criterion 1.3.1.
Actual outcome
The column headings aren't rendered as headings so they're missing from the menu. Heading levels also sometimes increase by more than one.
Severity
The success criterion covering this issue is WCAG level AA – the middle level. This is the conformance level that most organizations aim for. Messy heading levels alone are unlikely to prevent anyone from achieving their goals in the app but due to the basic level A conformance level this is still moderately severe.
Recommendation
Render the section titles as
<h2>elements. Render the name and all the other headings in the Personal Info section as<h3>elements despite the styling differences between them. RenderActive CampaignsandSurveysas<h3>and the subheadings within as<h4>.