web accessibility testing for the rest of us

59
a11y Testing for the Rest of Us Knowbility AccessU 2014 Denis Boudreau Deque Systems, Inc. @dboudreau

Upload: denis-boudreau

Post on 23-Aug-2014

713 views

Category:

Internet


0 download

DESCRIPTION

Accessibility testing can be a daunting task, especially when one does not know where to start. With so many things to take into consideration and so many tools to choose from, the least we can say is that it’s very easy to feel lost! This class is intended for anyone who doesn't consider himself or herself to be an accessibility expert, yet sometimes needs to assess accessibility in his or her daily job. If this is your case, if you sometimes feel helpless about web accessibility and only wish you knew where to start and what to do, look no further - this class is for you! In this hands-on lab, we will be going over a series of techniques for testing the accessibility fundamentals of HTML and PDF content. No technical skills are required, beyond basic WCAG 2.0 knowledge. This is not one of those classes where you will listen to the trainer for hours on end: this is a class where you will actively take part in the testing, and learn plenty as you go! Join us if you’re willing to master 15-20 techniques to evaluate the accessibility of HTML and PDF documents, using a variety of free tools, including browser toolbars, automated tools and screen readers.

TRANSCRIPT

Page 1: Web Accessibility Testing for the Rest of Us

a11y Testing for the Rest of Us

Knowbility AccessU 2014 Denis Boudreau

Deque Systems, Inc. @dboudreau

Page 2: Web Accessibility Testing for the Rest of Us

Content Overview

Fundamental Testing Concepts

Testing for HTML Accessibility

Testing for PDF Accessibility

Wrapping Up and Questions

1

2

3

4

Page 3: Web Accessibility Testing for the Rest of Us

there’s only so much time! 1*

Page 4: Web Accessibility Testing for the Rest of Us

Download the Files http://denisboudreau.org/presentations/2014/accessU/testing-materials.zip

Page 5: Web Accessibility Testing for the Rest of Us

Anything specific YOU would like to hear about?

Page 6: Web Accessibility Testing for the Rest of Us

Fundamental Testing Concepts

Page 7: Web Accessibility Testing for the Rest of Us

a11y testing 30% caveat 2*

Page 8: Web Accessibility Testing for the Rest of Us

3-Step Testing Process

1

Screen Reader

Page 9: Web Accessibility Testing for the Rest of Us

3-Step Testing Process

1 2

Screen Reader Automated

Page 10: Web Accessibility Testing for the Rest of Us

3-Step Testing Process

Screen Reader Automated Manual

1 2 3

Page 11: Web Accessibility Testing for the Rest of Us

Pro Tip Involve end users with various disabilities

Page 12: Web Accessibility Testing for the Rest of Us

a11yTips – an ever growing resource

Page 14: Web Accessibility Testing for the Rest of Us

Learning to Use the Tools

Page 15: Web Accessibility Testing for the Rest of Us

Using NVDA – The Basics

References http://bit.ly/1fDhahU http://bit.ly/1nOBkrH

Page 16: Web Accessibility Testing for the Rest of Us

Let’s try it out, shall we?

Page 17: Web Accessibility Testing for the Rest of Us

Sinking out teeth into NVDA

Page 18: Web Accessibility Testing for the Rest of Us

Testing for HTML Accessibility

Page 20: Web Accessibility Testing for the Rest of Us

Putting It Into Action

Page 21: Web Accessibility Testing for the Rest of Us

Loading Up FireEyes

Page 22: Web Accessibility Testing for the Rest of Us

Today’s HTML checkpoints

1. Default Language

2. Page Titles

3. Headings

4. Reading Order

5. Keyboard Navigation

6. Focus Order

7. Focus Indication

8. Bypass Blocks

9. Informative Images

10. Decorative Images

11. Link Purpose

12. Text Resize

13. Link Color Contrasts

14. Text Color Contrasts

15. Data Tables

Page 23: Web Accessibility Testing for the Rest of Us

Testing for Default Language

WCAG SC Checkpoints Requirements Testing Tools

3.1.1 (A) Default Language

The language of the page is identified using the HTML lang attribute.

• FireEyes • FireBug

a11yTip #1 Identify the default language of the content http://bit.ly/1lKWPaG

Page 24: Web Accessibility Testing for the Rest of Us

Testing for Page Titles

WCAG SC Checkpoints Requirements Testing Tools

2.4.2 (A) Page Titles Pages have descriptive, informative and unique page titles.

• FireEyes • Web Developer

a11yTip #2 Provide descriptive titles for web pages http://bit.ly/1lKYkFE

Page 25: Web Accessibility Testing for the Rest of Us

Testing for Headings

WCAG SC Checkpoints Requirements Testing Tools

1.3.1 (A) Headings Hierarchically structure content using heading elements.

• FireEyes • Web Developer

a11yTip #3 Organize content using hierarchically nested headings http://bit.ly/1ia4Gc6

Page 26: Web Accessibility Testing for the Rest of Us

Testing for Reading Order

WCAG SC Checkpoints Requirements Testing Tools

1.3.2 (A) Reading Order

The reading and navigation order (determined by code order) is logical and intuitive.

• NVDA

a11yTip #4 Organize content in a sequential reading order that remains logical http://bit.ly/1rPdEkF

Page 27: Web Accessibility Testing for the Rest of Us

Testing for Keyboard Navigation

WCAG SC Checkpoints Requirements Testing Tools

2.1.1 (A) Keyboard Navigation

Page functionalities are available using the keyboard, unless the functionality cannot be accomplished in any known way using a keyboard.

• Tabulation Key

a11yTip #5 Ensure pages can be fully controlled without a mouse http://bit.ly/Sknpgr

Page 28: Web Accessibility Testing for the Rest of Us

Testing for Focus Order

WCAG SC Checkpoints Requirements Testing Tools

2.4.3 (A) Focus Order The navigation order of links, form elements, etc. is logical and intuitive.

• FireEyes • Tabulation Key

a11yTip #6 Create a logical tabbing order through links, form controls and objects http://bit.ly/1jqqDbP

Page 29: Web Accessibility Testing for the Rest of Us

Testing for Focus Indication

WCAG SC Checkpoints Requirements Testing Tools

2.4.7 (AA) Focus Indication

It is visually apparent which page element has the current keyboard focus.

• Tabulation Key

a11yTip #7 Visually highlight interface components when they receive focus http://bit.ly/1rPecqH

Page 30: Web Accessibility Testing for the Rest of Us

Testing for Bypass Blocks

WCAG SC Checkpoints Requirements Testing Tools

2.4.1 (A) Bypass Blocks

A method (heading structure, aria landmarks and/or skip links) is provided to skip navigation and other page elements that are repeated across pages.

• FireEyes • NVDA

a11yTip #8 Provide a mechanism to skip content repeated across pages http://bit.ly/1fGcXKr

Page 31: Web Accessibility Testing for the Rest of Us

Testing for Informative Images

WCAG SC Checkpoints Requirements Testing Tools

1.1.1 (A) Active and Informative Images

Static and linked images that convey information have descriptive alternative text that serves the same purpose and presents the same information as the image.

• FireEyes • Web Developer

a11yTip #9 Provide alt attributes for active images http://bit.ly/1q0OVOJ

Page 32: Web Accessibility Testing for the Rest of Us

Testing for Decorative Images

WCAG SC Checkpoints Requirements Testing Tools

1.1.1 (A) Decorative Images

Images that do not convey content, are decorative, or with content that is already conveyed in text are given null alternative text (alt="") or implemented as CSS backgrounds.

• FireEyes • Web Developer

a11yTip #10 Make decorative images invisible to assistive technologies http://bit.ly/1fGdj3A

Page 33: Web Accessibility Testing for the Rest of Us

Testing for Link Purpose

WCAG SC Checkpoints Requirements Testing Tools

2.4.4 (A) Link Purpose

The purpose of each link, form image button or image map hotspot can be determined from the link text alone, or from the link text and the context.

• FireEyes • Web Developer

a11yTip #11 Provide links that meaningfully describe their purpose http://bit.ly/1mJNDCm

Page 34: Web Accessibility Testing for the Rest of Us

Testing for Text Resize

WCAG SC Checkpoints Requirements Testing Tools

1.4.4 (A) Text Resize (200%)

The page is readable and functional when browser zoom is set to 200% of its initial size.

• NoSquint • Web Developer

a11yTip #12 Ensure content remains readable and legible when resized to 200% http://bit.ly/1kwnJPm

Page 35: Web Accessibility Testing for the Rest of Us

Testing for Link Color Contrasts

WCAG SC Checkpoints Requirements Testing Tools

1.4.1 (A) Link Color Contrasts

Color alone is not used to distinguish links from surrounding text unless the color contrast between the link and the surrounding text is at least 3:1 and an additional differentiation is provided on hover or focus.

• FireEyes • Color Contrast

a11yTip #13 Make links easier to distinguish when color alone identifies them http://bit.ly/1iQ6dUI

Page 36: Web Accessibility Testing for the Rest of Us

Testing for Text Color Contrasts

WCAG SC Checkpoints Requirements Testing Tools

1.4.3 (AA) Text Color Contrasts

Text and images of text have a contrast ratio of at least 4.5 to 1 with the background (for text and images of large text over 18 point or 14 point bold, the ratio must be at least 3 to 1).

• FireEyes • Color Contrast

a11yTip #14 Provide sufficient contrasts for regular sized text http://bit.ly/1q0RMam

Page 37: Web Accessibility Testing for the Rest of Us

Testing for Data Tables

WCAG SC Checkpoints Requirements Testing Tools

1.3.1 (A) Data Tables Data cells are explicitly associated with header cells for data tables, and descriptive table captions and summaries are provided where appropriate.

• FireEyes • Web Developer

a11yTip #15 Structure tabular information using table markup http://bit.ly/1kvnzYG

Page 38: Web Accessibility Testing for the Rest of Us

Testing for PDF Accessibility

Page 39: Web Accessibility Testing for the Rest of Us

Using Acrobat Pro – The Basics

References http://adobe.ly/1fyTZFz http://adobe.ly/1hZ010Z

Page 40: Web Accessibility Testing for the Rest of Us

Putting It Into Action

Page 41: Web Accessibility Testing for the Rest of Us

Using the PDF Accessibility Checker

Page 42: Web Accessibility Testing for the Rest of Us

Looking Into the Accessibility Report

Page 43: Web Accessibility Testing for the Rest of Us

Today’s PDF checkpoints

1. Document Language

2. Document Title

3. Headings

4. Reading Order

5. Content Reflow

6. Focus Order

7. Informative Images

8. Decorative Images

9. Link Purpose

10. Link Color Contrast

11. Text Color Contrast

12. Data Tables

Page 44: Web Accessibility Testing for the Rest of Us

Testing for Document Language

WCAG SC Checkpoints Requirements Testing Tools

3.1.1 (A) Document Language

The document contains a meaningful and descriptive title (not just the file name).

• Acrobat Pro • NVDA

a11yTip #1 Specify the default language of PDF documents http://bit.ly/1ogdC52

Page 45: Web Accessibility Testing for the Rest of Us

Testing for Document Title

WCAG SC Checkpoints Requirements Testing Tools

2.4.2 (A) Document Title

The natural language of the document is specified.

• Acrobat Pro • NVDA

a11yTip #2 Specify descriptive and meaningful titles for PDF documents http://bit.ly/Q3WLWW

Page 46: Web Accessibility Testing for the Rest of Us

Testing for Headings

WCAG SC Checkpoints Requirements Testing Tools

1.3.1 (A) Headings The content of the document is structured consistently using headings.

• Acrobat Pro • NVDA

a11yTip #3 Mark up headings in PDF documents using heading elements http://bit.ly/Rl0hxa

Page 47: Web Accessibility Testing for the Rest of Us

Testing for Reading Order

WCAG SC Checkpoints Requirements Testing Tools

1.3.2 (A) Reading Order

The document can be navigated in a logical order that is consistent with the meaning of the content.

• NVDA

a11yTip #4 Ensure the default reading order in PDF document makes sense http://bit.ly/1oleGoo

Page 48: Web Accessibility Testing for the Rest of Us

Testing for Content Reflow

WCAG SC Checkpoints Requirements Testing Tools

1.4.4 (AA)

Content Reflow

When Reflow mode is activated, all the content is reorganized naturally in a single, easy to read column.

• Acrobat Pro

a11yTip #5 Ensure the reading order of a PDF makes sense when reflowed http://bit.ly/1ikVqXa

Page 49: Web Accessibility Testing for the Rest of Us

Testing for Focus Order

WCAG SC Checkpoints Requirements Testing Tools

2.4.3 (A) Focus Order The navigation order of links, form elements, etc. is logical and intuitive.

• Tabulation Key

a11yTip #6 Create a tabbing order for PDF content that is logical and intuitive http://bit.ly/1o8HcMu

Page 50: Web Accessibility Testing for the Rest of Us

Testing for Informative Images

WCAG SC Checkpoints Requirements Testing Tools

1.1.1 (A) Active and Informative Images

The text alternative provided for every informative image conveys the same meaning or purpose as the image.

• Acrobat Pro • NVDA

a11yTip #7 Provide meaningful text alternatives for images in PDF documents http://bit.ly/1iue3bg

Page 51: Web Accessibility Testing for the Rest of Us

Testing for Decorative Images

WCAG SC Checkpoints Requirements Testing Tools

1.1.1 (A) Decorative Images

Purely decorative images are marked up as artifacts, so assistive technologies can ignore them.

• Acrobat Pro • NVDA

a11yTip #8 Provide meaningful text alternatives for images in PDF documents http://bit.ly/1ovRTX1

Page 52: Web Accessibility Testing for the Rest of Us

Testing for Link Purpose

WCAG SC Checkpoints Requirements Testing Tools

2.4.4 (A) Link Purpose

Link have a descriptive text label, so users of assistive technology understand their purpose within context.

• NVDA • Tabulation Key

a11yTip #9 Provide replacement text for PDF links that are not meaningful http://bit.ly/1l02siv

Page 53: Web Accessibility Testing for the Rest of Us

Testing for Link Color Contrasts

WCAG SC Checkpoints Requirements Testing Tools

1.4.1 (A) Link Color Contrasts

Color alone is not used to distinguish links from surrounding text unless the color contrast between the link and the surrounding text is at least 3:1 and an additional differentiation is provided on hover or focus.

• Color Contrast Analyzer

a11yTip #10 Make links easier to distinguish when color alone identifies them http://bit.ly/1iQ6dUI

Page 54: Web Accessibility Testing for the Rest of Us

Testing for Text Color Contrasts

WCAG SC Checkpoints Requirements Testing Tools

1.4.3 (AA) Text Color Contrasts

Text and images of text have a contrast ratio of at least 4.5 to 1 with the background. Large text and images of large text (over 18 point or 14 point bold) have a contrast ratio of at least 3 to 1 with the background.

• Color Contrast Analyzer

a11yTip #11 Provide sufficient contrasts for regular sized text http://bit.ly/1q0RMam

Page 55: Web Accessibility Testing for the Rest of Us

Testing for Data Tables

WCAG SC Checkpoints Requirements Testing Tools

1.3.1 (A) Data Tables The document contains tables that are marked up properly (header cells vs. data cells).

• Acrobat Pro • NVDA

a11yTip #12 Use table markup to structure tabular data in PDF documents http://bit.ly/1uRX2Nl

Page 56: Web Accessibility Testing for the Rest of Us

Wrapping Up and Questions

Page 57: Web Accessibility Testing for the Rest of Us

Q&A

Page 58: Web Accessibility Testing for the Rest of Us

Merci Beaucoup!

Denis Boudreau Deque Systems, Inc. [email protected] @dboudreau

Page 59: Web Accessibility Testing for the Rest of Us

Photo Credits All rights belong to their respective owners.

• http://cdn2.getoutofdebt.org/wp-content/uploads/2013/02/audit.jpg • http://go-onward.com/wp-content/uploads/Inspection-Clipboard.jpg • http://www.bodybiz.nl/wp-content/uploads/2013/06/5redenenen.jpg • http://farm8.staticflickr.com/7063/6896013401_b402f7a0ec_o.jpg • http://www.fivestarbootcamps.com/wp-content/uploads/2013/12/thank_you.jpg • http://www.clipartbest.com/cliparts/yio/bp9/yiobp9BiE.png • http://hemlocktime.files.wordpress.com/2014/03/4084963522_f50fc5ed37_b.jpg • http://3.bp.blogspot.com/-DIcXdS__8RM/U0J3D-oKTgI/AAAAAAAABEE/k8gI_rimyZ8/s1600/questions.jpg • http://d187.org/wp-content/uploads/2013/11/QA.jpg • http://www.e-lgs.sthk.nhs.uk/PublishingImages/Pages/Case-Studies-and-News/dreamstime_m_20189222.jpg