Finding Accessibility

Finding Accessibility

Joe Dolson, October 22, 2017

http://josephdolson.com/naadac/

Five Issues

1. Color Contrast
2. Keyboard Navigation
3. Form Requirements
4. Text Resizing
5. Image Alternatives

Color Contrast

Color Contrast

• NoCoffee: http://bit.ly/no-coffee
• WAVE Toolbar: http://wave.webaim.org

Install or open Chrome. Add NoCoffee.

In either Firefox or Chrome, install and add the WAVE Toolbar

Keyboard Navigation

Keyboard Navigation

• Focus Bookmarklet: http://bit.ly/outline-all

In your browser of choice, follow the link. Drag the button into your browser's bookmarks bar.

Form Labeling

Form Labeling

• Forms Bookmarklet: http://bit.ly/a11y-bookmarklet

In your browser of choice, follow the link. Drag the button labeled "Forms" into your browser's bookmarks bar.

Text resizing

Text Resizing

1. Text Zoom
2. Page Zoom

In all modern browsers, Page Zoom is the default behavior, activated using Ctrl and + to enlarge, Ctrl and - to reduce, and Ctrl and 0 to return to default.

Image
Alternatives

Image Alternatives

• Images Bookmarklet: http://bit.ly/a11y-bookmarklet

In your browser of choice, follow the link. Drag the button labeled "Images" into your browser's bookmarks bar.

Questions?

Real Life
Examples

City of Bakersfield

bakersfieldcity.us

1. inaccessible accessibility settings
2. No text label on accessibility gear icon
3. Focus management doesn't move into accessibility features
4. How is weather part of accessibillity settings?
6. Completely inaccessible main content (Latest News, Most Popular, etc.)

Los Angeles County

lacounty.gov

1. keyboard accessibility problems
2. intermittent focus visibility
3. all caps
4. forms
5. Contrast issues

University of Connecticut

uconn.edu

1. keyboard accessibility
2. video welcome
3. forms
4. image used for search