1 / 17

Complex UI & Access i bility

Complex UI & Access i bility. 5 tips to improve accessibility when building interactive page elements. Charlie Perrins, DARE. Tips. :hover, :focus, and :active Tabindex Capture keyboard events Consider ARIA roles Judicious use of display:none;. :hover, :focus, and :active.

tobit
Download Presentation

Complex UI & Access i bility

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Complex UI & Accessibility 5 tips to improve accessibility when building interactive page elements Charlie Perrins, DARE

  2. Tips • :hover, :focus, and :active • Tabindex • Capture keyboard events • Consider ARIA roles • Judicious use of display:none;

  3. :hover, :focus, and :active

  4. :hover, :focus, and :active

  5. tabindex

  6. tabindex

  7. tabindex

  8. tabindex

  9. Capture keyboard events • Use the arrow keys • Focus & Blur • Abstract your JS into named functions

  10. Arrow keys

  11. Real world example

  12. Why bother with ARIA? • ARIA roles affect the screenreader’s ouput • Listen to your page in a screenreader • Chromevox is easy to install and use • I’m not an expert – still learning!

  13. Why bother with ARIA?

  14. Why bother with ARIA?

  15. Why bother with ARIA? • More functionality available • E.g. the ‘aria-labelledby’ and ‘aria-describedby’ attributes allow us to explicitly link each tab control to its respective panel • Don’t bloat your markup – this stuff can be added by JavaScript • Further reading – W3C ARIA Roles Model • Snooze. I know…

  16. Display: none? • Screenreaders won’t announce elements hidden by display:none; • Control the focus of your document • OK to use display:none e.g. to hide your tab content if you correctly control the focus so that the next element in the tab order is the newly shown tab content • Use left-margin tricks to hide text that you want to be announced without being visible on-screen, • e.g. label for search box in site header • See HTML5 Boilerplate comments for good tricks

  17. Useful Links • Accessible jQuery widgetshttp://hanshillen.github.com/jqtest • Chromevoxhttps://chrome.google.com/webstore/detail/kgejglhpjiefppelpmljglcjbhoiplfn • WAI-ARIA widget roleshttp://www.w3.org/TR/wai-aria/roles#widget_roles

More Related