Your weekly frequent11y newsletter, brought to you by @ChrisBAshton:
What Does X% of Issues Mean?
Adrian Roselli ponders what tools mean when they claim to find up to X% of issues. What do “issues” mean in this context?
He ran a Twitter poll with a few options; most people interpreted “issues” to mean ‘issues validating against the 78 Success Criteria from WCAG 2.1’. But this was closely followed by people who thought it meant “against the tool’s own list of items”, i.e. tests unique to the tool. Finally, a small minority thought it might be against Techniques for WCAG 2.1, which “provides 90 different ways of failing assorted Success Criteria”.
Not a hugely informative post, but an interesting thought piece. Adrian recommends asking vendors to clarify exactly what they mean by “issues”.
4 Required Tests Before Shipping New Features
Stephanie Eckles shares 4 quick checks you should make before pushing to production.
- Almost 85% of homepages have text contrast issues – so check your colour contrast. Stephanie lists some automated tools that can detect these issues.
- Use ButtonBuddy to choose accessible colours for your buttons and their focus states. For the text, background colour, and transition between focus states, there are five con trast considerations you’ll need to make!
- Next consider keyboard interaction – here’s a handy set of rules, which I’ve copied directly from the article:
- If it opens something, it may need to close with Escape.
- If it’s scrollable, it needs to respond to Up/Down arrow keys.
- If it’s a group of related options (like autocomplete or tabs), it may need to respond to Up/Down or Left/Right arrow keys (search phrase: roving tabindex).
- If it opens a dialog/modal, it needs to prevent tab access with elements outside of that experience (search phrases: “trapping focus” and “inert”).
- If it’s interactive at all, it needs to be able to gain keyboard focus, and that focus needs to have a visible style.
- If a sighted mouse user can explore and make independent selections (like in an autocomplete), a keyboard user needs to be able to as well. This likely means allowing a combination of tab, arrow keys, and Enter to explore and then make a selection.
- If a
:hovertriggers content, then so should:focus(ex. menus). You will also need a way to close this content, whether that’s a tap/click outside or Escape key, and ensure that the method you choose is also accessible for touchscreen users.
- All focusable elements must have visible styles.
- WCAG SC 1.4.10 Reflow stipulates that your design should be able to accommodate a zoom of up to 400% on desktop. Watch out for sticky navigation, ‘contained scroll’ areas becoming cut-off, or overflows that cut off content.
Why ‘dark mode’ causes more accessibility issues than it solves
H Locke, a UX designer, talks about astigmatism, which affects around 47% of the UK population. Actually Locke points out it affects most of the population, but the 47% figure is those that require corrective treatment, such as lenses or glasses.
The condition affects the shape of the eye, making it more ‘rugby ball’ shaped than football shaped. This leads to light being focused at more than one place in the eye, and can cause blurred vision, headaches and eye strain.
Locke says that the ‘dark mode’ on certain websites can cause an effect called ‘halation’, for those with astigmatism. There’s a mocked up screenshot in the article, demonstrating the effect, but it essentially makes the area surrounding highlights blurry. In dark mode, there are a lot of highlights (e.g. white images are more pronounced), so the text around the images becomes blurred.
Dark mode advocates often cite it as an accessibility feature – and it is an improvement for some people – but Locke reminds us of the importance of making such modes optional.
Did you know that you can subscribe to dai11y, week11y, fortnight11y or month11y updates! Every newsletter gets the same content; it is your choice to have short, regular emails or longer, less frequent ones. Curated with ♥ by developer @ChrisBAshton.
