Keynote: Web Accessibility: Making Websites Better For Everyone

A presentation at JavaScript Open Day Toronto in December 2015 in Toronto, ON, Canada by Stephanie Hobson

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

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

1: UX Content Information Architecture Interface Design

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> ☹

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

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.

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.

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)

MAKE SMALL IMPROVEMENTS 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> <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 <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, .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"> <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 */ }

“…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>

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

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

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

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

$('[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="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'; }

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

Stephanie Hobson
@stephaniehobson

1 / 114

Not everyone uses a keyboard, a monitor, and a mouse to access your sites on desktops. Not everyone uses a finger to interact with your sites on touch screens. When you consider these users while building your sites, the sites you build are easier for everyone to use. From attaching your events to the right elements and keeping your users in control, to including ARIA roles and following progressive enhancement - we'll look at a few things you can start and stop doing with JavaScript to make your sites better for everyone.

Video

Resources

The following resources were mentioned during the presentation or are useful additional information.

Buzz and feedback

Here’s what was said about this presentation on social media.

Also great presentation on web accessibility from @stephaniehobson #JSOpenTO pic.twitter.com/4fVXtSDTiK
— Anna Safronova (@annasfrnv) November 18, 2015
Web Accessibility ensures websites are built better for everyone! Keynote @stephaniehobson! #JSOpenTO @MSEdgeDev pic.twitter.com/nIT2Kn89hG
— Microsoft Developer Canada (@msdevCA) November 17, 2015
So happy to have @stephaniehobson here for #JSOpenTO. Her talk on Web accessibility is even better the 2nd time! pic.twitter.com/zMLqryWzlb
— Amy Mansell (@ae_mansell) November 17, 2015
Inspiring talk by @stephaniehobson on #web #accessibility #JSOpenTO @lighthouse_labs @MSEdgeDev pic.twitter.com/3W1xEuHhLU
— Ram (@_rbansal_) November 17, 2015

Keynote: Web Accessibility: Making Websites Better For Everyone

Link for this presentation:

HTML code for embedding:

Share on social media:

Video

Resources

Web Accessibility Evaluation Tool

The Accessibility of WAI-ARIA

Don't Lose Your :focus

Designing Safer Web Animation For Motion Sensitivity

Buzz and feedback