Lunch and Learn

tbk AODA Process

Things to keep in mind

  • We should start thinking about accessibility as soon as we start coding
  • Images ALWAYS need an alt attribute
  • Form inputs ALWAYS need labels
  • Write good HTML and we're well on our way to being accessible
  • Watch out for the below:

Process

  1. Run site through AODA online
    • Review errors, there will likely be duplicates across pages so don't be overwhelmed by the number
    • Known 'gotchas':

      • AODA Online will falsely report empty anchor tags containing images if the text is in a sibling element.

      • AODA Online will falsely report missing label tags if the input is inside of the label tag. 

  2. Do manual tests (see next slides)​

Color Contrast

  1. Chrome Extension - here
    • This is good for testing text on image backgrounds
  2. WebAIM - Color Contrast Checker
    • You need to have the hex values

 

Image Alts

  1. Image alt attribute always needs to exist
  2. Use empty alts for decorative images
    • Think about if the alt is providing any content or value to the user

Links

  1. Link text should be meaningful when read out of context

Keyboard Navigation

  • Is the focus always obvious
  • Do you get stuck in any areas?
  • Does the tab order make sense?
  • Are we using trap focus for areas like slide-outs and modals?
  • Can all areas be accessed / interacted with via the keyboard?

 

  • Notes: Some form fields are interacted via the arrow keys

Forms

  • If using Gravity Forms make sure we have the WCAG plugin turned on
  • Provide instructions for form before the form tag
  • Mark required fields (programmatically and visually)
    • If using *, define it
  • Use fieldsets with legends for related fields
    • Sets of multiple radio/checkboxes
    • Don't nest fieldsets
  • Form Errors
    • Provide summary at top in unordered list, each item linking to the associated field

Zoom

  • Current guideline states you need to be able to zoom up to 200%
  • WCAG 2.1 is updating this guideline
    • Content can be zoomed up to width of 320px, without loss of content or functionality, or scrolling on more than one axis
      • Unless part of the presentation (images, maps, diagrams, videos, data tables, etc)
      • Equivalent width of 1280px zoomed to 400%

 

WCAG 2.1 Updates

  • Pointer Accessibility 

    • Click, tap, touch (etc) events

      • Don't bind to the "down" event, bind to the "up" event so user can move away from element if mistakenly clicked

  • Text Spacing (AA)

    • Blocks of text need to be able to be adjusted to the following without any elements breaking
      • Minimum line height of 1.5
      • Minimum spacing beneath paragraphs of 2
      • Letter spacing at least 0.12
      • Word spacing at least 0.16

Other WCAG 2.1 Updates

  • Content on hover or focus (AA), needs to be:
    • Dismissible without moving hover or focus away
    • Hoverable without the content being dismissed by the mouse movement
    • Persistent and not be dismissed until explicitly done so by the user

We should be using click events instead

  • INTERRUPTIONS (AA)
    • Any automatic interruptions or changes to content needs to be pausable
      • Add a pause button to your sliders (or better yet, don't auto-slide them!)

More WCAG 2.1 Updates

  • TARGET SIZE (AA)

    • Target sizes for pointer inputs must be 44px by 22px (44x44 in AAA), except...
      • Equivalent target of appropriate size exists elsewhere
      • Inline
      • Essential to the information

Testing Tools

  • AXE
  • WAVE
  • Helpful Bookmarklets - wiki
    • Tab Focus
    • Image Alts
    • Anchor Text

Resources

Made with Slides.com