10 Simple Rules for Making My Site Accessible

10 Simple Rules
for Making my Site Accessible
@ChrisAlbrecht@misshelenasue@Accessibots @AccessibotLilly

2
10 Simple Rules for Making Your Site Accessible
The Accessibots
Accessibility tends to be an a<erthought for most of us. We make
excuses like "it will add too much cost to the project," or "I can't
make Drupal do that," or it may be that we simply don't know.
That's where we come in.

3
-Chris Albrecht-
Developer
LULLABOT // ACCESSIBOT
MOUNTAIN CLIMBER // BEER DRINKER
LOVER // DREAMER
!
“WHEN LIFE GETS YOU DOWN…MAKE A COMFORTER.” - BO BURNHAM

4
-Helena Zubkow-
Front-‐end Developer
LULLABOT // ACCESSIBOT
CODER // GAMER
GOLDEN HEART // TECHNICOLOR SOUL
!
“I AM NOT AFRAID… I WAS BORN TO DO THIS.” - JOAN OF ARC

5
Strategy // Design // Development
We’re an interactive strategy, design, and development company.
We create delightful experiences using Drupal and open source technologies.

6
(probably not deadly neurotoxin)
What Awaits You
Why?
Why make websites accessible?
Live Demo
Taking web accessibility oﬀ some
sweet jumps
When?
PrioriVzing web accessibility to
make it happen
Amazing Tools
Accessibility tools and how to
use them
How?
Including everyone:
it’s so easy!
Fabulous Prizes
mumble mumble some exclusions
apply mumble
Who?
Beneﬁciaries and proponents of
web accessibility
Resources
Code snippets and resources
that you can use

Why does web accessibility ma]er anyway?
Lesson 1

8
What’s the Point?
Do the right thing.
Protect against lost sales.
It’s the law.
If There’s Time…
The longer you wait, the harder it will be
to implement. Some secVons may need
complete overhauls.
The Client Doesn’t Care
Doesn’t care or doesn’t know. As a
developer or project manager, it’s your
responsibility.
Who’s it Really For?
Visually Impaired, Colorblind, Hearing
Impaired, CogniVve Diﬀerences, Motor
Impaired… and everyone else!

9
Hover States
& Focus
Are You There,
Blog?
!
It's Me, Markup.
Put it on
My Tab
Painless Page
Titles
You're Out of
Order!
!
This Whole Page is
Out of Order!
Keep Your
Focus
NO CAPTCHAS
If You Can
Alts, Titles and
Bare Text
!
Oh My!
Skip it!

10
Provide a Textual Alternative to Non-Text Content
Alts, Titles and Bare Text! Oh My!
Images are missing or have bad ALT a]ributes
Icons are used instead of text links
Vague links are missing valuable context
What’s the Issue?
Why is it Important?
Screen readers can’t see images
Icons infer context for sighted users
Images with text can’t be read

11
Common Oversights
We’ll go back and fill in the ALT text later.
Leave the ALT text field off. It makes the form too
clu]ered.
Telling users the image is an image.
Not telling users where a link is taking them.
Just going with the Drupal defaults.

12
Do It in Drupal!
Make the alt text ﬁeld required. This way no one can
‘forget’ to ﬁll it in.
Many accessibility specialists are now recommending
to disconVnue use of the Vtle tag.

13
Do It in Drupal!

14
Examples
Bad Examples
!
<a
href="/about-‐us">

<img
src="images/accessibots.png"
alt="The
Accessibots"
/>

</a>

!
<a
href="http://www.awesome.com/article359395"
title="The
Most
Amazing
Article

Ever">

The
Most
Amazing
Article
Ever

</a>

!

15
Examples
Good Examples
!
<a
href="/about-‐us">

<img
src="images/accessibots.png"
alt=“The
Accessibots
Logo
-‐
Only
You
Can
Prevent

Inaccessible
Websites”/>

<span>Read
about
Helena
&
Chris</span>

</a>

!
<a
href="http://www.awesome.com/article359395">

Read
The
Most
Amazing
Article
Ever
at
Awesome.com

</a>

!

16
Examples
Debatable
!
<a
href="http://www.awesome.com/article359395"
title="Read
this
article
at

Awesome.com">

The
Most
Amazing
Article
Ever

</a>

!

17
Page titles that get to the point
Painless Page Titles
Page Vtles someVmes appear a<er the site Vtle
Pages don’t have Vtles
What’s the Issue?
That’s really annoying when using a screen reader,
because they have to listen to the Vtle of your website
before they can page through to hear the page Vtle.

18
Common Oversights
Puong the Vtle of the website before the Vtle of the page.
Forgeong to provide a page Vtle.

19
Do It in Drupal!
Drupal is nice and does this properly for you! Hooray.
Just don’t change it.

20
Examples
Bad Examples
!
My
Awesome
Site
|
Home

My
Awesome
Site
|
About

My
Awesome
Site
|
Buy
Stuff

!
My
Awesome
Site

My
Awesome
Site

My
Awesome
Site

!

21
Examples
Good Examples
!
Home
|
My
Awesome
Site

About
|
My
Awesome
Site

Buy
Stuff
|
My
Awesome
Site

!

22
‘Get out of Jail Free’ card for Keyboard Users
Skip it!
NavigaVon o<en remains the same from page to page
This is annoying and repeVVve for screen readers
Something nice we can do is to provide a skip link
What’s the Issue?
No one wants to hear the same links read over and over
It takes a long Vme to page through to get to the content

23
Skip it!
Common Oversights
Who’s skip? Why am I linking to his page?
Assume Drupal ‘got it’ without checking.
Using Panels without conﬁguring the skip link.

24
Skip it!
Do It in Drupal!
1. First, make sure that it’s linking to a region that actually exists
and is lower in the DOM than the nav.
2. Add tabindex=“0” to your main region if it’s not a naturally
focusable element.
3. Use jQuery to force the focus past your navigaVon and land
the user at the main content. Skip links will not work in
Chrome without this ﬁx.

25
Examples
!
!
HTML Setup
html.tpl.php
<a
href="#"
class="skip-‐link"> 

<span
class="skip-‐link__inner"> 

<?php
print
t('Skip
to
main
content');
?> 

</span> 
</a>

!
page.tpl.php
<div
class="layout__primary"
tabindex="0">

!
!
!
Skip it!

26
Examples
Sass Setup
.skip-‐link
{ 

display:
block; 

position:
absolute; 

background:
$white; 

margin-‐top:
-‐25px; 

z-‐index:
6; 

outline:
none; 

transition:
margin
0.2s
ease; 

font-‐family:
$roboto; 
 

&:focus
{ 

position:
relative; 

margin-‐top:
0; 

height:
25px; 

color:
$gray-‐-‐lightest; 

} 
 

.skip-‐link__inner
{ 

display:
inline-‐block; 

background:
#812caf; 

padding:
5px
10px
5px
5px; 

border-‐radius:
0
0
5px; 

} 
}

27
Examples
JS Setup
/** 

*
Skip
link
configuration 

*/ 
Drupal.behaviors.skipLink
=
{ 

attach:
function
(context,
settings)
{ 

$('body',
context).once('skip-‐link',
function
()
{ 

$('.skip-‐link').click(function()
{ 

$('.layout__primary').focus(); 

}); 

}); 

} 
};
Skip it!

28
Making interactive elements that don’t suck
Hovering around the Focus Issue
Hover states are awesome!
If you don’t apply the styles to focus as well, people
who aren’t using a mouse can’t enjoy them. :(
What’s the Issue?
Everyone should get to enjoy the same experience.
SomeVmes hover states impart valuable informaVon.

29
Common Oversights
Aren’t focus styles just for forms and stuﬀ?
Oops, I forgot.

30
Examples
Bad Example
!
.myclass
{

&:hover
{

color:
red;

}

}

!

31
Examples
Good Example
!
.myclass
{

&:hover,

&:focus
{

color:
red;

}

}

!

32
Everything clickable should be tab accessible
Put it on My Tab
Not everyone can use a mouse. If your interacVve
elements aren’t focusable elements, not everyone can
access them.
What’s the Issue?
If users can’t interact with elements on your site, they
may not be able to use it at all.

33
Put it on My Tab
Common Oversights
Hamburger menu icons that are divs triggered by
jQuery clicks
Items are able to be tabbed to, but are sVll visually
hidden (drop-‐down menus)

34
Examples
Bad Example
!
<div
class=“hamburger-‐icon”></div>

!
Put it on My Tab

35
Examples
Good Examples
!
<a
class=“hamburger-‐icon”>

<span
class=“link-‐text—-‐hidden”>Menu</span>

</a>

!
<a
class=“hamburger-‐icon”>

<span
class=“element-‐invisible”>Menu</span>

</a>

!
Put it on My Tab

36
Using element hierarchies properly
YOU’RE OUT OF ORDER!
SomeVmes content is intuiVvely posiVoned with CSS,
but is out of order in the source.
Hierarchy elements are someVmes abused for styling
What’s the Issue?
This makes it diﬃcult for screenreader users to navigate
your page eﬃciently

37
Common Oversights
Using the wrong header element because it is a be]er
font size for that place on the page.
Using Drupal's default templates.
Arranging markup in a non-‐logical order to fulﬁll a
layout requirement.
Not providing "Skip Links" in helpful places to allow
screen readers to jump past inaccessible secVons to
get to accessible versions.

38
Do It in Drupal!
Configure templates to use proper headings.
Views, panels and blocks all allow this easily
If you need a more specific template, add a template suggesVon
in a preprocess hook.
Try to uVlize CSS layout tools like flexbox to arrange elements on
the screen visually while maintaining the proper source order.
Create "readable" versions of complex interacVons such as
slideshows and graphical data and use skip links to allow screen
readers to "jump" to the readable informaVon.

39
Examples
Bad Example
!
<h2>Me & My Crappy Code</h2>
<p class=“bigger”>How do I feel about web accessibility?</p>
<div>I love <h1>coding!</h1> I can’t wait to learn accessibility so that my sites
aren’t <h3>annoying</h3>!
</div>
<p class=“bigger”>I have no idea how to do this.</p>
<div>What a <h1>pain</h1> for everybody.</div>
!

40
Examples
Good Example
!
<h1>Me & My Friendly Code</h1>
<h2>How do I feel about web accessibility?</h2>
<p>I love <strong>coding!</strong> I’m so glad I learned web accessibility so that
my sites aren’t <i>annoying</i></p>
<h2>Why is friendly code great?</h2>
<p>A li]le more informaVon about doing it right.</p>

41
When to Hide, and When to Go Invisible
Are You There, Blog? It's Me, Markup.
Elements removed using `display: none` are not picked
read by screen readers.
What’s the Issue?
Screen readers skip big chunks of content and can’t
interpret complex components.

42
Common Oversights
‘Display: none’ is easier. It’s a CSS property.
jQuery uses ‘display: none’ in UI components

43
Do It in Drupal!
Use Drupal’s ‘.element-‐invisible’ to hide content that should not be visible, but sVll
be read.
Note: Don’t use this if your site will be translated to a right-‐to-‐le< language!
Make a class using the opacity / font-‐size trick we talked about earlier to use
here instead.
Look for accessible jQuery plugins that support Aria Tags
h]p://hanshillen.github.io/jqtest
h]ps://plugins.jquery.com/tag/accessibility
Use custom jQuery events to override the `display: none` css.

44
Examples
Bad Example
!
<div
id=“accordion”>

<h3>Chapter
1</h3>

<div
class=“block1”>CONTENT!</div>

<h3>Chapter
2</h3>

<div
class=“block2”
style=“display:
none”>INVISIBLE
CONTENT!</div>

</div>

!

45
Examples
Good Example
!
<div
id=“accordion”>

<h3>Chapter
1</h3>

<div
class=“block1”>CONTENT!</div>

<h3>Chapter
2</h3>

<div
class=“block2
element-‐invisible”>INVISIBLE
CONTENT!</div>

</div>


46
Do It in Drupal!
Drupal 8’s built-‐in accessibility classes are a li]le bit diﬀerent. There’s a change
noVce on drupal.org that explains this here: h]ps://www.drupal.org/node/2022859

47
Examples
Bad Example
!
$(this).slideUp();


48
Examples
Good Example
!
$.fn.aSlideUp
=
function(duration,
callback)
{

var
$this
=
$(this);

$this.slideUp(duration,
function()
{

$this.addClass('element-‐invisble').show();

});

};


49
Because not being able to see does not prove that you’re not a human.
No CAPTCHAs if You Can
CAPTCHAs are inaccessible.
CAPTCHAs don’t work.
CAPTCHAs annoy everyone.
What’s the Issue?
It’s rude to tell people that they aren’t human because
they can’t pass a vision test.
CAPTCHAs make your site inaccessible to valid users.

50
No CAPTCHAS if You Can
Common Oversights
My CAPTCHA has an audio version, so it’s accessible.
I need a CAPTCHA to keep out spam bots, so it’s a
necessary evil.

51
No CAPTCHAS if You Can
Do It in Drupal!
There’s a module for that -‐ Honeypot
h]ps://www.drupal.org/node/1232638

52
Focus Indicators Need to Stay On
Keep Your Focus
Default focus indicators are someVmes disabled for style
reasons and are not replaced with an appropriate
subsVtute.
What’s the Issue?
Sighted keyboard users need those visual focus
indicators to be able to tell where they are on the page.

53
Keep Your Focus
Common Oversights
What are these weird blue lines?
They don’t match my website / I don’t like how they look.
The client doesn’t want them there.

54
Examples
We have three great choices for focus indicaVon:
!
1. Just leave them alone.
2. If need be, style them! It’s okay to change them a li]le to make them
ﬁt with the style of the site, as long as the change is sVll evident.
3. Use something else altogether -‐ as long as it’s a noVceable change
and it’s on everything that can receive focus.
Keep Your Focus

55
How Do I Test This Stuﬀ?
Wave Tool
h]p://wave.webaim.org/
Color Oracle
h]p://colororacle.org/
Quail
h]p://quailjs.org/
Drupal Accessibility Module
h]ps://www.drupal.org/project/accessibility

56
h]p://www.accessibots.io
The Accessibots
Chris Albrecht
Developer // Technical PM
@ChrisAlbrecht
Lilly Bot
Mascot
@accessibotlilly
Helena Zubkow
Front-‐End Developer
@misshelenasue

10 Simple Rules for Making My Site Accessible

More Related Content

What's hot

Viewers also liked

Similar to 10 Simple Rules for Making My Site Accessible

Recently uploaded

10 Simple Rules for Making My Site Accessible