10 Simple Rules for Making my Site Accessible @Accessibots - - PowerPoint PPT Presentation

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

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

Why ¡does ¡web ¡accessibility ¡ma]er ¡anyway?

Lesson ¡1

8

What’s the Point?

[need ¡numbers] ¡ 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?

Color ¡blind, ¡Visually ¡Impaired, ¡Hearing ¡ Impaired, ¡CogniVve ¡differences, ¡Motor ¡ impaired

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

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. ¡ Tell ¡users ¡the ¡image ¡is ¡an ¡image. ¡ Don’t ¡tell ¡users ¡where ¡a ¡link ¡is ¡taking ¡them. ¡ Just ¡going ¡with ¡the ¡Drupal ¡defaults.

12

Provide a Textual Alternative to Non-Text Content

Alts, Titles and Bare Text! Oh My!

Do It in Drupal!

Make ¡the ¡alt ¡and ¡Vtle ¡text ¡fields ¡required. ¡This ¡way ¡no ¡

• ne ¡can ¡‘forget’ ¡to ¡fill ¡them ¡in.

13

Provide a Textual Alternative to Non-Text Content

Alts, Titles and Bare Text! Oh My!

Examples

Bad ¡

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

14

Provide a Textual Alternative to Non-Text Content

Alts, Titles and Bare Text! Oh My!

Examples

Good ¡

<a ¡href="/about-­‑us" ¡title="Read ¡about ¡Helena ¡& ¡Chris”> ¡ ¡ ¡ ¡<img ¡src="images/accessibots.png" ¡alt=“The ¡Accessibots" ¡/> ¡ </a> ¡

• <a ¡href=“http://www.awesome.com/article359395” ¡“ ¡title="Read ¡this ¡

article ¡at ¡Awesome.com”> ¡ ¡ ¡ ¡The ¡Most ¡Amazing ¡Article ¡Ever ¡ </a> ¡

• <a ¡href=“http://www.awesome.com/article359395”> ¡

¡ ¡ ¡Read ¡The ¡Most ¡Amazing ¡Article ¡Ever ¡Here ¡ </a> ¡

15

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.

16

Page titles that get to the point

Painless Page Titles

Common Oversights

Punng ¡the ¡Vtle ¡of ¡the ¡website ¡before ¡the ¡Vtle ¡of ¡the ¡page. ¡ Forgenng ¡to ¡provide ¡a ¡page ¡Vtle.

17

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.

18

Page titles that get to the point

Painless Page Titles

Examples

• Bad ¡

My ¡Awesome ¡Site ¡| ¡Home ¡ My ¡Awesome ¡Site ¡| ¡About ¡ My ¡Awesome ¡Site ¡| ¡Buy ¡Stuff ¡

• My ¡Awesome ¡Site ¡

My ¡Awesome ¡Site ¡ My ¡Awesome ¡Site ¡

19

Page titles that get to the point

Painless Page Titles

Examples

Good ¡

Home ¡| ¡My ¡Awesome ¡Site ¡ About ¡| ¡My ¡Awesome ¡Site ¡ Buy ¡Stuff ¡| ¡My ¡Awesome ¡Site ¡

20

‘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

21

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

22

‘Get out of Jail Free’ card for Keyboard Users

Skip it!

Do It in Drupal!

First, ¡make ¡sure ¡that ¡it’s ¡linking ¡to ¡a ¡region ¡that ¡ actually ¡exists ¡and ¡is ¡lower ¡in ¡the ¡DOM ¡than ¡the ¡nav. ¡ ¡ Add ¡tabindex=“0” ¡to ¡your ¡main ¡region ¡if ¡it’s ¡not ¡a ¡ focusable ¡element. ¡ If ¡all ¡else ¡fails, ¡hack ¡it ¡and ¡use ¡jQuery ¡to ¡force ¡the ¡ focus ¡past ¡your ¡navigaVon.

23

‘Get out of Jail Free’ card for Keyboard Users

Skip it!

Examples

<a ¡href="#main-­‑content" ¡class="element-­‑invisible ¡ element-­‑focusable">Skip ¡to ¡main ¡content</a> ¡

• jQuery ¡focus ¡hack ¡

$( ¡"#target" ¡).focus();

24

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.

25

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.

26

Making interactive elements that don’t suck

Hovering around the Focus Issue

Examples

Bad ¡

.myclass ¡{ ¡ ¡ ¡ ¡&:hover ¡{ ¡ ¡ ¡ ¡ ¡ ¡color: ¡red; ¡ ¡ ¡ ¡} ¡ ¡} ¡

27

Making interactive elements that don’t suck

Hovering around the Focus Issue

Examples

Good ¡

.myclass ¡{ ¡ ¡ ¡ ¡&:hover, ¡ ¡ ¡ ¡&:focus ¡{ ¡ ¡ ¡ ¡ ¡ ¡color: ¡red; ¡ ¡ ¡ ¡} ¡ ¡} ¡

28

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.

29

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)

30

Everything clickable should be tab accessible

Put it on My Tab

Examples

Bad ¡

<div ¡class=“hamburger-­‑icon”></div> ¡

31

Everything clickable should be tab accessible

Put it on My Tab

Examples

Good ¡

<a ¡class=“hamburger-­‑icon”></a> ¡

32

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

33

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.

34

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

35

Using element hierarchies properly

YOU’RE OUT OF ORDER!

Examples

Bad ¡

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

36

Using element hierarchies properly

YOU’RE OUT OF ORDER!

Examples

Good ¡

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

• <h1>My ¡New ¡Unrelated ¡Topic</h1> ¡

37

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.

38

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

39

When to Hide, and When to Go Invisible

Are You There, Blog? It's Me, Markup.

Do It in Drupal!

Use ¡Drupal’s ¡‘.element-­‑invisible’ ¡to ¡hide ¡content ¡that ¡should ¡not ¡ be ¡visible, ¡but ¡sVll ¡be ¡read. ¡ 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.

40

When to Hide, and When to Go Invisible

Are You There, Blog? It's Me, Markup.

Examples

Bad ¡

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

41

When to Hide, and When to Go Invisible

Are You There, Blog? It's Me, Markup.

Examples

Good ¡

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

42

When to Hide, and When to Go Invisible

Are You There, Blog? It's Me, Markup.

Examples

Bad ¡

• $(this).slideUp();

43

When to Hide, and When to Go Invisible

Are You There, Blog? It's Me, Markup.

Examples

Good ¡

• $.fn.aSlideUp ¡= ¡function(duration, ¡callback) ¡{ ¡

¡ ¡ ¡ ¡var ¡$this ¡= ¡$(this); ¡ ¡ ¡ ¡ ¡ ¡ ¡$this.slideUp(duration, ¡function() ¡{ ¡ ¡ ¡ ¡ ¡ ¡ ¡$this.addClass('element-­‑invisble').show(); ¡ ¡ ¡ ¡ ¡}); ¡ ¡};

44

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.

45

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.

46

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

47

Because not being able to see does not prove that you’re not a human.

No CAPTCHAS if You Can

Examples

<a ¡href="#main-­‑content" ¡class="element-­‑invisible ¡ element-­‑focusable">Skip ¡to ¡main ¡content</a> ¡

• jQuery ¡focus ¡hack ¡

$( ¡"#target" ¡).focus();

48

Focus Indicators Need to Stay On

Keep Your Focus

Focus ¡indicators ¡are ¡someVmes ¡disabled ¡for ¡style ¡

• reasons. ¡

That’s ¡a ¡bad ¡thing!

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.

49

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.

50

Focus Indicators Need to Stay On

Keep Your Focus

Examples

Just ¡leave ¡them ¡alone. ¡:) ¡ If ¡need ¡be, ¡style ¡them! ¡It’s ¡okay ¡to ¡change ¡them ¡a ¡li]le ¡to ¡ make ¡them ¡fit ¡with ¡the ¡style ¡of ¡the ¡site. ¡ If ¡you ¡can’t ¡get ¡away ¡with ¡keeping ¡them, ¡use ¡something ¡ else ¡to ¡call ¡a]enVon ¡to ¡focus ¡-­‑ ¡a ¡focus ¡effect ¡like ¡we ¡ learned ¡about ¡earlier ¡is ¡a ¡great ¡replacement ¡in ¡a ¡pinch!

51

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

52

h]p://www.accessibots.io

The Accessibots

Chris Albrecht

Developer ¡// ¡Technical ¡PM @ChrisAlbrecht

Lilly Bot

Mascot @accessibotlilly

Helena Zubkow

Front-­‑End ¡Developer @misshelenasue