Web Accessibility

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

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"

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

Assumptions

😀

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

Standards compliant, semantic code
Simple, intuitive UI and UX

The Easy Way

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

Who: Everyone & their robots
What: be fully able to use your website
When: Anytime.
Where: Anywhere.
Why: Because it's the right thing (+ perks)
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:
- W3C Validator
- A11y Checklist

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.

Resources

Shout outs!

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