Looking into the 

of Accessibility

https://en.wikipedia.org/wiki/Jaws_(film)#/media/File:JAWS_Movie_poster.jpg

A11y Camp 2016

@RhianaHeath

350,000 people 

in Australia

are blind or

vision impaired

CC BY 3.0 (http://creativecommons.org/licenses/by/3.0)], via Wikimedia Commons

http://www.sistelsrl.it/software/jaws_screen_reader.htm

Created in 1989 for...

https://en.wikipedia.org/wiki/MS-DOS#/media/File:StartingMsdos.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

Heading 3

Heading 2

Heading 4

Empty Link

<a href="github.com" 
   class="header-logo" 
   aria-label="Homepage" ... >

    <svg ...></svg>

</a>
<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

<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

Slides:       https://slides.com/rhianaheath

Twitter:     @rhianaheath

Website:   rhiana.heath.cc

Images:     Wikimedia Commons, Flickr

Thanks!

Stats:      Webaim Survey

HTML5:  W3 HTML Aria Table

Aria:        WAI ARIA cheat sheet

sr-only:  Bootstrap accessibility classes

angular: ngAria

Additional Resources

Looking into the JAWS of Accessibility

By RhianaH

Looking into the JAWS of Accessibility

A brief look into the people who use screen reader technology such as JAWS. As well as some insight on how it is used and some tips on what you can do as a web developer to make it easier.

  • 2,652