Global Accessibility Awareness Day Improve accessibility of pages and widgets

Global Accessibility Awareness Day
Improve accessibility of pages and widgets
by Simone Mignami

Transcript

1. Accessibility Best practices WAI-ARIA Conclusion Global Accessibility Awareness Day Improve accessibility of pages and widgets Simone Mignami (simone.mignami@bluewin.ch) 18 May 2016
2. Accessibility Best practices WAI-ARIA Conclusion Table of contents 1 Accessibility 2 Best practices 3 WAI-ARIA 4 Conclusion
3. Accessibility Best practices WAI-ARIA Conclusion Section 1 Accessibility
4. Accessibility Best practices WAI-ARIA Conclusion Why accessibility? Accessibility = SEO (Search Engine Optimization) Indirect relationship, but strong Information access Non-visual users such as spiders and screen readers
5. Accessibility Best practices WAI-ARIA Conclusion Accessibility costs How much does it cost the accessibility? No libraries No third party code Just HTML5 and some best practices ...in case of custom-made widgets, also WAI-ARIA.
6. Accessibility Best practices WAI-ARIA Conclusion NVDA Assistive technology for blind and visual impaired people Microsoft platforms Free and Open-source Constantly updated We can use it to test our pages!
7. Accessibility Best practices WAI-ARIA Conclusion Interaction NVDA is inserted between the user and the machine. To interact you need keyboard combination with the NVDA-key: Caps lock or Insert To trigger the key functionality press it twice
8. Accessibility Best practices WAI-ARIA Conclusion Basic hotkeys Below are listed some useful keyboard combination NVDA+N Open NVDA’s menu NVDA+Q Quit (very important!) NVDA+S Switch speech mode, to silence it NVDA+Space in browser, toggle Explore/Input mode NVDA+F7 Open page navigation panel
9. Accessibility Best practices WAI-ARIA Conclusion Focus highlight Optionally install the Focus highlight addon it makes the focus more visible.
10. Accessibility Best practices WAI-ARIA Conclusion Behavior inside pages NVDA has 2 way to interact with a web page: Input mode User can write and use letters key to interact with the page Explore Letters key are mapped to navigate the page, for example: k next link h next header g next image l next list Tip: use Shift+letter to jump to the corresponding previous element
11. Accessibility Best practices WAI-ARIA Conclusion Section 2 Best practices
12. Accessibility Best practices WAI-ARIA Conclusion In general Some tips to improve accessibility on our webpages: Panacea does not exists!
13. Accessibility Best practices WAI-ARIA Conclusion In general Some tips to improve accessibility on our webpages: Panacea does not exists! Do not impose a solution, let the user choose
14. Accessibility Best practices WAI-ARIA Conclusion In general Some tips to improve accessibility on our webpages: Panacea does not exists! Do not impose a solution, let the user choose Keep zoomed text inside the page
15. Accessibility Best practices WAI-ARIA Conclusion In general Some tips to improve accessibility on our webpages: Panacea does not exists! Do not impose a solution, let the user choose Keep zoomed text inside the page Use unique page title
16. Accessibility Best practices WAI-ARIA Conclusion In general Some tips to improve accessibility on our webpages: Panacea does not exists! Do not impose a solution, let the user choose Keep zoomed text inside the page Use unique page title Avoid audio advertising
17. Accessibility Best practices WAI-ARIA Conclusion Images Images with many information should have a long description. The resource is loaded separately, if required. Long description <img src=” . . . ” a l t=” . . . ” longdesc=” longdesc . t x t ”/>
18. Accessibility Best practices WAI-ARIA Conclusion Header Page content partitioning. Just one H1 per page, with unique text Headers should have a unique text Correctly nested
19. Accessibility Best practices WAI-ARIA Conclusion Link A link should describe in few words its destination: Good link <a href=”#”>Download the program</a> Well...what about Pagination?
20. Accessibility Best practices WAI-ARIA Conclusion Landmark Separate page content with HTML5’s containers. Example <nav> . . .</nav> <main> <a s i d e> . . .</ a s i d e> <a r t i c l e> . . .</ a r t i c l e> </main> The link skip to content is no longer required.
21. Accessibility Best practices WAI-ARIA Conclusion Section 3 WAI-ARIA
22. Accessibility Best practices WAI-ARIA Conclusion The problem Dynamic pages have the following problems: Widget built with ’anonymous’ components Screen readers cannot track DOM manipulations
23. Accessibility Best practices WAI-ARIA Conclusion Some ARIA principle ARIA is integrated with HTML5: 3 attributes types: roles, states and properties Semantic description of ’anonymous’ components No page visual modifications Validable by W3C official Validator
24. Accessibility Best practices WAI-ARIA Conclusion Roles Describe a component, can be classified as: Widget interactive components Structural page organization, not interactive Landmark easier page navigation Warning Do not change role value at ’runtime’ Delete element and its children, and create a new one
25. Accessibility Best practices WAI-ARIA Conclusion Focus and navigation Manually handling focus can be painful, be careful! Usually navigation order is infered from DOM Synchronize focus and visual navigation with CSS (you may use different classes and switch them with Javascript) Emulate normal GUI navigation on your widgets Support Power User approach Auto-focus Be careful when setting the page focus: screen readers may read just the element and not the page!
26. Accessibility Best practices WAI-ARIA Conclusion Implementation workflow To implement your own widget accessibility: 1 Build your widget
27. Accessibility Best practices WAI-ARIA Conclusion Implementation workflow To implement your own widget accessibility: 1 Build your widget 2 Test it!
28. Accessibility Best practices WAI-ARIA Conclusion Implementation workflow To implement your own widget accessibility: 1 Build your widget 2 Test it! 3 Pick up the most suitable role and apply it
29. Accessibility Best practices WAI-ARIA Conclusion Implementation workflow To implement your own widget accessibility: 1 Build your widget 2 Test it! 3 Pick up the most suitable role and apply it 4 Test it!
30. Accessibility Best practices WAI-ARIA Conclusion Implementation workflow To implement your own widget accessibility: 1 Build your widget 2 Test it! 3 Pick up the most suitable role and apply it 4 Test it! 5 Look for its states and properties
31. Accessibility Best practices WAI-ARIA Conclusion Implementation workflow To implement your own widget accessibility: 1 Build your widget 2 Test it! 3 Pick up the most suitable role and apply it 4 Test it! 5 Look for its states and properties 6 Apply them once at a time
32. Accessibility Best practices WAI-ARIA Conclusion Implementation workflow To implement your own widget accessibility: 1 Build your widget 2 Test it! 3 Pick up the most suitable role and apply it 4 Test it! 5 Look for its states and properties 6 Apply them once at a time 7 Test it!
33. Accessibility Best practices WAI-ARIA Conclusion Section 4 Conclusion
34. Accessibility Best practices WAI-ARIA Conclusion Conclusion Just remember Accessibility = SEO Do not impose a solution Test it!
35. Accessibility Best practices WAI-ARIA Conclusion References ARIA roles https://www.w3.org/TR/wai-aria/roles NVDA official website http://www.nvaccess.org/ Focus highlight (NVDA addon) http://addons.nvda-project.org/addons/ focusHighlight.en.html WAI-ARIA practical examples http://heydonworks.com/practical_aria_examples/ Dropdown menu source http: //www.w3schools.com/howto/howto_js_dropdown.asp