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

MOBILE

SWITCH
CONTROL

SWITCH
CONTROL

SWITCH
CONTROL

SWITCH
CONTROL

SWITCH
CONTROL

SWITCH
CONTROL

SWITCH
CONTROL

SWITCH
CONTROL

SWITCH
CONTROL

TRY IT YOURSELF Settings > ? > Accessibility NVDA / ChromeVox / VoiceOver High Contrast Theme Tu r n o f f y o u r m o u s e
Mouse with your elbows

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.

<button type="submit"> Submit </button> ☺

<a href="#" tabindex="0" aria-role="button" onclick="myForm.submit(); return false;"> Submit </a> ☹

<button type="submit"> Submit </button> ☺

<a href="#" tabindex="0" aria-role="button" onclick="myForm.submit(); return false;"> Submit </a> ☹

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

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

Ontarians with Disabilities Act For all public sector organizations, private organizations, and non-profit organizations with 50 or more employees: Since January 1, 2012 all new websites or redesigns of existing sites, must conform to WCAG 2.0, Level A.

Ontarians with Disabilities Act All* internet and web content published after January 1, 2012 must conform to WCAG 2.0 Level AA by January 1, 2021. * Exceptions include captions on live videos and audio descriptions for pre-recorded videos.

3: CSS

DON’T SCREW UP YOUR HTML Style the right element.

DON’T SCREW UP YOUR HTML Style the right element. Don’t remove outlines.

DON’T SCREW UP YOUR HTML Style the right element.
Don’t remove outlines. Don’t write in ALL CAPS.

MAKE SMALL IMPROVEMENTS Icon and colour hints. Text fallbacks. Larger hit areas.

4: JAVASCRIPT

DON’T SCREW UP YOUR HTML Respect focus()

DON’T SCREW UP YOUR HTML Respect focus() Keep users in control.

#DZY (It’s like #NSFW for people with vestibular disorders)

#SZR (It’s like #NSFW for people with epilepsy)

DON’T SCREW UP YOUR HTML Respect focus() Keep users in control.

MAKE SMALL IMPROVEMENTS ARIA Roles and Attributes (Accessible Rich Internet Applications)

<div class="server">Blueberry <span class="server_button"> DETAILS &#x25B8;</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 &#x25B8;</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 &#x25B8;</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 &#x25B8;</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 &#x25B8;</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 &#x25B8; </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 &#x25B8; </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 &#x25B8; </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 &#x25B8; </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 &#x25B8; </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 &#x25B8; </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 &#x25B8; </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 in the CSS

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

ARIA aria-controls aria-expanded

<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" 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" class="hidden 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'); $(this).ariaToggle('aria-controls');
$('#' + id).toggle(); });

$.fn.ariaToggle = function(attr) { var $this = $(this); var currentValue = $this.attr(attr); if(currentValue === 'true'){ $this.attr(attr, false); } else { $this.attr(attr, true); } // make it so we can chain this function return this; };

<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" class="hidden 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" style="display:block;" 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[aria-expanded=false]:after{ content: 'Details \25B8'; } .server[aria-expanded=true]:after{ content: 'Details \25BE'; }

<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" class="hidden 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>

DON’T SELL IT, DO IT

BETTER FOR EVERYONE https://www.microsoft.com/design/practice#toolkit via @dstorey

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/
  • alistapart.com/article/designing-safer-web-animation-for-motion- sensitivity
  • filamentgroup.com/lab/bulletproof_icon_fonts.html
  • snook.ca/archives/html_and_css/hiding-content-for-accessibility
  • www.youtube.com/watch?v=GQKEE9nI1lk