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)​
   • Manual Checklist (AODA online covers these)
   • General Checklist (under the accessibility tab)

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

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

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

• 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

• 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%

• 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

• 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!)

• 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

• Our Accessibility wiki