Hands-on Web Accessibility

What are we talking about?

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

Scott Blinch

Front End Web Developer,

Race Roster

Past Talks

Why?

Is this your website?

A

  • Define language
  • Text alternatives for all media
  • Logical structure in a meaningful order
  • Go beyond colour
  • Keyboard navigable, controllable
  • Limit flashes
  • Skip links
  • Link purpose
  • Accessible forms

AA

  • Live video captions (excepted in AODA)
  • Audio description of video (excepted in AODA)
  • Contrast (4.5:1)
  • Zoom/resizing
  • Navigation alternatives
  • Clear headings/labels
  • Consistent menus, icons, buttons
  • Error suggestion, prevention

Web Content Accessibility Guidelines (WCAG)

What we'll do

  1. Take inventory
  2. Discuss what was done well
  3. Pick some things to fix
  4. 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

Western Engineering

Let's do this.

My first reaction

(Schools are notoriously bad at websites)

Alright, it's not that bad.

But then I looked...

Taking Inventory

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

The Wins

Taking Inventory

  • Missing skip links
  • Keyboard navigation

What we'll fix

Taking Inventory

  • 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

Remaining Issues

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.

 

https://codepen.io/scottblinch/pen/gzdKyd

Website Submission #2

Earth to Business

Taking Inventory

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

Some wins

Taking Inventory

  • Colour contrast
  • Form accessibility

What we'll fix

Taking Inventory

  • 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
  • Digressions
    • Navigation structure and behaviour
    • Form structure and behaviour
    • Slider/carousel behaviour

There is so much more...

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 ($$$)

Thanks 😍

Hands-on Web Accessibility

By Scott Blinch

Hands-on Web Accessibility

  • 403
Loading comments...

More from Scott Blinch