From the basic principle that the web should be great for everyone, Chris Albrecht and Helena Zubkow team up to present an informative accessibility demo that will rock your world. The goal of this session is to introduce developers to web accessibility – what it is, why it’s important, and how to build and test sites to make them as accessible as possible.
This includes a demo of how to do things the right way and the wrong way, some great tools, and a walkthrough of basic standards for accessibility.
- Intro - What is web accessibility?
- Why does web accessibility matter?
- Accessibility fundamentals (web accessibility in practice / code demo)
- Web accessibility tools to assess and improve your projects
- Q&A session
Streamlining Python Development: A Guide to a Modern Project Setup
10 Simple Rules for Making My Site Accessible
1. 10 Simple Rules
for Making my Site Accessible
@ChrisAlbrecht@misshelenasue@Accessibots @AccessibotLilly
2. 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.
5. 5
Strategy // Design // Development
We’re an interactive strategy, design, and development company.
We create delightful experiences using Drupal and open source technologies.
6. 6
(probably not deadly neurotoxin)
What Awaits You
Why?
Why make websites accessible?
Live Demo
Taking web accessibility off 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?
Beneficiaries and proponents of
web accessibility
Resources
Code snippets and resources
that you can use
7. Why does web accessibility ma]er anyway?
Lesson 1
8. 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 Differences, Motor
Impaired… and everyone else!
9. 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. 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. 11
Provide a Textual Alternative to Non-Text Content
Alts, Titles and Bare Text! Oh My!
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. 12
Provide a Textual Alternative to Non-Text Content
Alts, Titles and Bare Text! Oh My!
Do It in Drupal!
Make the alt text field required. This way no one can
‘forget’ to fill it in.
Many accessibility specialists are now recommending
to disconVnue use of the Vtle tag.
13. 13
Provide a Textual Alternative to Non-Text Content
Alts, Titles and Bare Text! Oh My!
Do It in Drupal!
14. 14
Provide a Textual Alternative to Non-Text Content
Alts, Titles and Bare Text! Oh My!
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. 15
Provide a Textual Alternative to Non-Text Content
Alts, Titles and Bare Text! Oh My!
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. 16
Provide a Textual Alternative to Non-Text Content
Alts, Titles and Bare Text! Oh My!
Examples
Debatable
!
<a
href="http://www.awesome.com/article359395"
title="Read
this
article
at
Awesome.com">
The
Most
Amazing
Article
Ever
</a>
!
17. 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?
Why is it Important?
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. 18
Page titles that get to the point
Painless Page Titles
Common Oversights
Puong the Vtle of the website before the Vtle of the page.
Forgeong to provide a page Vtle.
19. 19
Page titles that get to the point
Painless Page Titles
Do It in Drupal!
Drupal is nice and does this properly for you! Hooray.
Just don’t change it.
20. 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
!
Page titles that get to the point
Painless Page Titles
21. 21
Examples
Good Examples
!
Home
|
My
Awesome
Site
About
|
My
Awesome
Site
Buy
Stuff
|
My
Awesome
Site
!
Page titles that get to the point
Painless Page Titles
22. 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?
Why is it Important?
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. 23
‘Get out of Jail Free’ card for Keyboard Users
Skip it!
Common Oversights
Who’s skip? Why am I linking to his page?
Assume Drupal ‘got it’ without checking.
Using Panels without configuring the skip link.
24. 24
‘Get out of Jail Free’ card for Keyboard Users
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 fix.
25. 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">
!
!
!
‘Get out of Jail Free’ card for Keyboard Users
Skip it!
27. 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();
});
});
}
};
‘Get out of Jail Free’ card for Keyboard Users
Skip it!
28. 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?
Why is it Important?
Everyone should get to enjoy the same experience.
SomeVmes hover states impart valuable informaVon.
29. 29
Making interactive elements that don’t suck
Hovering around the Focus Issue
Common Oversights
Aren’t focus styles just for forms and stuff?
Oops, I forgot.
30. 30
Examples
Bad Example
!
.myclass
{
&:hover
{
color:
red;
}
}
!
Making interactive elements that don’t suck
Hovering around the Focus Issue
31. 31
Examples
Good Example
!
.myclass
{
&:hover,
&:focus
{
color:
red;
}
}
!
Making interactive elements that don’t suck
Hovering around the Focus Issue
32. 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?
Why is it Important?
If users can’t interact with elements on your site, they
may not be able to use it at all.
33. 33
Everything clickable should be tab accessible
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. 34
Examples
Bad Example
!
<div
class=“hamburger-‐icon”></div>
!
Everything clickable should be tab accessible
Put it on My Tab
35. 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>
!
Everything clickable should be tab accessible
Put it on My Tab
36. 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?
Why is it Important?
This makes it difficult for screenreader users to navigate
your page efficiently
37. 37
Using element hierarchies properly
YOU’RE OUT OF ORDER!
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 fulfill 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. 38
Using element hierarchies properly
YOU’RE OUT OF ORDER!
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. 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>
!
Using element hierarchies properly
YOU’RE OUT OF ORDER!
40. 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>
Using element hierarchies properly
YOU’RE OUT OF ORDER!
41. 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?
Why is it Important?
Screen readers skip big chunks of content and can’t
interpret complex components.
42. 42
When to Hide, and When to Go Invisible
Are You There, Blog? It's Me, Markup.
Common Oversights
‘Display: none’ is easier. It’s a CSS property.
jQuery uses ‘display: none’ in UI components
43. 43
Do It in Drupal!
When to Hide, and When to Go Invisible
Are You There, Blog? It's Me, Markup.
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. 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>
!
When to Hide, and When to Go Invisible
Are You There, Blog? It's Me, Markup.
45. 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>
When to Hide, and When to Go Invisible
Are You There, Blog? It's Me, Markup.
46. 46
Do It in Drupal!
When to Hide, and When to Go Invisible
Are You There, Blog? It's Me, Markup.
Drupal 8’s built-‐in accessibility classes are a li]le bit different. There’s a change
noVce on drupal.org that explains this here: h]ps://www.drupal.org/node/2022859
48. 48
Examples
Good Example
!
$.fn.aSlideUp
=
function(duration,
callback)
{
var
$this
=
$(this);
$this.slideUp(duration,
function()
{
$this.addClass('element-‐invisble').show();
});
};
When to Hide, and When to Go Invisible
Are You There, Blog? It's Me, Markup.
49. 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?
Why is it Important?
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. 50
Because not being able to see does not prove that you’re not a human.
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. 51
Because not being able to see does not prove that you’re not a human.
No CAPTCHAS if You Can
Do It in Drupal!
There’s a module for that -‐ Honeypot
h]ps://www.drupal.org/node/1232638
52. 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?
Why is it Important?
Sighted keyboard users need those visual focus
indicators to be able to tell where they are on the page.
53. 53
Focus Indicators Need to Stay On
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. 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
fit 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.
Focus Indicators Need to Stay On
Keep Your Focus
55. 55
How Do I Test This Stuff?
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