Hands-on Web Accessibility

1. Me, me, meeeeee
2. Why bother?
3. Okay, fine, I bother, now what?
4. Let's fix some stuff

• Hardening WordPress
• Website Accessibility
• The (Near) Future of Website Accessibility
• Code in the Dark
• Emmet Quick Start

• It's the law
  • Canada
    • Policy on Communications and Federal Identity (gov only, no WCAG)
    • Accessibility for Ontarians with Disabilities Act (ON only, public/private, WCAG 2.0 A/AA)
  • USA
    • Tons!
• Everyone deserves it
  • All of us in this room will eventually come to need it
• Better UX
  • Accessibility IS Usability

1. Take inventory
2. Discuss what was done well
3. Pick some things to fix
4. Fix them

• It's not my intention to embarrass anyone!
  • It's always much better to be an a11y evangelist by teaching rather than shaming
• Feel free to interrupt me and ask questions any time
• I could be wrong about something
  • I like to talk about a11y but I'm by no means an all-knowing expert
  • Please stop and correct me before I spread poisonous misinformation throughout the world

• Good contrast
• Macro components predictable throughout site (within eng subdomain)
• Most links and images have good text
• External links have visual indication

• Missing skip links
• Keyboard navigation

• Hero slider has major accessibility issues (most do)
• Link/image text lacking in some content
• Maybe standardize button design
• Still some tabbing issues in other parts of the page
• Need a site map for alternative means of navigation

• Macro components predictable throughout site
• Breadcrumbs and current page marked help user keep track
• Heading structure is mostly sound
• Common UI components are consistent

• Colour contrast
• Form accessibility

• Similar navigation issues as UWO Eng
  • Tabbing, skip links, etc
• Home page slider has similar issues as UWO Eng
• May need a sitemap due to 2-levels of dropdowns (or could just simplify navigation)
• Some alt attributes and links could be more descriptive

• Probably don't use them, but if you must...
• Try to avoid having them autoplay automatically
• Add controls to pause and play
• Add left and right controls (and maybe let the arrow keys work)
• Add keyboard navigable slide markers
• All actions should be explicit - focus/hover shouldn't cause changes
• Manage focus
  • If slide changes, put focus on visible slide
  • Don't allow non-visible slides to receive focus
• Proper alt atttributes
• Be careful with contrast

• Why we care about accessibility
• How to comply with best practices
• Taking inventory of what does and doesn't work in websites in the real world
• Taking time to bite off a few pieces at a time and fix 'em up
• Digressions
  • Navigation structure and behaviour
  • Form structure and behaviour
  • Slider/carousel behaviour

• I couldn't cover everything
• Start reading up!
  • https://www.w3.org/WAI/fundamentals/accessibility-intro/
  • https://www.ontario.ca/page/how-make-websites-accessible
  • https://medium.com/statuscode/getting-started-with-website-accessibility-5586c7febc92
• Useful tools
  • https://developers.google.com/web/tools/lighthouse/
  • https://webaim.org/resources/contrastchecker/
  • https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd

• Test using your website using just your keyboard
  • Put the mouse away
  • Try to see when focus gets lost, or can't access certain parts of the page
  • What happens when dismissing a component that has focus in it?
• Test using a screen reader
  • Apple devices have VoiceOver
  • Android has Talkbaclk
  • For Windows, download either NVDA (free) or JAWS ($$$)

Thanks 😍