Web Accessibility

This slide has a background image of a convenience store featuring side by side swinging doors. One's annoyingly locked.

a screenshot of a recaptcha module

#A11Y

Numeronyms

  • i18n - internationalization
  • W3C – World Wide Web Consortium
  • Y2K – The Year 2000 problem
  • 24/7
  • AJ - A0J
sidewalk with a telephone pole obtrusively blocking the way
This slide has a background image of a modal window on Twitter.com. The draft tweet reads "Modals are weird".

Today's Take-Aways

  • Know what you don't know
  • Who / What / Why / How
  • Workflow Tips
  • Resources

20%

a grid of user icons requiring various a11y considerations, via Vox

Cognitive

ROBOTS

Google is, for all intents, a blind user.
A billionaire blind user with tens of millions of friends, all of whom hang on his every word." ~ Karsten M. Self

Problems?

"Features"

A screenshot of open source champion Richard Stallman's site. It appears to have no CSS, pretty vanilla HTML, and a great a11y score.
A screenshot of Sears.com and its fairly bad a11y audit
  • Awesomeness Level
            
      <ul class="select">
        <li>
          <input class="select_close" type="radio" name="awesomeness" id="awesomeness-close" value=""/>
          <span class="select_label select_label-placeholder">Awesomeness Level</span>
        </li>

        <li class="select_items">
          <input class="select_expand" type="radio" name="awesomeness" id="awesomeness-opener"/>
          <label class="select_closeLabel" for="awesomeness-close"></label>

          <ul class="select_options">
            <li class="select_option">
              <input class="select_input" type="radio" name="awesomeness" id="awesomeness-ridiculous"/>
              <label class="select_label" for="awesomeness-ridiculous">ridiculous</label>
            </li>

            <li class="select_option">
              <input class="select_input" type="radio" name="awesomeness" id="awesomeness-reasonable"/>
              <label class="select_label" for="awesomeness-reasonable">reasonable</label>
            </li>

            <li class="select_option">
              <input class="select_input" type="radio" name="awesomeness" id="awesomeness-lacking"/>
              <label class="select_label" for="awesomeness-lacking">lacking</label>
            </li>

            <li class="select_option">
              <input class="select_input" type="radio" name="awesomeness" id="awesomeness-awesomeless"/>
              <label class="select_label" for="awesomeness-awesomeless">awesomeless</label>
            </li>
          </ul>

          <label class="select_expandLabel" for="awesomeness-opener"></label>
        </li>
      </ul>
            
          
            
      <select name="awesomeness">
        <option>ridiculous</option>
        <option>reasonable</option>
        <option>lacking</option>
        <option>awesomeless</option>
      </select>
            
          
an Android device's select pop up

Assumptions

the programmer's dvorak keyboard layout
πŸ˜€

Do I hafta?

Netflix, Disney and Target have all faced lawsuits alleging their websites offer poor accessibility for the disabled.

Key Players

AODA: Accessibility for Ontarians with Disabilities Act (http://www.aoda.ca/): This is a governing body. They don’t have a standards set themselves; they enforce WCAG 2.0.

WCAG: Web Content Accessibility Guidelines. This group was developed by the W3C, and they set the standard for making the web accessible. They essentially have a collection of guidelines at three levels of strictness. Level A (the lowest) is required by law, in 2021 Level AA will be.

AODA excerpt:

There are fines for persons or organizations convicted of an offence under the AODA. The fines are:

  • up to $50,000 for each and every day or part day that an offence happens
  • for a corporation, up to $100,000 for each and every day or part day that an offence happens.

...officers of a corporation are liable to a fine of up to $50,000 for each and every day or part day that the offence happens

SEO

Do the right thing

😭

That's why it's called 'work'.

Put the user first.

Do your best!

CODE

  • Semantic Headings
  • Clear name, role, value, state
  • Meta tags
  • Language of page
  • Describe Abbreviations
  • Appropriate reading level
  • Resizable text
  • Keyboard navigable
  • Consistent navigation
  • No flashing
  • Clear errors
  • Contextual help
  • Color Contrast
  • Clear link purposes
  • Form Labels
  • Visible Focus
  • Alt tags
  • Captions or Transcripts
  • Sign language
  • Media control
  • Animation control
  • ...and much much more

Aria

ARIA (Assistive Rich Internet Applications), is a spec from the W3C and created to improve accessibility of applications by providing extra information to screen readers via HTML attributes.

ARIA attributes are predefined in the spec and are divided into two categories: roles, and states & properties.

            
      <div id="js-tabs">
        <ul role="tablist" class="nav--tabs">
          <li id="tab-label--tab1"><a href="#tab-tab1" role="tab" aria-controls="tab-tab1">tab1</a></li>
          <li id="tab-label--tab2"><a href="#tab-tab2" role="tab" aria-controls="tab-tab2">tab2</a></li>
          <li id="tab-label--tab3"><a href="#tab-tab3" role="tab" aria-controls="tab-tab3">tab3</a></li>
        </ul>
      </div><!-- tabs -->

      <div id="tab-tab1" class="tab is-active" role="tabpanel" aria-labelledby="tab-label--tab1">
        

Tab1 Content! </div><!-- tab --> <div id="tab-tab2" class="tab" role="tabpanel" aria-labelledby="tab-label--tab2">

Tab2 Content! </div><!-- tab --> <div id="tab-tab3" class="tab" role="tabpanel" aria-labelledby="tab-label--tab3">

Tab3 Content!

</div><!-- tab -->

Without Aria

"Same-page-link Home"

With Aria

"Home, tab selected, use Jaws key plus alt plus N to move the controlled element, 1 of 3."

#a11y time!

3 Ways to tackle this

Best Practices

  1. Standards compliant, semantic code
  2. Simple, intuitive UI and UX

The Easy Way

that same screenshot Richard Stallman's site, it could be called bit ugly.

The Hard Way

Do your best and test as much as you can, as you develop.

Checklists, Testing Tools, and a keen eye

The Very Hard Way

Know everything about everything

Quick reference (link)

Testing

A11y Project Checklist

Test for different types of color blindness

via flickr

Testing for Brightness & Contrast

            
      /* Dim the site, but not the dev tools */
      /* Maybe toggle .is-dim with a bit of JS to trigger this */
      body.is-dim { opacity: 0.1; }
            
          

Wave Web Accessibility Evaluation Tool

Chrome Dev Tools Audit Extension

WordPress

No silver bullet

  • Case by case basis, do your best!
  • Theme issue: child theme, fork
  • Custom themes forked from Twenty $current_year;
  • Styles: Contrast / Color / Spacing - CSS!
  • Plugin: PHP filters, hooks, open source contribute, or fork
  • As always, amazing community; google it!
            
      /*
       Theme Name:   Twenty Fifteen Child
       Theme URI:    http://example.com/twenty-fifteen-child/
       Template:     twentyfifteen
       Version:      1.0.0
       License:      GNU General Public License v2 or later
       License URI:  http://www.gnu.org/licenses/gpl-2.0.html

       Docs via: https://codex.wordpress.org/Child_Themes
      */
            
          

Wee Workflow Tips

  • Work local (speed)
  • Start static (single stack)
  • Single page of all the patterns and modules

Summary

  1. Who: Everyone & their robots
  2. What: be fully able to use your website
  3. When: Anytime.
  4. Where: Anywhere.
  5. Why: Because it's the right thing (+ perks)
  6. How: Cinchy (or pretty complicated)
            
      if (good_on_time == true) {
         return "Let's review a site now!";
      } else {
         return "Questions?!";
      }
            
          
  • Brightness
  • Color blindness
  • Chrome Dev Tool Audit
  • Wave
  • VoiceOver (⌘+F5)
    • "VO" is ctrl + alt
    • VO + i to choose items
    • VO + u to choose links
    • VO + arrows to jump items
  • If Conference Internet decent:

Questions?

Notable AT

Assistive Technology

  • JAWS and NVDA on Windows desktops and laptops are the most widely used screen readers for people with blindness.
  • VoiceOver on iOS is the most widely used mobile touch screen device screen reader for people with blindness.
  • Dragon NaturallySpeaking is the most widely used voice navigation software for people with motor impairments.
  • ZoomText is the most widely used screen magnification software for people with low vision.

Shout outs!

  1. A11y Project (for making life easier)
  2. Ren Aysha's CSS Code Editor pen
  3. Prism JS by Lea Verou
  4. A11y Camp Toronto
  5. Slide mood board by Rony Mikhael
  6. "Person" icon by Ferran Brown from the Noun Project
  7. Carpages.ca
  8. Harvest Bible Chapel Oakville
  9. WordCamp Hamilton

Thank You!

@ArleyM // arley@mcblain.ca

Slides: arleym.com/a11y