This document discusses testing websites for accessibility features. It covers key things to watch for like images without text alternatives, elements that don't work with keyboards, and text that is too complex. It provides guidelines on document structure, links, text alternatives, color contrast, video captions, and areas to test. The document emphasizes the importance of semantic HTML, logical headings, descriptive link text, alt text for images, sufficient color contrast, and captions for videos. It recommends speaking to developers, adding accessibility testing tools, fixing major issues, making new content accessible, finding users to test pages, and posting an accessibility statement.

1. Inclusive technology
Testing websites for accessibility features
Phil Daquila
@phildaquila
July 2017

2. I ordered my Amazon Echo to add
'accessibility presentation' to my
calendar and sync it with Google
This is what
Alexa heard . . .

3. GETTING STARTED
> What it is, who it affects
> aka #a11y
> Removing barriers
> Roadmap to compliance
> Ask for volunteer

4. GETTING STARTED
Key things to watch for when auditing a11y
images without a text alternative
elements that work with a mouse but not with a keyboard
text too complex for some to understand
using bold large text to create headings
using text/background colors that do not contrast well
elements that flash or flicker

5. LEGAL PERSPECTIVE
> ADA Title III (1990), "public accomodation"
> Lawsuits on the rise
> Uncertainty in courts
> Gil v. Winn-Dixie Stores, Inc.
> WCAG success criteria widely accepted
> Better to act now than to pay later

6. GOOD NEWS
> Well-documented solutions
> WordPress building it into core https://make.wordpress.org/accessibility/
> Shoot for 'readily achievable' gains
> Many free online tools https://www.w3.org/WAI/ER/tools/
> Achieved mostly via HTML, CSS

7. GUIDELINES
> WCAG 2.0 AA from W3C https://www.w3.org/WAI/intro/wcag
1. Success Criteria: must, should, could
2. Techniques
> Solutions = automated tests + manual fixes
> AT = assistive technologies

8. AREAS FOR TESTING
1. Document structure and markup
2. Links
3. Text alternatives to non-text items
4. Color contrast
5. Video/audio captions and transcripts

9. AREAS FOR TESTING
Excluded from this talk (but equally important):
1. Forms and input labels
2. Tables
3. Landmarks
4. Content

10. DOCUMENT STRUCTURE/MARKUP
> Use proper semantic HTML
> Separate markup from styles
> Create a logical outline for each page w/headings
> Sequential headings: no <h3> before an <h2>
> CSS is dressing for sighted users

11. DOCUMENT STRUCTURE/MARKUP
<h1>Setting the Exposure Manually on a
Camera</h1>
<h2>Set the ISO</h2>
<h3>The effect of ISO on image quality</h3>
<h3>High ISO cameras</h3>
<h2>Choose an aperture</h2>
<h3>The effect of aperture on depth of
focus</h3>
<h3>Vignetting</h3>
<h2>Choose a shutter speed</h2>
<h3>Long exposures</h3>
<h1>Setting the Exposure
Manually on a Camera</h1>
<h3>Set the ISO</h3>
<h4>The effect of ISO on
image quality</h4>
<h4>High ISO cameras</h4>
<h3>Choose an aperture</h3>
<h4>The effect of aperture on
depth of focus</h4>
<h4>Vignetting</h4>

12. LINKS
> Write anchor text to describe destination
> Each link should make sense if read alone
> Avoid 'click here' or 'visit this page'

13. TEXT ALTERNATIVES
> All non-text content (photos, charts, infografx)
> Captions or alt attribute on every <img>
> Describe message, not content of graphic
> Empty alt: <img alt=""> use for decorative
> Open to interpretation; see decision trees
> longdesc for lengthy alt text in new page

14. TEXT ALTERNATIVES

15. COLOR CONTRAST
> Color should not be sole way of conveying info
> Sufficient contrast
4.5:1 for normal text
3:1 for large text
> Check combinations of two colors
> Carolina Blue #7BAFD4 is too light with white

16. COLOR CONTRAST: TOP TOOLS
1. Planning colors
a. Lea Verou’s Contrast Ratio
http://leaverou.github.io/contrast-ratio/
b. Contrast Checker by Acart
http://contrastchecker.com/
2. Evaluating colors
a. tota11y http://bit.ly/2nHIpNf
b. Google Acc. Dev Tools http://bit.ly/1ikZ68B

17. VIDEO CAPTIONS/AUDIO TRANSCRIPTS
> Check all your timed media for captions
> Is there a text transcript, especially for dialog?
> Media player a11y is maturing
> YouTube and Vimeo support captions
> Paid solutions, DIY, crowdsourced
> User can adjust controls like color/size

18. What can you do
to get started?

19. STEPS TO TAKE NOW
1. Speak to your developer
2. Add testing tools to your workflow
3. Fix any glaring problems
4. Make new content accessible from the start
5. Find real users to test your pages
6. Post and stick to your a11y statement