Demystifying Accessibility

@anarafaelaferro

@deemazesoftware

Rafaela

Balu

#1

It only benefits a small range of people.

An illness, injury, or condition that makes it difficult for someone to do the things that other people do.

DISABILITY

/ˌdɪs.əˈbɪl.ə.t̬i/

Permanent

Temporary

Situational

Permanent

Blindness or low vision

Color blindness

Deafness

Dyslexia

Muscular dystrophy

Paralysis

Temporary

Broken arm

Repetitive Strain Injury

Concussion

Situational

Using our phones outside

Working in a loud coffee shop

Holding a baby / grocery bags

≈ 15% of the world population

and growing!

Permanent

Temporary

Situational

Takeaways

.i

Anyone can gain a disability, and very likely will.

Takeaways

.ii

When you build for accessibility, everyone benefits.

#1

It only benefits a small range of people.

#2

It's the developers' job.

.i

Color.

cssstats.com

Your email

Next

Your name

Doggo ipsum snoot borking doggo dat tungg tho doggorino borkdrive, maximum borkdrive borkdrive.

Your email

Your name

John Doe

johndoe@mail.com

Your email

my@email

Your email

my@email

Next

Next

Your name

Rafaela Ferro

Your name

Rafaela Ferro

This email is not valid.

This email is not valid.

.i

Color.

Run your palette through a contrast checker

Highlight important content

Provide feedback

Check again

Hint interactivity

.ii

Label controls.

Accessible labels focus on action verbs and are always straight to the point.

.iii

Layout structure.

Plan your tab order, and include relevant shortcut links at the beginning of the page.

.iv

Design for different types of interaction.

* {
   outline: none;
}

What's focusable?

▪︎  Links

▪︎  Buttons

▪︎  Form fields

▪︎  Menu items

▪︎  Widgets

▪︎  Things triggered by hover, like tooltips

It must stand out.

1

Complement shape and size of element

2

Doesn't have to be the same for all the elements.

3

#2

It's the developers' job.

#3

It's the
designers' job.

.i

Know your HTML elements.

<header>
<main>
<footer>
<nav>
<aside> 
<h>
<...>
<a>
<button>
<input>
!= <div>

.ii

Logical tab order.

✓ Focusable

✗ Not focusable

.iii

Support different types of interactions.

tabindex = 0
keyboard events
+
custom labels
+

WAI-ARIA Authoring Practices

.iv

Focus management.

tabindex = -1
e.focus();
+

.v

Continuous Integration.

#3

It's the
designers' job.

#4

It's an extra-mile.

Useless    &   Expensive

Takeaways

.i

Designing for accessibility doesn't add extra features or content.

Takeaways

.ii

Most challenges are solved by following good practices.

Takeaways

.iii

Business benefits.

Accessible websites:

Better search result, larger audience, SEO friendly, faster download times, good usability, good coding practices.

Useless    &   Expensive

Takeaways

.iv

It's our duty.

#4

It's an extra-mile.

How?

.i

Get educated.

.ii

Start early.

.iii

Identify key user journeys in your product. Start now.

.iv

Test it with real people, with real disabilities.

rafaelaferro.com

@anarafaelaferro

Thank you!