Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Accessibility
More than just alt tags
Rhiana Heath
Why accessibility?
For who?
General site design
Good Example
Colours
Low Contrast
Colour Blindness
Keyboard Navigation
Screen readers
Visual Scanning
lWAI ARIA
Landmark Aria Roles
Alternative to alt
<span
class = ”sr-only”
aria-hidden = “false”
>
Hidden message
</span>
An option for Screen Reader only CSS
/* taken from current bootstrap
screen reader only class */
.sr-only {
clip: rect(0,0...
Toolbox
http://dev.opera.com/articles/introduction-to-wai-aria/
http://www.w3.org/TR/aria-in-html/#recommendations-table
h...
Questions?
@rhianaheath
https://github.com/Rhiana
http://www.slideshare.net/RhianaHeath/
https://rhianaonaccessibility.wor...
Accessibility more than just alt tags
Accessibility more than just alt tags
Upcoming SlideShare
Loading in …5
×

Accessibility more than just alt tags

1,214 views

Published on

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.

Published in: Software, Technology, Design
  • Be the first to comment

  • Be the first to like this

Accessibility more than just alt tags

  1. 1. Accessibility More than just alt tags Rhiana Heath
  2. 2. Why accessibility?
  3. 3. For who?
  4. 4. General site design
  5. 5. Good Example
  6. 6. Colours
  7. 7. Low Contrast
  8. 8. Colour Blindness
  9. 9. Keyboard Navigation
  10. 10. Screen readers
  11. 11. Visual Scanning
  12. 12. lWAI ARIA
  13. 13. Landmark Aria Roles
  14. 14. Alternative to alt <span class = ”sr-only” aria-hidden = “false” > Hidden message </span>
  15. 15. 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; }
  16. 16. 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-em 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
  17. 17. Questions? @rhianaheath https://github.com/Rhiana http://www.slideshare.net/RhianaHeath/ https://rhianaonaccessibility.wordpress.com

×