1 of 40

Web Accessibility -

Myths and Methods�

Lyle Reed

@lanreed

Web Developer - Lewis Communications�Nodevember 2017 - Nov 27, 2017

2 of 40

What is Accessibility?

UX focused on making a site usable for the widest possible audience.

3 of 40

Quick Myths about Accessibility

4 of 40

MYTH #1: Accessibility is only for the disabled

Image: Microsoft Design Inclusive Toolkit

Users may be "impaired" only in a range of contexts, situations, or periods in their lives.

5 of 40

Myth #2: Screen Readers don’t use JS

?

👍

6 of 40

Myth #3: No other benefits

SEO

Traffic

Reputation

Usability

Increases site visibility with Search Engines�Unlike accessibility, SEO is something companies don’t usually hesitate to spend money on. And yet many accessibility guidelines are the same as SEO techniques.

For example valid HTML, clear link names, using text rather than images of text, providing text alternatives for images, etc. This means that incorporating accessibility will at the same time help to improve websites’ search engines ranking.��Increases site traffic and usage�With improved SEO comes an increase in visitors to the website and if the website is easy for them to use then they will spend more time on it, which will, in turn, boost SEO.��Increased usability�Accessibility increases usability of a website, and in effect improves the user experience. This is because accessibility guidelines are similar to usability guidelines, including using a clear and consistent design, clear navigation, dividing blocks of information into logical sections and good colour contrast. Increased usability makes users more likely to return to the website.��Reputation�Creating a website that welcomes everyone, regardless of how they access your site, is a good thing for your business.

7 of 40

Types of Impairment

Visual

Auditory

Motor

Cognitive

Visual:

This can be non-sighted users, users with low-vision, users with obstructed vision (crowded display), or even simply your own bad eyes from staring at a monitor all day. Colour blindness, Myopia, etc.

Auditory:

Deafness, Acoustic Trauma, acoustic processing disorders, loud spaces, learning to read. SEO.

The web is a visual medium, but captions and fallbacks for sound-necessary media need to be considered for hearing impaired users.

Motor:

Have you ever broken your arm and had to write with the other hand? You’ve been an an impaired user!

RSI and temporary injuries to muscular diseases and paralysis.

People with motor impairments typically use a wide range of assistive technology from specialized keyboards, to eye trackers, to using single buttons to navigate their computer.

Cognitive:

�

8 of 40

285 Million

Estimated people worldwide with visual impairment.

Moderate visual impairment
Severe visual impairment
Blindness

Red-green Impairment: 8% males, 0.5% females worldwide

9 of 40

Example of Red-reduced impairment

10 of 40

What other motivations do we have?

11 of 40

American’s with Disabilities Act

�(ADA)��

“a place of public accommodation.”

Courts differ in interpretation, but sales and commercial establishments are explicitly listed.

ADA
Section 508

Web Content Accessibility Guidelines (WCAG) 2.0

Courts have essentially taken three positions when approached with this issue. Some courts take the position that the ADA applies to all commercial sites because the law was meant to protect disabled individuals from having a more difficult time than able-bodied individuals from doing business. That is why the website Scribd was unable to get a case summarily dismissed and ended up settling.��The second approach holds that if website has a “nexus” or connection to a physical location (such as a store website), then the ADA applies. Facebook escaped liability in a 2011 California case on these grounds. Target and Home Depot did not.��The third approach simply holds that the ADA only applies to physical places.

---

For federal institutions, Section 508 makes it very clear that all federal-related websites must be accessible to all individuals, with and without disabilities.

12 of 40

DOJ has placed web accessibility, medical equipment, and furniture rulemakings under Title II and III of the ADA on Inactive List. - July 2017

13 of 40

How can I build for impaired users?

14 of 40

Quick Look Best Practices*

*Not all, but some good ones.

15 of 40

Contrast between text and its background color.

16 of 40

Don't indicate important information using color alone

17 of 40

Pair color values to increase contrast

18 of 40

Accessible forms with labels and errors

19 of 40

Be careful overlaying text on images

20 of 40

Accessibility for developers

21 of 40

Use semantic HTML�

HTML is accessible by design.

Limit div soup, strip unnecessary HTML elements

Use header nav section article aside when appropriate

Use headings h1 - h6 for content structure

22 of 40

HTML Landmarks�

These landmarks help define specific areas that a user might want to seek out and can save them a lot of time.

<header> for role="banner"

<main> for role="main"

<nav> for role="navigation"

<footer> for role="contentinfo"

<aside> for role="complementary"

23 of 40

Don’t forget the language attributes

24 of 40

Don’t remove focus state styles

NEVER remove focus states from elements

*:focus {� outline: none; //BAD BAD BAD BAD�}

25 of 40

DON’T disable Links

Just don’t do it. A disabled link is not a link, it's just text.

If you MUST, remove the href entirely

26 of 40

Buttons vs Links

Linking to something outside the page? Use an anchor tag.

<a href=”http://www.google.com”>Link to a great website</a>�

Performing an action on the page? Use a button.

<button type=”button”>Submit the thing</button>�

Space selects links, Enter submits buttons.

27 of 40

Make links descriptive�

Assistive technology often finds links on a page and will present them in various forms, instead of using a generic “click here” try to use something more descriptive like a “click here to read more about [Company] Media”

This is also helpful for SEO!

28 of 40

Write good alt text for your images

If the image is only for visual purposes and should be ignored by screen readers, use the aria-hidden attribute AND presentation role

29 of 40

Support keyboard navigation�

Users should be able to tab through the entire page

Avoid allow “keyboard traps”

This happens a lot with modals — make sure there is always a way to exit via keyboard navigation

30 of 40

Caption Rich-Media

Add captions and subtitles to rich-media elements like gifs, videos, and SVGs.

This helps SEO too!

31 of 40

Wow, this sounds like a lot.�How do I test it?�

32 of 40

General Testing

Navigate the page with your keyboard

Make a11y part of QA.

Add accessibility to your project checklist just as you would any other function or feature.

Test early and often

33 of 40

Tota11y bookmarklet

http://khan.github.io/tota11y/

Simple bookmarklet that you can use to run through pages as you build them. It gives you suggestions on how to fix a11y issues.

34 of 40

ChromeVOX - Screen Reader Emulator

ChromeVOX

Browser only screen reader extension for Chrome

35 of 40

NPM a11y

https://www.npmjs.com/package/a11y

Easy accessibility audits powered by the Chrome Accessibility Tools

36 of 40

Color Contrast Analyzer / Color Oracle

Checks for color contrast

Can use while you are designing in Photoshop, Illustrator, Sketch, whatever

37 of 40

Accessibility is everyone’s responsibility�

38 of 40

More Tools!

ChromeVOX
ChromeLens // Color Blindness Tests
Landmark Viewer
WCAG Tools
Contrast Checkers�

39 of 40

40 of 40

Thank You!

Lyle Reed

@lanreed

Slides:

lylereed.com/node17