Basic accessibility review

[kimadactyl]

Description

Run down accessibility checklist to make sure we're doing all the right things. Obviously we will be accessibility first as we build but it's worthwhile to do an audit after we have built a few pages.

Acceptance Criteria

Must do:

• [x] Run something like lighthouse (https://developer.chrome.com/docs/lighthouse/overview/)
• [x] Use a WAVE tool to evaluate each page https://wave.webaim.org/
• [x] Run through site use with keyboard only
• [x] #169
• [x] Check all meaningful images for alt text
• [x] Check all form inputs for labels
• [x] Check all links for meaningful & unique link text
• [x] Check all headings are correct for thier semantic meaning

Should do:

• [ ] #168

Notes

• Starling bank has a nice statement https://www.starlingbank.com/website-accessibility. We ought to be doing all the things listed there as "What we are doing"

[aaaaargZombies]

Lighthouse notes

• [ ] All "oldham news" badges do not meet sufficient contrast ratios for accessibility. #160
  • currently 2.14:1 we need 4.5:1

[aaaaargZombies]

WAVE tool notes

• [ ] All "UK news" badges do not meet sufficient contrast ratios for accessibility. #160
  • currently 3.66:1 we need 4.5:1

• [ ] All "surrounding estate" badges do not meet sufficient contrast ratios for accessibility. #160
  • currently 4.44:1 we need 4.5:1

• [ ] The link to the about page is flagged as suspicious because the link text is not meaningful or unique. in header and footer = "here" #161
• [ ] Most alt text receiving warning "An image has very long alternative text."

[aaaaargZombies]

keyboard navigation

• [ ] homepage magnifying glass cannot be tabbed to or used to open lightbox with keyboard #162
• [ ] once lightbox is open I can't seem to tab to the close link, not sure if focus issue or something underlying #162
• [ ] lightbox close link has no text contents #162

[aaaaargZombies]

Starling checklist

• [ ] "On every page, users can bypass the navigation menu and skip straight to the main content, if they want to." #163
• [ ] "Our website can be zoomed in as far as 200%, without compromising functionality or any of the key content."
  • Sticky filter menu exceeds viewport and cannot be scrolled into view #164
• [ ] "We use the correct default HTML tags so that screen readers can easily read the elements on a page. We also use headings in a clear and consistent way; and we always make sure they describe what’s on the page."
  • Timline should probably be a list, potentially nested lists givin we have decades and individual timeline items #166
  • our decade markers are links that lead no where, maybe they should be headers #165

[r-ferrier]

Closing this as everything outstanding now re-ticketed

[aaaaargZombies]

verification evidence is the tickets made and listed in the comments above