Your SlideShare is downloading. ×

Web Accessibility Testing for the Rest of Us

913

Published on

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 …

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.

Published in: Internet, Technology, Design
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
913
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
25
Comments
0
Likes
6
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. a11y Testing for the Rest of Us Knowbility AccessU 2014 Denis Boudreau Deque Systems, Inc. @dboudreau
  • 2. Content Overview Fundamental Testing Concepts Testing for HTML Accessibility Testing for PDF Accessibility Wrapping Up and Questions 1 2 3 4
  • 3. there’s only so much time!1*
  • 4. Download the Files http://denisboudreau.org/presentations/2014/accessU/testing-materials.zip
  • 5. Anything specific YOU would like to hear about?
  • 6. Fundamental Testing Concepts
  • 7. a11y testing 30% caveat2*
  • 8. 3-Step Testing Process 1 Screen Reader
  • 9. 3-Step Testing Process 1 2 Screen Reader Automated
  • 10. 3-Step Testing Process Screen Reader Automated Manual 1 2 3
  • 11. Pro Tip Involve end users with various disabilities
  • 12. a11yTips – an ever growing resource
  • 13. a11yTips – an example
  • 14. Learning to Use the Tools
  • 15. Using NVDA – The Basics References  http://bit.ly/1fDhahU  http://bit.ly/1nOBkrH
  • 16. Let’s try it out, shall we?
  • 17. Sinking out teeth into NVDA
  • 18. Testing for HTML Accessibility
  • 19. Using FireEyes – The Basics References  http://bit.ly/1nY1rd5  http://bit.ly/1pICQNV
  • 20. Putting It Into Action
  • 21. Loading Up FireEyes
  • 22. 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
  • 23. 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
  • 24. 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
  • 25. 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
  • 26. 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
  • 27. 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
  • 28. 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
  • 29. 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
  • 30. 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
  • 31. 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
  • 32. 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
  • 33. 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
  • 34. 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
  • 35. 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
  • 36. 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
  • 37. 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
  • 38. Testing for PDF Accessibility
  • 39. Using Acrobat Pro – The Basics References  http://adobe.ly/1fyTZFz  http://adobe.ly/1hZ010Z
  • 40. Putting It Into Action
  • 41. Using the PDF Accessibility Checker
  • 42. Looking Into the Accessibility Report
  • 43. 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
  • 44. 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
  • 45. 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
  • 46. 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
  • 47. 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
  • 48. 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
  • 49. 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
  • 50. 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
  • 51. 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
  • 52. 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
  • 53. 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
  • 54. 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
  • 55. 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
  • 56. Wrapping Up and Questions
  • 57. Q&A
  • 58. Merci Beaucoup! Denis Boudreau Deque Systems, Inc. db@deque.com @dboudreau
  • 59. 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

×