Web Accessibility: Making Websites Better For Everyone

WEB ACCESSIBILITY:   MAKING WEBSITES BETTER FOR EVERYONE

WHAT IS WEB ACCESSIBILITY?

SCREEN READER Page has fifty-eight headings and two hundred seventy-one links BBC dash Homepage Link Graphic BBC Heading level two Heading level two BBC navigation List of nine items bullet Link News bullet Link Sport bullet Link Weather bullet Link Capital bullet Link Future bullet Link Shop bullet Link TV bullet Link Radio bullet Link More… List end

HIGH CONTRAST

HIGH CONTRAST

VOICE RECOGNITION

VOICE RECOGNITION

VOICE RECOGNITION

TRACKBALL

KEYBOARD

TRY IT YOURSELF Jaws / ChromeVox Windows High Contrast Theme Tu r n o f f y o u r m o u s e
Use your elbows (not fingers)

YOU SHOULD CARE ABOUT ACCESSIBILITY

1: UX Content Information Architecture Interface Design

1: UX xkcd.com/773

2: HTML

2: HTML Semantic HTML: When the HTML markup reinforces the meaning (aka semantics) of the information on the page.

2: HTML WCAG 2.0

(Web Content Accessibility Guidelines) wave.webaim.org

Section 508 Rehabilitation Act Americans with Disabilities Act Nat’l Federation of the Deaf vs. Netflix Inc ADA Department of Justice Advance Notice Of Proposed Rulemaking Charter of Rights and Freedoms Canadian Human Rights Act Ontarians with Disabilities Act Schedules I, I.I and II of the Financial Administration Act Title III

3: CSS Don’t screw up your HTML Make small improvements

4: JAVASCRIPT Don’t screw up your HTML

4: JAVASCRIPT Don’t screw up your HTML ARIA Roles and Attributes

(Accessible Rich Internet Applications)

<div class="server">Blueberry <span class="server_button"> DETAILS ▸</span> </div> <div class="server_details"> <div>Hostname: web02.onr.example.com</div> <div>Service Tag: JCQFZK1</div> <div>Datacentre: ONR</div> <div>Rack Location: 104.6, Unit #24</div> </div>

<div class="server">Blueberry <span class="server_button"> DETAILS ▸</span> </div> <div class="server_details"> <div> Hostname: web02.onr.example.com </div> <div> Service Tag: JCQFZK1 </div> <div> Datacentre: ONR </div> </div>

<div class="server">Blueberry <span class="server_button"> DETAILS ▸</span> </div> <dl class="server_details"> <dt> Hostname: </dt><dd> web02.onr.example.com </dd> <dt> Service Tag: </dt><dd> JCQFZK1 </dd> <dt> Datacentre: </dt><dd> ONR </dd> </dl>

<div class="server">Blueberry <span class="server_button"> DETAILS ▸</span> </div> <dl class="server_details"> <dt>Hostname:</dt><dd> web02.onr.example.com</dd> <dt>Service Tag:</dt><dd> JCQFZK1</dd> <dt>Datacentre:</dt><dd> ONR</dd> </dl>

<h3 class="server">Blueberry <span class="server_button"> DETAILS ▸</span> </h3> <dl class="server_details"> <dt>Hostname:</dt><dd> web02.onr.example.com</dd> <dt>Service Tag:</dt><dd> JCQFZK1</dd> <dt>Datacentre:</dt><dd> ONR</dd> </dl>

<h3 class="server">Blueberry <span class="server_button"> DETAILS ▸ </span> </h3> <dl class="server_details"> <dt>Hostname:</dt><dd> web02.onr.example.com< <dt>Service Tag:</dt><dd> JCQFZK1</dd> <dt>Datacentre:</dt><dd> ONR</dd> </dl>

$('.server_button').on( 'click' ,
function() {
$(this) .parent().next() .toggleClass('hide'); });

.server_button :hover { background-color: #000; color: #fff; }

<h3 class="server">Blueberry <span class="server_button"> DETAILS ▸ </span> </h3> <dl class="server_details"> <dt>Hostname:</dt><dd> web02.onr.example.com< <dt>Service Tag:</dt><dd> JCQFZK1</dd> <dt>Datacentre:</dt><dd> ONR</dd> </dl>

<h3 class="server">Blueberry <button class="server_button"> DETAILS ▸ </button> </h3> <dl class="server_details"> <dt>Hostname:</dt><dd> web02.onr.example.com</dd> <dt>Service Tag:</dt><dd> JCQFZK1</dd> <dt>Datacentre:</dt><dd> ONR</dd> </dl>

<h3 class="server">Blueberry <button class="server_button" type="button"> DETAILS ▸ </button> </h3> <dl class="server_details"> <dt>Hostname:</dt><dd> web02.onr.example.com</dd> <dt>Service Tag:</dt><dd> JCQFZK1</dd> <dt>Datacentre:</dt><dd> ONR</dd> </dl>

$('.server_button').on( 'click' ,
function() {
$(this) .parent() .next() .toggle(); });

.server_button :hover { background-color: #000; color: #fff; }

.server_button :hover, .server_button:focus { background-color: #000; color: #fff; }

.server_button:hover, .server_button:focus { background-color: #000; color: #fff;

text-decoration: underline; }

<h3 class="server">Blueberry <button class="server_button" type="button"> DETAILS ▸ </button> </h3> <dl class="server_details"> <dt>Hostname:</dt><dd> web02.onr.example.com</dd> <dt>Service Tag:</dt><dd> JCQFZK1</dd> <dt>Datacentre:</dt><dd> ONR</dd> </dl>

<h3 class="server">Blueberry <button class="server_button" type="button"> Details ▸ </button> </h3> <dl class="server_details"> <dt>Hostname:</dt><dd> web02.onr.example.com</dd> <dt>Service Tag:</dt><dd> JCQFZK1</dd> <dt>Datacentre:</dt><dd> ONR</dd> </dl>

<h3 class="server">Blueberry <button class="server_button" type="button"> Details ▸ </button> </h3> <dl class="server_details"> <dt>Hostname:</dt><dd> web02.onr.example.com</dd> <dt>Service Tag:</dt><dd> JCQFZK1</dd> <dt>Datacentre:</dt><dd> ONR</dd> </dl>

<h3 class="server"> <button class="server_button" type="button"> Blueberry </button> </h3> <dl class="server_details"> <dt>Hostname:</dt><dd> web02.onr.example.com</ <dt>Service Tag:</dt><dd> JCQFZK1</dd> <dt>Datacentre:</dt><dd> ONR</dd> </dl>

<h3 class="server"> <button class="server_button" type="button"> Blueberry </button> </h3> <dl class="server_details"> <dt>Hostname:</dt><dd> web02.onr.example.com</ <dt>Service Tag:</dt><dd> JCQFZK1</dd> <dt>Datacentre:</dt><dd> ONR</dd> </dl>

<h3> <button class="server" type="button"> Blueberry </button> </h3> <dl class="server_details"> <dt>Hostname:</dt><dd> web02.onr.example.com</dd> <dt>Service Tag:</dt><dd> JCQFZK1</dd> <dt>Datacentre:</dt><dd> ONR</dd> </dl>

.server_button .server:after { content: 'Details \25B8’; text-transform: uppercase; speak: none;

background-color: #fff; border-radius: 4px; border: 0px none; box-shadow: 0px -2px
rgba(0,0,0, 0.5) inset; color: #4D4E53;

.server_button:hover, .server_button:focus .server:hover:after, .server:focus:after {

/* same styles as before */ }

Click here

“…the time required to rapidly move to a target area is a function of the ratio between the distance to the target and the width of the target” FITTS’ LAW

Wikipedia FTW

<span aria-hidden="true" class="icon_check"></span> <span class="offscreen"> This server is up: </span>

<span aria-hidden="true"

  class="icon_check"></span>

<span class="offscreen"> This server is up: </span>

.icon_check:before { content: '\π3'; speak: none; } .icon_times:before { content: '\π5'; speak: none; }

<span aria-hidden="true" class="icon_check"></span> <span class="offscreen">

This server is up: </span>

<span aria-hidden="true" class="icon_check"></span> <span class="offscreen"

 This server is up:

</span>

.offscreen { position: absolute; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px);
}

WHAT JUST HAPPENED?

WHAT JUST HAPPENED?

choose the right element

WHAT JUST HAPPENED?

choose the right element
use descriptive calls to action

WHAT JUST HAPPENED?

choose the right element
use descriptive calls to action
make hit areas bigger

WHAT JUST HAPPENED?

choose the right element
use descriptive calls to action
make hit areas bigger
add visual cues

WHAT JUST HAPPENED?

choose the right element
use descriptive calls to action
make hit areas bigger
add visual cues in the CSS
don’t just add visual cues

<h3> <button class="server" type="button"> <span aria-hidden="true" class="icon_check" ></span> <span class="offscreen">This server is up: </span> Blueberry </button> </h3> <dl class="server_details"> <dt>Hostname:</dt><dd> web02.onr.example.com</dd> <dt>Service Tag:</dt><dd> JCQFZK1</dd> <dt>Datacentre:</dt><dd> ONR</dd> </dl>

<h3> <button class="server" type="button"> <span aria-hidden="true" class="icon_check" ></span> <span class="offscreen">This server is up: </span> Blueberry </button> </h3> <dl class="server_details"> <dt>Hostname:</dt><dd> web02.onr.example.com</dd> <dt>Service Tag:</dt><dd> JCQFZK1</dd> <dt>Datacentre:</dt><dd> ONR</dd> </dl>

<h3>

<button class="server" type="button"> <span aria-hidden="true" class="icon_check" ></span> <span class="offscreen">This server is up: </span> Blueberry </button>

</h3> <dl class="server_details"> <dt>Hostname:</dt><dd> web02.onr.example.com</dd> <dt>Service Tag:</dt><dd> JCQFZK1</dd> <dt>Datacentre:</dt><dd> ONR</dd> </dl>

<h3>

<button aria-controls="raspberry" class="server" type="button"> <span aria-hidden="true" class="icon_check" ></span> <span class="offscreen">This server is up: </span> Blueberry </button>

</h3> <dl id="raspberry" class="server_details"> <dt>Hostname:</dt><dd> web02.onr.example.com</dd> <dt>Service Tag:</dt><dd> JCQFZK1</dd> <dt>Datacentre:</dt><dd> ONR</dd> </dl>

<h3>

<button aria-controls="raspberry" aria-expanded="false" class="server" type="button"> <span aria-hidden="true" class="icon_check" ></span> <span class="offscreen">This server is up: </span> Blueberry </button>

</h3> <dl id="raspberry" aria-hidden="true" class="server_details"> <dt>Hostname:</dt><dd> web02.onr.example.com</dd> <dt>Service Tag:</dt><dd> JCQFZK1</dd> <dt>Datacentre:</dt><dd> ONR</dd> </dl>

$('[aria-expanded]').on('click',
function() { var id = $(this) .attr(aria-contols); /*
toggle values of
aria-expanded & aria-hidden
*/ });

<h3>

<button aria-controls="raspberry" aria-expanded="false" class="server" type="button"> <span aria-hidden="true" class="icon_check" ></span> <span class="offscreen">This server is up: </span> Blueberry </button>

</h3> <dl id="raspberry" aria-hidden="true" class="server_details"> <dt>Hostname:</dt><dd> web02.onr.example.com</dd> <dt>Service Tag:</dt><dd> JCQFZK1</dd> <dt>Datacentre:</dt><dd> ONR</dd> </dl>

<h3>

<button aria-controls="raspberry" aria-expanded="true" class="server" type="button"> <span aria-hidden="true" class="icon_check" ></span> <span class="offscreen">This server is up: </span> Blueberry </button>

</h3> <dl id="raspberry" aria-hidden="false" class="server_details"> <dt>Hostname:</dt><dd> web02.onr.example.com</dd> <dt>Service Tag:</dt><dd> JCQFZK1</dd> <dt>Datacentre:</dt><dd> ONR</dd> </dl>

.server_details[aria-hidden=true]{ display: none; }

.server[aria-expanded=false]:after{ content: 'Details \25B8'; } .server[aria-expanded=true]:after{ content: 'Details \25BE'; }

DON’T SELL IT, DO IT

BETTER FOR EVERYONE

I LIKE TO MAKE WEBSITES EVERYONE CAN USE @stephaniehobson stephaniehobson.ca

RESOURCES

webaim.org
wave.webaim.org
alistapart.com/article/the-accessibility-of-wai-aria
24ways.org/2009/dont-lose-your-focus/
blog.paciellogroup.com/2010/01/high-contrast-proof-css-sprites
filamentgroup.com/lab/bulletproof_icon_fonts.html
snook.ca/archives/html_and_css/hiding-content-for-accessibility
snook.ca/archives/html_and_css/floated-label-pattern-css

WEB ACCESSIBILITY:   MAKING WEBSITES BETTER FOR EVERYONE