Accessibility more than just alt tags

19
Accessibility More than just alt tags Rhiana Heath

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 of Accessibility more than just alt tags

Page 1: Accessibility more than just alt tags

Accessibility

More than just alt tags

Rhiana Heath

Page 2: Accessibility more than just alt tags

Why accessibility?

Page 3: Accessibility more than just alt tags

For who?

Page 4: Accessibility more than just alt tags

General site design

Page 5: Accessibility more than just alt tags

Good Example

Page 6: Accessibility more than just alt tags

Colours

Page 7: Accessibility more than just alt tags
Page 8: Accessibility more than just alt tags

Low Contrast

Page 9: Accessibility more than just alt tags

Colour Blindness

Page 10: Accessibility more than just alt tags

Keyboard Navigation

Page 11: Accessibility more than just alt tags
Page 12: Accessibility more than just alt tags

Screen readers

Page 13: Accessibility more than just alt tags

Visual Scanning

Page 14: Accessibility more than just alt tags

lWAI ARIA

Page 15: Accessibility more than just alt tags

Landmark Aria Roles

Page 16: Accessibility more than just alt tags

Alternative to alt

<span class = ”sr-only” aria-hidden = “false”>Hidden message </span>

Page 17: Accessibility more than just alt tags

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 19: Accessibility more than just alt tags

Questions?

@rhianaheath

https://github.com/Rhiana

http://www.slideshare.net/RhianaHeath/

https://rhianaonaccessibility.wordpress.com