Most Read Page Dev A11y swarm

[thekp]

Is your feature request related to a problem? Please describe.
Once the most read page is available on our TEST environment, we have to do a small A11y swarm to confirm h1 works as expected.

doc: https://bbc.github.io/accessibility-news-and-you/accessibility-swarms
most read available here: https://www.test.bbc.com/pidgin/popular/read

Initial a11y requirements for most read page:
Accessibility - Most read should be within the main container and the h1 should be visually displayed as ‘Most read’ and the skip to content link should anchor here (note there should not be an h2 for most read or any other regions for most read within the main region)

Describe the solution you'd like
Conduct an a11y swarm with 2-3 devs. Focus mainly on the a11y behavior of the h1. The most read component has already had a full a11y swarm.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Testing notes
[Tester to complete]

Dev insight: Will Cypress tests be required or are unit tests sufficient? Will there be any potential regression? etc

• This feature is expected to need manual testing.

Additional context
Acceptance Criteria for skip to content:

Skip to content link
Given I use a keyboard only
When I navigate to the banner landmark by pressing the TAB key
Then the ‘skip to content’ link must be the first piece of content to receive focus after the brand logo
And the ‘skip to content’ link must be visually displayed on focus
And this must include the browser default focus outline styling

Given I use a screen reader
When I activate the ‘skip to content’ link
Then the h1 in the main region should be announced
And after this announcement, I must be able to navigate to the next piece of content below the h1


Given there is a ‘skip to content’ link
When I activate the ‘skip to content’ link
Then the url should be user friendly and descriptive of it’s destination e.g. #content 

[thekp]

❓ = Not done
✅ = Done, pass
❌ = Done, fail
👀 = Review with UX

https://bbc.github.io/accessibility-news-and-you/accessibility-swarms

Checklist - Manual

• Design ✅

we had a UX review before merging the work.

• Color contrast ✅

I used this tool: https://webaim.org/resources/contrastchecker/
to check the h1 contrast to the background

• Color blindness ✅

I used Chromelens to check that the component was still visible with the differient vision varients.

• High Contrast mode PC ✅

• Color preferences changed in Firefox

The h1 changes colour as expected, when the text colour is updated

• Text resized to 200% ✅

• Page zoomed to 200% ✅

• Heading order ✅

• Icons ✅

• Keyboard navigation: tab order, focus css, trace tab path ✅

• aXe ✅

issue covered here: dequelabs/axe-core#1597

• No CSS ✅

• No Javascript ✅

most read page still renders as it is server side rendered 💯

• bbc-a11y ✅

https://github.com/bbc/bbc-a11y
Note: when the cookie banner appears, there is a h2 above the h1 in element order. Hence this warning appears:

Checklist - Assistive Technology

Acceptance criteria:

Skip to content link
Given I use a screen reader
When I activate the ‘skip to content’ link
Then the h1 in the main region should be announced
And after this announcement, I must be able to navigate to the next piece of content below the h1


Given there is a ‘skip to content’ link
When I activate the ‘skip to content’ link
Then the url should be user friendly and descriptive of its destination e.g. #content 

• VoiceOver OS (Mac) (Screen Reader) ✅

The skip to content link works as expected with ctrl + alt + space interaction with the link
small note: it doesn't work with enter key interaction with link

• VoiceOver iOS (iPhone/iPad) (Screen Reader) ✅

Works as expected

• TalkBack (Screen Reader) ✅

  Latest Version with Chrome (Latest Version) on Android (Latest Version)

• ZoomText (Screen Magnifier with Screen Reader capabilities) ✅

  Latest Version with Internet Explorer 11 on Windows (XP/Vista/7/8/10)

• Dragon Naturallyspeaking (Speech Recognition) ✅

  Version 13 with Internet Explorer 11 on Windows (XP/Vista/7/8/10)

• JAWS (Screen Reader) ✅

  Version 17 with Internet Explorer 11 on Windows (XP/Vista/7/8/10)

• Read&Write (Reading Solution) ✅

  Latest Version with Internet Explorer 11 on Windows (XP/Vista/7/8/10)

• NVDA (Screen Reader) ✅

  Latest Version with Firefox (Latest Version) on Windows (XP/Vista/7/8/10)

[thekp]

A11y complete for most read page, no issues found 🚀