Hands-on Web Accessibility
What are we talking about?
- Me, me, meeeeee
- Why bother?
- Okay, fine, I bother, now what?
- Let's fix some stuff
Front End Web Developer,
- It's the law
- 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)
Everyone deserves it
- All of us in this room will eventually come to need it
- Better UX
- Accessibility IS Usability
Is this your website?
- Define language
- Text alternatives for all media
- Logical structure in a meaningful order
- Go beyond
- Keyboard navigable, controllable
- Limit flashes
- Skip links
- Link purpose
- Accessible forms
- Live video captions (excepted in AODA)
- Audio description of video (excepted in AODA)
- Contrast (4.5:1)
- Navigation alternatives
- Clear headings/labels
- Consistent menus, icons, buttons
- Error suggestion, prevention
Web Content Accessibility Guidelines (WCAG)
What we'll do
- Take inventory
- Discuss what was done well
- Pick some things to fix
- Fix them
Before we start
- 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
Website Submission #1
Let's do this.
My first reaction
(Schools are notoriously bad at websites)
Alright, it's not that bad.
But then I looked...
- 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
What we'll fix
- 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
And now a digression
Here's a thing I spent way too much time on.
An example of a responsive accessible navigation bar with dropdowns in vanilla js.
Let's talk about it.
Website Submission #2
Earth to Business
- 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
What we'll fix
- 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
Some remaining issues
One more digression
Let's talk about accessible forms!
Some notes about sliders/carousels:
- 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
That's it! We talked about...
- 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
- Navigation structure and behaviour
- Form structure and behaviour
- Slider/carousel behaviour
There is so much more...
- I couldn't cover everything
- Start reading up!
- Useful tools
Start testing today!
- 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 ($$$)
Hands-on Web Accessibility
By Scott Blinch