Beyond the Checklists - Demystifying Accessibility Testing and Implementation - Radina Matic - tcworld2015
0 likes430 views
This document provides an overview of accessibility testing and implementation. It discusses guidelines like WCAG, principles like POUR, and tools for evaluating different aspects of accessibility like document structure, images, color contrast, tables, links and forms, multimedia, and PDFs. Responsibility for accessibility is a shared effort between developers, content authors and users. Testing and development should focus on principles of perceivability, operability, understandability and robustness.
Beyond the Checklists - Demystifying Accessibility Testing and Implementation - Radina Matic - tcworld2015
- 1. BeyondtheChecklists Demystifying Accessibility Testing and Implementation Radina Matic radina.matic@ub.edu @RadinaMatic
- 2. RadinaMatic - translator & technical writer - open software & technology enthusiast Web and Data Visualization at Rectory Stats Office, University of Barcelona a11y Foundation for Learning Equality radina.matic@ub.edu @RadinaMatic
- 3. What’stheStory http://radinamatic.github.io/tcworld2015/ Download packaged XPI file with Firefox add-ons OR Install add-ons directly from Mozilla website and Chrome Store with provided links
- 4. WWW
- 5. Guidelines - Web Content (WCAG) - User Agent (UAAG) - Authoring Tools (ATAG) - WAI ARIA: Accessible Rich Interactive Applications
- 9. GeneralA11yTools WAVE Web Accessibility Evaluation Tool http://wave.webaim.org/ (Firefox toolbar & Chrome extension) OpenAjax Alliance (OAA) Accessibility Extension https://addons.mozilla.org/EN-US/firefox/addon/openajax-accessibility-exte/ AInspector Sidebar - https://addons.mozilla.org/en-US/firefox/addon/ainspector-sidebar/ Accessibility Evaluation Toolbar https://addons.mozilla.org/en-US/firefox/addon/accessibility-evaluation-toolb/ Automated A11y testing pa11y - https://github.com/nature/pa11y quails - http://quailjs.org/ Tanaguru - https://github.com/Tanaguru/Tanaguru TENON - http://tenon.io
- 10. DocumentStructure - Page language - Title (unique and descriptive; H1) - Page landmarks (semantic HTML5 or ARIA)
- 11. Headings
- 12. DocumentStructure-Tools Juicy Studio Accessibility Toolbar https://addons.mozilla.org/en-uS/firefox/addon/juicy-studio-accessibility-too/ Jim Thatcher’s Favelets http://jimthatcher.com/favelets/ NCAM Accessibility QA Favelet http://ncam.wgbh.org/invent_build/web_multimedia/tools-guidelines/favelet Visual ARIA Bookmarklet http://whatsock.com/training/matrices/visual-aria.htm tota11y - an accessibility visualization toolkit - http://khan.github.io/tota11y/
- 13. Keyboardnavigation - Tab & Shift Tab through all the links - Arrow keys through menus - Skip-to links on top (first element after <body>) - Accesskeys (debatable – better avoid) Define visible focus state! :focus{ outline: 0; }
- 14. Images–The elusiveALTattribute - alt = “?????” - DESCRIBE the image convey both content and functionality - Do not put text inside images (localization) - Decorative images – empty alt=“”
- 15. http://webaim.org/articles/gonewild/#alttext http://accessibility.psu.edu/images/ http://ncam.wgbh.org/experience_learn/educational_media/describing- images-for-enhanced http://diagramcenter.org/webinars.html (resources for accessible images & math) Describingimages-Tools
- 16. Color &Contrast foreground vs. background 3:1 for large text 4.5:1 for smaller text
- 17. Color &Contrast
- 18. Color &Contrast
- 19. Color&Contrast-Tools Contrast Analyzer - http://www.paciellogroup.com/resources/contrastanalyser/ Accessibility Color Wheel - http://gmazzocato.altervista.org/colorwheel/wheel.php CONTRAST-A-WEB - http://dasplankton.de/ContrastA/ Color Safe - http://colorsafe.co/ WCAG Contrast checker https://addons.mozilla.org/ca/firefox/addon/wcag-contrast-checker/ Color Palette Accessibility Evaluator - http://accessibility.oit.ncsu.edu/tools/color-contrast/ Color Extractor Bookmarklet - http://accessibility.oit.ncsu.edu/tools/color-extractor/ & http://accessibility.oit.ncsu.edu/tools/color-contrast-chrome/ Color Contrast Visualizer http://www.stainlessvision.com/blog/projects/colour-contrast-visualiser
- 20. Tablesarefordata! - headings - captions - summary
- 21. LinksandForms Links - Concise - Descriptive - Correctly positioned Click More Here Forms - Labels - Fieldsets for grouping - Tabbing order - Instructions for required fields - Errors Avoid CAPTCHAs!
- 22. Writing - Plain language - Sentences up to 25 words - Paragraphs up to 3-4 sentences - Active voice - Consistent vocabulary - Bulleted lists - Consistent format & navigation
- 23. Font for Dyslexia - columns of up to nine words - text into paragraphs - adequate line spacing - space between content blocks Always align the text to the left! http://www.dailymail.co.uk/sciencetech/article-3112756/Take-reading-test-shows-s-like-dyslexic-Font-recreate-frustration-felt-condition.html
- 24. Multimedia
- 25. AccessibleMultimedia - Test transcript for audio only - Text description for video with no audio - Closed captions & interactive transcript & audio description for video with audio
- 27. ContentManagementSystems Drupal Accessibility modules https://www.drupal.org/project/accessibility - Drupal.Announce - Drupal.TabbingManager WordPress - Accessibility-Ready Themes
- 28. PDF(&OfficeDocs)
- 29. AccessiblePDF …go to the source! - Tagged-PDF (ISO 32000-1, 14.8) - PDF/UA (Universal Access) - ISO standard 14289 - creating from Office: Save/Export as”, do NOT “Print as PDF”
- 30. AccessiblePDF-Tools - Acrobat Pro Accessibility checkers - PDF Accessibility Checker (PAC 2.0) - AccessODF - accessibility checker for Libre Office Writer
- 31. Thank you! Questions? Your opinion is important! http://UA10.honestly.de or scan the QR code Special thanks to Digital Content Management - Graduate Dept. and Prof. Mireia Ribera at iSchool of University of Barcelona, Spain.