accessibility more than just alt tags
DESCRIPTION
This goes through an overview of the theory and some tools and techniques for addressing accessibility in a website or application. Including which disabilities accessibility addresses, and techniques to improve the user experience for people with and without impairments such as screen reader and keyboard access. Presented at Ruby on Rails group April 2014.TRANSCRIPT
![Page 1: Accessibility more than just alt tags](https://reader035.vdocuments.mx/reader035/viewer/2022062511/54bd898b4a795941558b4578/html5/thumbnails/1.jpg)
Accessibility
More than just alt tags
Rhiana Heath
![Page 2: Accessibility more than just alt tags](https://reader035.vdocuments.mx/reader035/viewer/2022062511/54bd898b4a795941558b4578/html5/thumbnails/2.jpg)
Why accessibility?
![Page 3: Accessibility more than just alt tags](https://reader035.vdocuments.mx/reader035/viewer/2022062511/54bd898b4a795941558b4578/html5/thumbnails/3.jpg)
For who?
![Page 4: Accessibility more than just alt tags](https://reader035.vdocuments.mx/reader035/viewer/2022062511/54bd898b4a795941558b4578/html5/thumbnails/4.jpg)
General site design
![Page 5: Accessibility more than just alt tags](https://reader035.vdocuments.mx/reader035/viewer/2022062511/54bd898b4a795941558b4578/html5/thumbnails/5.jpg)
Good Example
![Page 6: Accessibility more than just alt tags](https://reader035.vdocuments.mx/reader035/viewer/2022062511/54bd898b4a795941558b4578/html5/thumbnails/6.jpg)
Colours
![Page 7: Accessibility more than just alt tags](https://reader035.vdocuments.mx/reader035/viewer/2022062511/54bd898b4a795941558b4578/html5/thumbnails/7.jpg)
![Page 8: Accessibility more than just alt tags](https://reader035.vdocuments.mx/reader035/viewer/2022062511/54bd898b4a795941558b4578/html5/thumbnails/8.jpg)
Low Contrast
![Page 9: Accessibility more than just alt tags](https://reader035.vdocuments.mx/reader035/viewer/2022062511/54bd898b4a795941558b4578/html5/thumbnails/9.jpg)
Colour Blindness
![Page 10: Accessibility more than just alt tags](https://reader035.vdocuments.mx/reader035/viewer/2022062511/54bd898b4a795941558b4578/html5/thumbnails/10.jpg)
Keyboard Navigation
![Page 11: Accessibility more than just alt tags](https://reader035.vdocuments.mx/reader035/viewer/2022062511/54bd898b4a795941558b4578/html5/thumbnails/11.jpg)
![Page 12: Accessibility more than just alt tags](https://reader035.vdocuments.mx/reader035/viewer/2022062511/54bd898b4a795941558b4578/html5/thumbnails/12.jpg)
Screen readers
![Page 13: Accessibility more than just alt tags](https://reader035.vdocuments.mx/reader035/viewer/2022062511/54bd898b4a795941558b4578/html5/thumbnails/13.jpg)
Visual Scanning
![Page 14: Accessibility more than just alt tags](https://reader035.vdocuments.mx/reader035/viewer/2022062511/54bd898b4a795941558b4578/html5/thumbnails/14.jpg)
lWAI ARIA
![Page 15: Accessibility more than just alt tags](https://reader035.vdocuments.mx/reader035/viewer/2022062511/54bd898b4a795941558b4578/html5/thumbnails/15.jpg)
Landmark Aria Roles
![Page 16: Accessibility more than just alt tags](https://reader035.vdocuments.mx/reader035/viewer/2022062511/54bd898b4a795941558b4578/html5/thumbnails/16.jpg)
Alternative to alt
<span class = ”sr-only” aria-hidden = “false”>Hidden message </span>
![Page 17: Accessibility more than just alt tags](https://reader035.vdocuments.mx/reader035/viewer/2022062511/54bd898b4a795941558b4578/html5/thumbnails/17.jpg)
An option for Screen Reader only CSS
/* taken from current bootstrap screen reader only class */
.sr-only { clip: rect(0,0,0,0); position: absolute; width: 1px; height: 1px; overflow: hidden; border: 0; padding: 0; margin: -1px;}
![Page 18: Accessibility more than just alt tags](https://reader035.vdocuments.mx/reader035/viewer/2022062511/54bd898b4a795941558b4578/html5/thumbnails/18.jpg)
Toolbox
http://dev.opera.com/articles/introduction-to-wai-aria/
http://www.w3.org/TR/aria-in-html/#recommendations-table
https://addons.mozilla.org/en-US/firefox/addon/fangs-screen-reader-emulator/
http://www.chromevox.com/
https://github.com/Mottie/tablesorter
http://gmazzocato.altervista.org/colorwheel/wheel.php
http://accessibility.oit.ncsu.edu/training/aria/modal-window/version-2/
http://achecker.ca/checker/index.php
![Page 19: Accessibility more than just alt tags](https://reader035.vdocuments.mx/reader035/viewer/2022062511/54bd898b4a795941558b4578/html5/thumbnails/19.jpg)
Questions?
@rhianaheath
https://github.com/Rhiana
http://www.slideshare.net/RhianaHeath/
https://rhianaonaccessibility.wordpress.com