I attended Cordellia Yokum's Usability for everyone: Are you excluding some users from accessing your website? workshop at CAST 2022.
As I can't do justice to a packed and interactive five-hour session in a short post like this, I'm going to simply drop bullet lists and links from the notes I took here.
Accessibility
- Not just about disability
- Auditory, cognitive, neurological, physical, visual
- US: one in four have some disability
- Small screens, elderly users, slow internet, poor lighting conditions, etc
- SEO benefits from being able to access content
- Accessibility is not a project. Like Quality, improve it incrementally and continually
Assistive technologies
- Screen magnifiers (e.g. web browser zoom)
- Text readers (e.g. blind and partially-sighted, ADHD, dyslexia sufferers)
- Speech recognition software
- Head pointers, motion tracking (often for paraplegic users)
- Single switch entry (e.g. sip and puff mouth operation; keyboards with "quick buttons")
POUR
- Perceivable
- Operable
- Understandable
- Robust
- Quick (and interactive) reference
- Filter aggressively for your immediate need
- Covers test ideas, success criteria, fail criteria
- Baseline AA, cherry pick from AAA (for most contexts)
- Some judgement calls may still need to be made
Perceivable
- Text alternatives for non-text content (e.g. text button, alt, captions)
- Content that can be presented in different ways without losing meaning
- Make it easy for users to see and hear content (e.g. use landmarks for navigation)
Operable
- Navigation of components; make all functionality available from the keyboard
- Time to read and use content - "you have three minutes to finish your purchase"
- Don't make people sick or ill when using your page (e.g.seizure inducing images)
- Don't let people get trapped in the content (e.g. can tab across all fields)
- HTML5 with Semantic Elements gives much of this already
- Subverting the intent of HTML (e.g. Div as button) causes problems.
Understandable
- Text is readable
- Content appears consistent and predictable
- Often about form inputs and labels
- Behaviour that is flagged
- Errors that make sense
Robust
- HTML code is valid
- Don't abuse JS and DOM updates because you can
- Use HTML5's semantic elements and get benefits out of the box
- Linters can help, but dynamic content won't usually be checked by them
Oracles
- WAI-ARIA
- WCAG
- W3C HTML validator
- Contrast Finder
- aXe extension
- Lighthouse extension
- WAVE extension
- Accessibility Insights extension
- Chrome Dev Tools, Accessibility section in element mouseover
- Chrome Dev Tools, Accessibility Tree in Elements pane
Colour
- Contrast has strict pass/fail rules
- ... but they are still contextual (e.g. gradient, font size, interactivity, opacity etc)
- Use pure hex numbers don't lighten with CSS
- Sometimes perception is not the same as the standards
- Remember colourblindness
- Remember different states of page elements (Dev tools can force states)
- Get the designers to use tools e.g. Figma plugin
- CSS prefers-color-scheme (respects Dark mode)
- Avoid large blocks of pure red (because seizures)
Motion
- Migraine sufferers, users with ADHD can be affected
- Need to give people the ability to reduce motion
- CSS prefers-reduced-motion respects preference settable in OS (e.g. Mac "Reduce Motion")
- Limit any flashes to max 3 (because seizures)
Alternative Text
- Provides value for screen reader, SEO, and slow connection
- Different rules for different elements (decision tree)
- Empty alt attribute stops screen readers verbalising the URL (!)
- Link to deeper description when you have a complex image (e.g. chart)
- Audio and video: consider transcripts
Zoom and Reflow
- Keeping the website responsive in zooming or magnification
- Simple heuristic step up to +400% zoom, inspecting at each increment
- Avoid horizontal scrolling: hard to navigate; context is lost
- Images should be resized for the page
- Page elements moving to be in the viewport is fine
Keyboard navigation
- Web Accessibility in Mind guidelines
- For vision (including focus) and mobility-impaired users
- Also power users
- Safari - has some weird preferences on keyboard navigation
- Interesting conversation around defaulting keyboard focus
- ... into search box in modal dialog vs new page vs results)
Forms
- Using for=id allows label text to link to the page element with name
- Group by role to aid navigation
- Remember the difference between submit button and a link
- Disabling a button until fields are filled blocks readers
- Attribute aria-disabled (ref) allows focus but still notes it as disabled on the page
- Clickable div element might look like a button (!) but screen readers don't see it
Error Handling
- Colour should not be the only indicator of a failure or required
- Use aria-live to announce issues
- Announce issues at the top and on the specific elements
- ... with jump links from the top to the issue
- Be explicit about how to fix them
Autocomplete
- very helpful to those who have to type with mouth etc
- reduces mistakes generally
Comments
Post a Comment