A presentation at View Source Conference in in Portland, OR, USA by Stephanie Hobson
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)
$('.server_button').on(
'click'
,
function() {
$(this)
.parent().next()
.toggleClass('hide');
});
.server_button :hover { background-color: #000; color: #fff; }
$('.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; }
.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
<span aria-hidden="true" class="icon_check"></span> <span class="offscreen"> This server is up: </span>
<span aria-hidden="true"
class="icon_check"></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:
.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?
WHAT JUST HAPPENED?
WHAT JUST HAPPENED?
WHAT JUST HAPPENED?
WHAT JUST HAPPENED?
<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><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><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
*/
});
<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><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
Making our sites easier to use for users who face vision or mobility challenges makes them easier for everyone to use. From larger hit areas to clear indications of state, we’ll cover a few simple things we can start and stop doing with CSS to make websites faster to navigate with a keyboard, easier to use with a coarse pointer, and usable even without visual formatting.
The following resources were mentioned during the presentation or are useful additional information.
Here’s what was said about this presentation on social media.
for free. You
can too.