A Quick Overview of Web Accessibility

Kora Lajoie

Front End Web Developer,

tbk Creative

   @koralajoie

Why?

  • It's the law
  • Better UX, Accessibility IS Usability
  • Web Accessibility increases your audience
  • Everyone deserves it
  • and it's the right thing to do

Is this your website?

How do I start?

  • It's okay to start small
  • It's a process
  • You will never be finished
  • Being wrong
    • Prepare to be wrong
    • Prepare for others to be wrong (even us)

@thebillygregory

Semantics

  • Use elements for their intended purpose
    • Know when to use an <a> vs <button>
      • Do your links make sense out of context?
    • Use lists for lists (like relating groups of links)
    • Use tables ONLY for tabular data
    • Use Headings correctly (they're not just for making text bigger)
    • Use the title tag
  • Make sure your markup is valid!
    • e.g. No duplicate IDs, correct nesting
    • Validator

Images

  • ALL images require the alt attribute
    • Empty alt means the image is decorative
    • An empty alt is usually better than a bad alt
  • Having trouble writing alt?
  • ALWAYS avoid images with text
    • If you must provide a detailed textual summary

Audio and Video

  • Don't autoplay (unless it's expected)
  • Provide controls
  • Provide text alternative
  • Avoid flashing 

Forms

  • Provide instructions for form
    • (ex. instructions for what is required)
  • All fields need label
    • Labels need to be associated to the input
  • Mark required fields
  • Use fieldsets with legends for related fields
    • Checkboxes, radio buttons
  • Provide helpful errors

Keyboard

  • All interactive elements should be accessible via keyboard
  • Skip to content link
  • Provide more than one way to navigate the site (e.g. sitemaps)
  • Tab/focus management
  • Don't let user get lost or stuck (e.g. pop-ups, modals, off-canvas)
  • Don't be unpredictable
  • Focus order matters
  • If you apply :hover styles, consider :focus too
    • Don't use colour alone

Visual

  • Entire site should be readable and usable up to 200% zoom
  • Contrast
    • 4.5:1 contrast between the non-link text color
      and background.
    • 4.5:1 contrast between the link text color
      and background.
    • A 3:1 contrast between the link text color
      and the surrounding non-link text color.
  • Screen readers hide elements from their users when they are styled using display none and visibility hidden
    • ​sr-only css

Tools & Resources

Made with Slides.com