Motor (approx 19.9 million people)

Cognitive (approx 9.4 million people)

We Are Addicted

There's No Hope

#OneDayWithoutInternet

What if...

...the page is freaking out and filled unrecognizable errors

What if...
every website you visited and app you used was like this?

When do you give up?

But, Issues We See With Websites Today

• Overriding browser defaults (tabindex, outline)
• Using poor semantics
• Audio/Video (without cations/transcripts)
• Javascript (manipulating the dom)
• Not enough contrast for text elements
• Bad link text (e.g. click here)

Accessibility is NOT a feature,
it's part of the foundation.

When you think you'll add accessibility later.

1. Content Strategy
Image from http://www.infrontoftheline.com/blog/content.html

Content Strategy Considerations:

1. Readability: Comprehension
2. Alternative Text for Graphics
3. Closed Captioning
4. Transcripts

1. Readability: Comprehension Image from: http://uxmastery.com/readability-tests-magic-formula-or-recipe-for-disaster/

Testing

2. Meaningful Alternative Text

3. Closed Captions

Simple. Do it.

But, DON'T do it with YouTube.

Because it's awful!

Unless ... they are edited

4. Transcripts

Do it with style.

2. UX/Design

Not Plain

Not Boring

Design Considerations:

1. Personas
2. Contrast
3. Color
4. Readability: Fonts and Text
5. The Focus Outline
6. Animation

1. Personas

Update personas to include 3 A's:

2. Contrast

The difference in color and light between parts of an image. -wikipedia

How can we check this?

How can we check this in sketch?

How can we check this on a live site?

3. Color

Meaningful Without Color

Bad: Error Messaging Relies on Color

Meaningful Without Color

Better: Message Conveyed With Icons

Testing

Good Example: Provide Options

4. Readability: Fonts and Text Image from: http://uxmastery.com/readability-tests-magic-formula-or-recipe-for-disaster/

Readability: Easy To Read and Understand Content

5. The :focus Outline

6. Animation

Things to avoid:

3. Development

Development Considerations:

1. Aria
2. Valid HTML
3. Semantic HTML
4. Focus Management (aka - Keyboard Accessibility)
5. Canvas
6. SVG
7. Forms

1. ARIA

ARIA: provides a set of attributes that you can add to HTML elements.

Don't add default implicit roles to elements

❮button role="button"❯ button text ❮/button❯

Don't add ARIA state or property attributes in addition to their native HTML counterparts

❮input type="text" required aria-required="true"❯

❮div hidden aria-hidden="true"❯

Don't add ARIA roles and states or properties to long-implemented structural elements

❮h1 role="heading" aria-level="1"❯heading text❮/h1❯

New(ish) HTML5 Elements with default implicit semantics

What this means is that, where implemented, the browser will expose the default implicit semantics of the element so you don’t have to.

❮header❯ maps to role="banner"

❮nav❯ maps to role="navigation"

❮main❯ maps to role="main"

❮section❯ maps to role="region"

❮article❯ maps to role="article"

❮aside❯ maps to role="complementary"

❮footer❯ maps to role="contentinfo"

New(ish) HTML5 Elements: Browser Support

New(ish) HTML5 Elements: Browser Support

BUT IE and Safari do not offer support for all of the role mappings. -Deque University

USE it for Landmark Roles

❮header role="banner"❯

❮nav role="navigation" ❯

❮main role="main" ❯

❮footer role="contentinfo" ❯

2. W3C Validation

W3C Validation

3. Semantic HTML

• Headings
  • are meant to help users understand content hierarchy
  • levels should not be skipped (BAD - h1, h2, h4)
• Links, Buttons, Divs and Spans
  • Links - are being styled like buttons, which is fine. Just don't mark them up as buttons.
  • a, div and span ARE NOT buttons

    Products

  • if it acts like a button, make it a

    button

4. Focus Management
(aka - Keyboard Accessibility)

Tabbing. Does it: Highlight what it's on?

Does it: Jump somewhere unexpected?

Do you have to go through the main nav?

Provide a skip nav

Provide skip to page sections

5. Accessible SVGs

6. Accessible Canvas

    
        text inside of a canvas element
        
 text inside of a canvas element with paragraph tag 
    

Off Screen Text

    
//hiding text elements from the view, but keeping them available to the screen reader
.sr-only {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px); //for clip being deprecated
}
    

7. Functional and Logical Forms

Forms

• DO NOT use positive tabindex="1"
• Label everything and link the label to the input

    Email Address
    

• Don't forget to label things that have hidden labels (search box). Use .sr-only class that is used for the icon fonts.

    Search for Gift Cards
    

• Put the label/input group in a li tag and put all of these groupings in a list.
• Check out: Falling in Love With Forms by Aaron Gustafson

Document

Add Automated Testing:

• NPM: https://www.npmjs.com/browse/keyword/a11y
• Gulp-a11y
• Grunt-a11y
• Tenon
• Ember
• React
• pa11y (dashboard): http://pa11y.org/

pa11y http://pa11y.org/

4. QA Testing

QA Testing

1. Tools
2. Assistive Technology
3. People

Online Testing Tools

• http://wave.webaim.org/
• http://tenon.io/
• http://leaverou.github.io/contrast-ratio/
• http://www.hemingwayapp.com/

Chrome Testing Tools

• Tenon
• Wave
• Chrome Developer Tools
• aXe
• NoCoffee

Assistive Technology

Screen Reader

& Test Using Other AT

Test With Real Users

Progress is Better than Perfection