bryophyta
commented
2 years ago Note This is an automatically-generated comment. Feel free to edit the content, but please don't edit this 'note' block.
Intro to report
Copying the intro here to aid discoverability of the report's content:
Problematic Tabs
Tabs throughout the site were not consistent and problematic.
WCAG Reference:
2.4.3 Focus Order (Level A)
Understanding Focus Order | How to Meet Focus Order
4.1.1 Parsing (Level A)
Understanding Parsing |How to Meet Parsing
4.1.2 Name, Role, Value (Level A)
Understanding Name, Role, Value | How to Meet Name, Role, Value
Issue ID: DAC_Problematic_Tabs1
URL: https://www.theguardian.com/uk
Page title: News, sport and opinion from the Guardian's UK edition | The Guardian
Journey: 1.1 – consistent with many journeys.
Screenshot:
From navigating through the different URL’s there were many different variations of the use
of tabs found towards the bottom of the page. They were very problematic and caused
problems for many user groups.
In many instances, the tab panel list would not be visually displayed. As a result of this users
might not know than another selection of links is available for them to interact with; this
also impact keyboard only users because their keyboard focus will move to this tab panel
causing there focus to go missing.
DAC | Accessibility Report
`
91
The descriptions for the different tabs have been included with <span> elements, and this is
problematic for screen reader users. When screen reader users encounter the tab in
context, it will announce as four selections instead of the marked up two sections.
It was also discovered that there were instances of nested controls. This was due to the <li>
element having a role="tab", and then contained within the <li> element would be a <a>
element. Interactive controls must not have any focusable descendants as these are not
announced by screen readers and create an empty tab stop. That is, you could tab to the
element, but the screen reader will not announce its name, role, or state.
Report Link: https://drive.google.com/file/d/1OVYBrDL0-xQG6IxocZTJzY-gTJ96iRzT/view?usp=sharing
Full issue list: https://docs.google.com/spreadsheets/d/1vWQtZfD49uq7uNCNELuYN_HcIj-BKiE4t4Hwda3tJaQ/edit#gid=0