Test Your Fancy-Pants Website for Accessibility

Test Your Fancy-Pants Website

for AccessibilityPresented by Amber Himes Matz

#devsigner @amberhimesmatz

A quick word about testing…

The Basics

The Low-Hanging Fruit• A Title for Every Page

• Alternative text for every meaningful image

• Headings. In order. (Don’t skip)

• Sufficient color contrast ratio. So we can read it.

• Resize the text. It’s fun for all ages.

• Navigate with keyboard

Forms…Check!• Label your form elements <label for=“search”>Search</label> <input type=“text” name=“search” />

• Navigate and submit the form with keyboard only

• Indicate required fields with more than color

• Indicate errors in fields with more than color

• Position elements correctly for your language

Audio/Video• Keyboard access

• Turn off auto-start

• Provide Control: Pause, Stop, Volume, Mute

• Sync’d captions

• Best practice: provide a written transcript

• Describe it

Sensible Structure

• Linearize the page. Does it make sense?

• Turn off all styles. Does it make sense?

• Turn off all images. Does it make sense?

• Are there clear headings for each section?

• No need to linearize tables, just mark them up properly.

Preliminary Checks

www.w3.org/WAI/eval/preliminary.html

The Four Categories of Accessibility

Not just one. Four.

Visual

• Non-sighted

• Low-vision

• Obstructed vision

• Anyone over 40

Auditory

• Yes, the web is a visual medium, but…

• Ever forgot your headphones in a public setting?

• Captions, transcripts are helpful

Motor

• Wide range of motor impairments

• May be using assistive technology like:

• Specialized keyboards

• Eye trackers

• A Single Button

Cognitive• Easing the processing of information

• Clear and concise language — good for everyone!

• Associated conditions:

• Down’s syndrome

• Autism

• Developmental delay

• Dyslexia

Temporary Disabilities

• Injury

• Situational — hands-free, voice activation, glare on screen

Testing

Real-World Testing

• Keyboard navigation only

• VoiceOver (OS X)

• NVDA (Windows)

• Zoom-in text

• Accessibility Preferences

Auditors

• WAVE — http://wave.webaim.org/

• quail — http://quailjs.org/

• tenon — http://tenon.io/

• HTML Validator — https://validator.w3.org/nu/

Automated Testing

• axe-core — https://github.com/dequelabs/axe-core

Helpers/Tools

• tota11yhttp://khan.github.io/tota11y/

• Contrast Ratiohttp://leaverou.github.io/contrast-ratio/

Simulators/Emulators

• Color Oracle — http://colororacle.org/

• Color Contrast Analyzer (Chrome Extension)

• High Contrast (Chrome Extension)

• WCAG Color Contrast Checker (Firefox)

Standards/Guidelines• Web Content Accessibility Guidelines (WCAG) 2.0

http://www.w3.org/TR/WCAG20/

• WAI-ARIA Accessible Rich Internet Applications Suite http://www.w3.org/WAI/intro/aria.php

• HTML Living Standard https://html.spec.whatwg.org/

• Authoring Tool Accessibility Guidelines (ATAG) 2.0 http://www.w3.org/TR/ATAG20/

FUN TIME

VoiceOver

WAVE

tota11y

Color/High Contrast Analyzer

Color Oracle

Resources

• The Accessibility Projecthttp://a11yproject.com/

• Web Accessibility Initiativehttp://www.w3.org/WAI/

• Drupalize.Me Podcast: Let’s Chat About Accessibility https://www.lullabot.com/podcasts/drupalizeme-podcast/lets-chat-about-web-accessibility

Evaluate this Session“Test Your Fancy-Pants Website for

Accessibility” (Amber Matz)

http://www.devsignercon.com/eval

All evaluations will be submitted in a drawing to win:

Drupalize.Me 1-month membership

PHPStorm License