Upload
denis-boudreau
View
715
Download
0
Tags:
Embed Size (px)
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.
Citation preview
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
1
2
3
4
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
1
Screen Reader
3-Step Testing Process
1 2
Screen Reader Automated
3-Step Testing Process
Screen Reader Automated Manual
1 2 3
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
Wrapping Up and Questions
Q&A
Merci Beaucoup!
Denis Boudreau Deque Systems, Inc. [email protected] @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