Web Accessibility Testing for the Rest of Us

a11y Testing for the Rest of Us

Knowbility AccessU 2014 Denis Boudreau

Deque Systems, Inc. @dboudreau

Content Overview

Fundamental Testing Concepts

Testing for HTML Accessibility

Testing for PDF Accessibility

Wrapping Up and Questions

there’s only so much time! 1*

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

Anything specific YOU would like to hear about?

Fundamental Testing Concepts

a11y testing 30% caveat 2*

3-Step Testing Process

Screen Reader

Screen Reader Automated

Screen Reader Automated Manual

Pro Tip Involve end users with various disabilities

a11yTips – an ever growing resource

a11yTips – an example

Learning to Use the Tools

Using NVDA – The Basics

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

Let’s try it out, shall we?

Sinking out teeth into NVDA

Testing for HTML Accessibility

Using FireEyes – The Basics

References http://bit.ly/1nY1rd5 http://bit.ly/1pICQNV

Putting It Into Action

Loading Up FireEyes

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

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

Testing for Page Titles

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

Testing for Headings

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

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

Testing for Reading Order

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

Testing for Keyboard Navigation

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

Testing for Focus Order

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

Testing for Focus Indication

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

Testing for Bypass Blocks

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

Testing for Informative Images

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.

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

Testing for Decorative Images

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.

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

Testing for Link Purpose

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.

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

Testing for Text Resize

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

Testing for Link Color Contrasts

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

Testing for Text Color Contrasts

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

Testing for Data Tables

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.

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

Testing for PDF Accessibility

Using Acrobat Pro – The Basics

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

Putting It Into Action

Using the PDF Accessibility Checker

Looking Into the Accessibility Report

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

Testing for Document Language

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

Testing for Document Title

2.4.2 (A) Document Title

The natural language of the document is specified.

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

Testing for Headings

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

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

Testing for Reading Order

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

Testing for Content Reflow

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

Testing for Focus Order

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

Testing for Informative Images

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.

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

Testing for Decorative Images

1.1.1 (A) Decorative Images

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

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

Testing for Link Purpose

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

Testing for Link Color Contrasts

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

Testing for Text Color Contrasts

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

Testing for Data Tables

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

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

Wrapping Up and Questions

Merci Beaucoup!

Denis Boudreau Deque Systems, Inc. db@deque.com @dboudreau

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

Web Accessibility Testing for the Rest of Us

Internet

Testing collaborative accessibility-based engagement tools ...web.mit.edu/czegras/www/Navas_Testing_collaborative_accessibility_Santiago.pdfTesting collaborative accessibility-based

Hands-on accessibility...accessibility Testing methods overview Automated testing Manual testing User testing Automated testing Quick Not all errors need human eye Can review hundreds

Web Accessibility Testing for AIR

The 2020 ICT Accessibility Testing Symposium: Provisional ......Final Program Posted October 7, 2020 The 5th Annual ICT Accessibility Testing Symposium: Time for Testing in Testing

Automate REST API Testing

Website Accessibility Testing Presented By:. Agenda

Testing Compliance with Accessibility Guidelines

Performance Testing REST APIs

Accessibility User’s Guide Summative Testing

Testing for Accessibility and Usability

Accessibility Requirements These slides are at goo.gl ... · 18F Accessibility Guide WAVE (free page accessibility testing tool) SortSite Desktop (paid site testing tool, including

QA Accessibility-testing

iOS Accessibility Testing Workshop

Web and IT accessibility testing

KS Accessibility Target & Testing Responsibilities

Accessing Higher Ground: Practical Accessibility Testing

The 2020 ICT Accessibility Testing Symposium: Preliminary … · 2020. 8. 12. · Preliminary Program The 5th Annual . ICT Accessibility Testing Symposium: Time for Testing in Testing

Measuring PDF Accessibility PDF a11y Testing for the Rest of Us @dboudreau a11yCamp DC 2013 Deque Systems, Inc

Inspect What You Expect: Practical Accessibility Testingenvironmentsforhumans.com/.../presentations/Sims-Testing-a11y.pdf · Inspect What You Expect: Practical Accessibility Testing

Accessibility: automated testing of RIA (web5conf)