Looking into the
of Accessibility
![](https://s3.amazonaws.com/media-p.slid.es/uploads/295750/images/1333929/jaws.png)
https://en.wikipedia.org/wiki/Jaws_(film)#/media/File:JAWS_Movie_poster.jpg
A11y Camp 2016
@RhianaHeath
![](https://s3.amazonaws.com/media-p.slid.es/uploads/295750/images/1334219/pasted-from-clipboard.png)
350,000 people
in Australia
are blind or
vision impaired
CC BY 3.0 (http://creativecommons.org/licenses/by/3.0)], via Wikimedia Commons
![](https://s3.amazonaws.com/media-p.slid.es/uploads/295750/images/1334223/4578734451_4df159cdbc_m.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/295750/images/1334225/7152195969_a377833ce3_b.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/295750/images/1333946/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/295750/images/1333942/MS_word_DOC_icon.svg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/295750/images/1333943/8791689390_b929e9163c.jpg)
http://www.sistelsrl.it/software/jaws_screen_reader.htm
Created in 1989 for...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/295750/images/1340668/StartingMsdos.png)
https://en.wikipedia.org/wiki/MS-DOS#/media/File:StartingMsdos.png
![](https://s3.amazonaws.com/media-p.slid.es/uploads/295750/images/2856865/screen_reader_time_graph.png)
Windows
Apple
Internet
Explorer
Firefox
Safari
Chrome
<div role="navigation">
<ul>
<li>Home</li>
<li>Contact us</li>
</ul>
</div>
<div role="main">
<h1>Our Website</h1>
<p>Some content goes here</p>
</div>
Heading 1
![](https://s3.amazonaws.com/media-p.slid.es/uploads/295750/images/2856973/github_front_page.png)
Heading 3
Heading 2
Heading 4
![](https://s3.amazonaws.com/media-p.slid.es/uploads/295750/images/2856978/github_scroll_down.png)
Empty Link
![](https://s3.amazonaws.com/media-p.slid.es/uploads/295750/images/2856973/github_front_page.png)
<a href="github.com"
class="header-logo"
aria-label="Homepage" ... >
<svg ...></svg>
</a>
![](https://s3.amazonaws.com/media-p.slid.es/uploads/295750/images/2857027/jaws_logo.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/295750/images/2857028/nvda_logo.jpg)
<a href="github.com"
class="header-logo"
aria-label="Homepage" ... >
<svg ...></svg>
<span class="sr-only">Home Page</span>
</a>
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
New Window Links
![](https://s3.amazonaws.com/media-p.slid.es/uploads/295750/images/2856973/github_front_page.png)
<a href="help.github.com/terms"
class="text-white"
target="_blank">
terms of service
<span class="sr-only">
(link opens new window)
</span>
</a>
roles
HTML5
Heading levels
Link Context
alt
aria-label
aria-labelledby
aria-describedby
sr-only
![](https://s3.amazonaws.com/media-p.slid.es/uploads/295750/images/2857469/iceberg.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rhianaheath/images/1192708/Accessibility_Wizard_Rhiana.png)
Slides: https://slides.com/rhianaheath
Twitter: @rhianaheath
Website: rhiana.heath.cc
Images: Wikimedia Commons, Flickr
Thanks!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/rhianaheath/images/1192708/Accessibility_Wizard_Rhiana.png)
Stats: Webaim Survey
HTML5: W3 HTML Aria Table
Aria: WAI ARIA cheat sheet
sr-only: Bootstrap accessibility classes
angular: ngAria