10 simple rules for making my site accessible

10 Simple Rulesfor Making my Site Accessible

@ChrisAlbrecht@misshelenasue@Accessibots @AccessibotLilly

2

10 Simple Rules for Making Your Site Accessible

The AccessibotsAccessibility 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 DemoTaking web accessibility off some

sweet jumps

When?PrioriVzing web accessibility to

make it happen

Amazing ToolsAccessibility tools and how to

use them

How?Including everyone:

it’s so easy!

Fabulous Prizesmumble mumble some exclusions

apply mumble

Who?Beneficiaries and proponents of

web accessibility

ResourcesCode 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 CareDoesn’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

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



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


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



Common OversightsPuong 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?

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


Skip it!

Common OversightsWho’s skip? Why am I linking to his page?

Assume Drupal ‘got it’ without checking.

Using Panels without configuring 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 fix.

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?

Why is it Important?Everyone should get to enjoy the same experience. SomeVmes hover states impart valuable informaVon.

29



Common OversightsAren’t focus styles just for forms and stuff?

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?

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


Put it on My Tab

Common OversightsHamburger 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?

Why is it Important?This makes it difficult for screenreader users to navigate your page efficiently

37



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



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?

Why is it Important?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!


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

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 different. There’s a change

noVce on drupal.org that explains this here: h]ps://www.drupal.org/node/2022859

http://drupal.org

https://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?

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


No CAPTCHAS if You Can

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

https://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?

Why is it Important?Sighted keyboard users need those visual focus indicators to be able to tell where they are on the page.

53


Keep Your Focus

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

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.


Keep Your Focus

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

http://wave.webaim.org/

http://colororacle.org/

http://quailjs.org/

https://www.drupal.org/project/accessibility

56

h]p://www.accessibots.ioThe Accessibots

Chris AlbrechtDeveloper // Technical PM

@ChrisAlbrecht

Lilly BotMascot

@accessibotlilly

Helena ZubkowFront-‐End Developer

@misshelenasue

10 simple rules for making my site accessible

Technology

bare text

text content alts

alt text eld

textual alternative

text links vague links

accessibots accessibility

web accessibility o

accessibility specialists