Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Join Anwar, UX Design Teacher at Treehouse, as he talks about the universal benefits of accessible design. Anwar also discusses tangible practices you can implement to make your own work more accessible.
Presentation Slides (Right Click + Save Link As):
Super excited to introduce our
next [INAUDIBLE] this session.
0:03
He is a web developer,
UX designer, and instructor,
0:07
based in Portland, Oregon,
here at Treehouse, y'all.
0:12
He is currently employed as a software
development instructor on my team,
0:17
this is my teammate.
0:21
He believes in user centric design, and
0:22
enforces those principles even
when teaching development.
0:25
He is a rock star in every way, he is my
teammate, please welcome Anwar Montasir.
0:29
>> Thank you, welcome.
0:36
Thank you all for joining me today.
0:38
Thank you for
your interest in accessibility.
0:40
Just a few other thank
yous as we get going.
0:42
I wanted to thank Ryan of course,
founder and CEO of treehouse,
0:44
Liz Jackson has just done
such amazing work,
0:48
getting all these engaging speakers
together, connecting them to our audience.
0:52
Our production team Jesse,
Michael, Patrick, Toni, for
0:57
the kind introduction, and
Kayleen who will be monitoring our chat.
1:01
I've been practicing this talk and
it turns out I have a lot to say,
1:06
but I'll leave as much time as I
can at the end for questions, so
1:10
don't hesitate to drop them on it.
1:15
Double-tap my presentation to enlarge,
and very critical this next slide.
1:17
This will be shared every so often in the
chat, but a service called streamtext.net,
1:23
is providing captions, so
I know those benefit a lot of users.
1:29
So, hopefully you have that link
available if you need captions.
1:33
All right, who am I?
1:40
My name is Anwar.
1:41
I'm a designer, a developer,
a teacher at Treehouse.
1:42
I've been here since October of last year,
and like Dr.
1:45
Toni said, I'm lucky to be on her team.
1:49
I'm an accessibility advocate.
1:52
In addition to writing and
delivering curriculum at Treehouse,
1:54
including our accessibility content,
1:59
I launched a course called
Accessibility for UX Designers in June.
2:02
I'm currently working on Accessibility for
2:07
Web Developers that's scheduled
to launch in September.
2:09
I'm also auditing Treehouse's product for
2:13
better accessibility for
our student learners.
2:16
And connect with me on LinkedIn,
my address is up on the screen.
2:20
I definitely would love
to hear from you, who you are,
2:23
what brought you to this festival.
2:27
And Michelle gave a ton of
great advice on crafting short
2:30
messages in LinkedIn when you connect,
so that'll be awesome to see.
2:35
Where did I come from before Treehouse?
2:41
I grew up in Arizona,
went to school in the late 90s.
2:45
I studied graphic design and painting,
I taught myself HTML, pretty much
2:48
learned accessibility on my own mostly
on the job and doing my own research.
2:54
I've been in the industry two decades,
mostly in New York City,
2:59
although I moved to Portland,
Oregon four years ago.
3:03
I worked in a bunch of different ad
agencies as well as a freelancer, and
3:06
I've always done a pretty
broad variety of things.
3:11
HTML, CSS, full stack
JavaScript development,
3:14
as well as UX design and
all that entails.
3:19
I've also been teaching for quite a while,
3:22
as you can see up on the screen,
eight colleges, two bootcamps.
3:25
All of these prior to Treehouse.
3:30
Now, the question I've pondered
as an accessibility advocate,
3:32
is out of these 10 schools,
how many of them had
3:37
accessibility curriculum built
in already when I got there?
3:41
One, okay.
3:46
Not great at all, right?
3:48
Okay, well, then you might ask at least,
3:50
how many had accessibility training for
teachers?
3:54
Wow, okay.
3:58
Disappointing, unacceptable,
use whatever term you want.
4:00
Our goal here should be creating graduates
who can hit the ground running, right?
4:04
That will consider disabled users
from the beginning, the research,
4:09
the brainstorming process, all the way
through design and development.
4:13
But how can they do that if we're
not teaching, now as educators?
4:19
This is not just my experience.
In 2018, webAIM,
4:23
if you don't know them,
web accessibility in mind, webaim.org.
4:28
They surveyed 724
Web Accessibility practitioners,
4:33
asked them a bunch of
interesting questions, but
4:37
one that stood out to me was,
did you learn anything substantive
4:41
about web accessibility as
part of your formal schooling?
4:46
No, all right,
4:50
almost 93% said, no.
4:52
So, what other conclusion was I to reach,
then we're letting students down.
4:55
Students are either learning
accessibility on the job,
5:02
they're educating themselves,
doing their own research,
5:06
coming into events like this one, or
worse, maybe they're not learning it.
5:10
Even though as the slide suggests,
5:15
disability can happen to anyone,
anywhere, anytime.
5:18
And I don't just mean
permanent disability,
5:22
although that's a very large
community to be thinking about.
5:25
The global report on disability
suggests that this is over 1
5:29
billion people worldwide,
15% of the earth's population.
5:34
However, taking a look at it,
on the screen there's
5:39
a graphic from Microsoft
inclusive design 101 toolkit.
5:44
That's a free download and
I highly recommend that.
5:49
It shows all the reasons, for example,
5:52
a person might need to
use a phone one handed.
5:55
And yes, it could be because
of a permanent disability,
5:58
a person who only has one arm.
6:01
It could also be a temporary disability,
oops, I broke my arm,
6:03
it's in a cast, in a sling for
the next two months, I'm left-handed.
6:07
Or a situational disability,
I am holding a baby,
6:12
eventually I will put the baby down,
but in the meantime I
6:16
need to attend to this baby and
solve some sort of task with my free hand.
6:20
When you look at it this way,
disability really affects all of us, and
6:24
we all need accessible products.
6:29
So I've given you
hopefully a long list of positives,
6:32
why do we need accessible design,
and it's the right thing to do.
6:37
It's unfair to not allow
everyone access to what we make.
6:43
Hopefully that's why you're here.
6:47
Hopefully you're interested in accessible
designs because it's the right
6:49
thing to do.
6:53
It's also worth mentioning that there
are a lot of negatives if you don't get
6:54
it right.
6:59
This first lawsuit I have up on
the screen is particularly famous.
6:59
Domino's Pizza fought the Americans
with Disability Act all the way to
7:04
the Supreme Court, and thankfully lost.
7:08
But there's a whole bunch of other famous
accessibility lawsuits worth studying.
7:11
I mentioned with Americans,
the Americans with Disabilities Act.
7:18
Those of you in America should know Title
3 has been used to state that websites and
7:22
apps are places of public accommodation.
7:28
So in other words, it's treated the same
as designing a building with no wheelchair
7:30
ramp, it's considered discriminatory
against people with disabilities.
7:36
Also, I should mention section 508.
7:40
This states that federal agencies need
to make their electronic information
7:44
accessible to people with disabilities.
7:49
And if you're thinking, well,
I don't work for the federal government,
7:52
this also includes everyone that does
business with the federal government,
7:56
so, actually a lot of organizations.
8:00
If you're not in America,
8:02
we'll talk about the more globally
recognized rules in a moment.
8:04
Also consider the cost of retrofitting for
accessibility.
8:09
When I say retrofitting, I mean, rather
than getting it right the first time,
8:14
somebody sues you, and
then you have to go back and make fixes.
8:19
An organisation called Australia's Centre
for Inclusive Design did a study,
8:23
and they estimated that it can
cost as much as 10,000 times
8:29
the cost of just working it into
your process the first, okay?
8:34
Despite knowing all this,
stuff like this keeps happening.
8:39
You may have seen this,
this was only last month.
8:42
Twitter, one of the tech giants,
rolls out a new feature, audio tweets.
8:45
Okay, I don't wanna type out my tweet,
or I'm somewhere where I can't, instead,
8:50
I'll just record my voice saying a tweet.
Sounds neat, right?
8:55
Except, they did not provide captions.
8:58
Okay, so who couldn't access this content?
9:02
Well, deaf and hard of hearing users,
also users with ADHD
9:04
and auditory processing disorder,
depend on those captions.
9:09
Users in a noisy room, well,
I can't hear my phone right now,
9:15
how can I listen to this audio?
9:18
Non-native speakers, perhaps I hear it,
but I'm not catching all the words.
9:21
Twitter let all these audiences down.
Plus the black and white circle
9:26
that you see on the right side of the
screen, that was the user's profile image.
9:32
It was blinking in time
with the spoken text,
9:38
and at times it was blinking more
rapidly than three times per second,
9:41
which is above the threshold
of what could set off seizures.
9:45
So users from the seizures were
also at risk from the speech.
9:49
And you ask, how does this happen in 2020?
9:54
How do we get better?
One of the key points
9:59
of my talk here is the idea
that empathy isn't enough.
10:04
When I built my script draft for
Accessibility for UX Designers, and
10:08
it changed a lot after the draft, but
when I put it together, I did my research.
10:13
I talked to some other
people I knew in the field.
10:19
But I was primarily driven by two things.
10:22
One is the WCAG,
if you don't know these, you should,
10:25
Web Content Accessibility Guidelines.
10:29
These are the universal
standards that I mentioned.
10:31
So it doesn't matter if
you're in America or not.
10:34
When you are building an app or
product or website,
10:38
you can judge what you've built against
the Web Content Accessibility Guidelines.
10:41
If you've met these guidelines,
you probably have an accessible product,
10:47
although it's still important to test
this with actual disabled users.
10:52
If you haven't met the guidelines,
then your work is not complete.
10:57
So I used the WCAG,
I also used my own empathy for
11:02
disabled users, and that's natural.
11:06
Every UX program will stress
the importance of empathy.
11:09
You think about design deliverables, like
personas that are rooted in empathy for
11:13
users with experiences
different than your own.
11:19
I'm not here to say that's a bad thing.
11:23
Empathy belongs in every
UX designer's toolkit.
11:24
But I don't depend on
assistive technology.
11:29
And there are limits
to my own imagination.
11:33
I can try imagining what it would
be like to be blind or deaf or
11:36
have a motor skills disability.
11:41
And I could even test out, say,
a screen reader on my own,
11:43
a device that would read out
web content to a blind user.
11:48
That's still no substitute for
11:53
asking disabled users about
their own experiences.
11:55
And so that's what I did.
11:59
I have three users on the screen here,
their LinkedIn profiles are shown.
12:01
They would love to connect with
you just as much as I would,
12:07
Jennifer Nordell,
Ricardo Rodriguez and Nina Tran.
12:11
Jennifer, she's been getting the sort of
shouts all week during this conference.
12:14
She's awesome, I'm lucky to work with her.
12:20
She's a student success
specialist here at Treehouse,
12:22
as well as I've had two other reviewers
who looked over my script for
12:26
language and accuracy of recommendations.
12:31
I didn't want to speak for these users,
so I had them craft their own bio.
12:35
Apologies for reading for a moment.
12:40
My name is Jennifer Nordell,
and I am disabled.
12:43
When I was 18,
12:47
I was involved in a car accident that
left me with a traumatic brain injury.
12:48
Among other things, this left me
sensitive to light, sound and motion.
12:52
I just don't see the world the way
I did before the accident.
12:57
I have auditory processing disorder.
13:00
I can hear just fine, but
I can't interpret speech very well.
13:03
It's as if I took your spoken sentence and
threw it in a blender.
13:07
Because of this, I am heavily
dependent upon closed captioning and
13:11
transcripts to learn through video.
13:15
And because of my sensitivity to light and
motion,
13:18
I typically enable the reduced motion
accessibility option on my iPhone.
13:22
So like I said, I work with Jennifer and
I'm lucky to do so.
13:27
The next two reviewers, I met them
both after a conference like this one.
13:32
It was an in-person conference,
early in 2020, called Convey UX.
13:37
And we were at a talk called
Inclusive Research by Lauren Isaacson.
13:43
Ricardo Rodriguez was born
several months premature,
13:49
and as a result, he experienced
both physical and cognitive delays,
13:52
and was unable to walk or
speak until he was 11 years old.
13:57
He has successfully completed high school,
and works to advocate for
14:05
disabled youth in foster care,
along with people with disabilities.
14:10
Despite being affected by several
disabilities, such as limited vision and
14:14
motor skills, today Ricardo
currently manages the Journeymen of
14:19
San Diego's website as a freelance web
developer through the use of assistive
14:23
technology such as magnification,
high contrast mode, and text to speech.
14:28
As a benefit of being born severely
disabled, Ricardo possesses insights
14:33
on various disabilities, and works on
using that experience to help instill
14:38
the importance of making products and
services accessible to others.
14:44
And finally, Nina Tran,
who I also met at Convey UX.
14:49
Nina says I'm from Seattle, Washington.
14:53
I'm a senior at the University of
Washington, and will be graduating with
14:56
a bachelor's degree in disability
studies and informatics next spring.
15:01
My passion is accessibility
with disability justice.
15:05
I care about how to make everything
inclusive, accessible, and
15:08
equitable in a holistic way
because of my life experiences and
15:13
struggles navigating
the world as a deaf person.
15:17
So I want to share one of my favorite
quotes by Mia Mingus with you all.
15:20
I imagine a world where our organizing and
activism is less segregated,
15:25
where our movements and
communities are accessible,
15:29
and don't participate in the isolation
of disabled communities.
15:33
I imagine a place where we fight for
whole and connected people,
15:37
families, and communities.
15:41
All right, together,
15:44
these three reviewers challenged what I
thought I knew about accessible design.
15:45
And that's what I'm
here to speak of today.
15:51
I don't really have time to break down
all of the WCAG recommendations, but
15:53
you should check them out.
15:58
I want to cover what I learned
from these three kind reviewers,
15:59
starting with some definitions.
16:04
You've probably heard the terms
accessible design, inclusive design,
16:07
universal design.
16:11
They've been talked about all week
here at the Treehouse Festival.
16:12
When I started my script, both Ricardo and
16:17
Nina called me out because I
wasn't using them that carefully.
16:20
I think I was confusing the definitions.
16:24
But there is a distinction, and
they shouldn't be used interchangeably.
16:26
Accessible design means specifically
considering the needs of users
16:31
with disabilities.
16:36
Have you tested whether your product
can be used by disabled users?
16:38
If not, or if you don't know,
you still have work to do.
16:42
Now, accessible design sometimes has,
or I should say often has
16:47
universal benefits, and
this is known as the curb cut effect.
16:52
Once upon a time, elevated sidewalks
did not have cuts in them.
16:57
[INAUDIBLE] could not navigate sidewalks.
17:02
Now, this was done specifically
with accessibility in mind.
17:05
However, it turns out they
also make life easier for
17:10
pedestrians pushing strollers or
bicycles, wheeling a lot of luggage,
17:14
using crutches,
even distracted by a mobile device.
17:20
Inclusive design means including people
who might otherwise be marginalized.
17:24
Inclusive design draws on the full
range of human diversity.
17:30
This is something that
we value at Treehouse.
17:33
Part of our mission is reflect
the diversity of the USA.
17:36
I've mentioned that disabled
people are a substantial minority.
17:41
But inclusive design also aims at
anyone who is historically underserved,
17:46
which could mean women,
ethnic minorities, lesbian,
17:52
gay, bisexual, trans, queer, plus, etc.
17:57
Universal design, described by Ron Mace,
one of its founders,
18:01
as usable by all people to the greatest
extent possible without the need for
18:06
adaptation or specialized design.
18:11
Sounds great, right?
18:14
If you've created a simple, intuitive
product that works for all audiences,
18:15
children, the elderly, people of different
body sizes, abilities, and needs.
18:20
Sounds amazing, that's universal design.
18:26
However, the participation of
excluded communities and needs of
18:28
disabled users must be prioritized
over a one size fits all approach.
18:33
Is your product truly universal, or
18:38
have you excluded perspectives
different than your own?
18:41
All right, language, very important
when we talk about disability.
18:50
I've encountered a few talks lately
where discussions have come up,
18:55
identity-first language
versus person-first language.
19:00
Person-first as it sounds puts
person-first in the description,
19:04
person with disabilities,
person with autism.
19:08
Whereas identity-first puts,
again, as it sounds,
19:12
the description first,
disabled person, autistic person.
19:16
Now, I've read the recommendation a lot
to stick to person-first language.
19:21
But Jennifer brought up
a really powerful question.
19:27
She said that people with
invisible disabilities might favor
19:30
identity-first language.
19:35
She wanted it to be known that not every
disability is obvious when you look at
19:37
a person.
19:41
And sometimes, she's encountered
people who were resistant to believing
19:42
her that she had a disability.
19:47
And she favors identity-first language for
that reason.
19:49
So when including disabled
users in your research,
19:53
excuse me, don't make an assumption.
19:57
Ask them how they describe themselves and
their abilities.
20:00
All right, I mentioned that I
met Nina Tran at Convey UX after
20:06
a talk called Inclusive Research.
20:11
And I was particularly drawn
to her by the questions and
20:14
statements that she made in
the question and answer section after.
20:18
She described deafness as
a language minority, and
20:23
I've never really heard this term.
20:25
Nina identifies as deaf, not disabled.
20:27
She considers herself a part
of a language minority.
20:30
If I spoke ASL, or American Sign Language,
we would have no trouble communicating.
20:33
She also noted in reviewing my script
not to use the term hearing impaired,
20:40
it was not communicated, excuse me,
it was not created by the deaf community.
20:45
It is not embraced by the deaf community,
and
20:50
the term impaired suggests a lack or
a negative.
20:54
So we will use deaf or hard of hearing,
except as you can hopefully
20:57
see at the bottom of my slide,
I have little d deaf, big D deaf.
21:02
I didn't know the difference between those
either, but again I had Nina's help.
21:07
Big D deaf describes someone who is
actively engaged within the deaf
21:12
community, and most likely
communicates using sign language.
21:17
Little d deaf, this person might
be able to communicate orally,
21:21
and doesn't have a strong
connection with the deaf community.
21:25
And hard of hearing describes
mild to moderate hearing loss.
21:30
The source of this information, which
is linked in my slide, Genna Matheson.
21:33
She ends with if you're unsure about
how someone identifies themselves,
21:38
just ask, and that's going to
be a recurring theme today.
21:44
Interaction etiquette.
21:49
I mentioned this talk that I went to
by Lauren Isaacson multiple times, and
21:50
I actually just borrowed one of her
slides because it's so important.
21:55
When you involve a disabled
person in your research,
21:59
you need to make some accommodations.
22:02
And I also highlight this slide because I
got it wrong and I want to own up to it.
22:05
I had just seen the slide and bullet
point number one says speak directly to
22:11
the person with the disability,
not their interpreter or their companion.
22:16
Then I met Nina and what did I do,
but instantly, my head was drawn to
22:22
the source of the sound,
which was her sign language interpreter,
22:26
which means that I was not looking
Nina in the eye when she first spoke.
22:31
All right, I messed up and I need to get
better, and that's why this slide is so
22:35
important.
22:40
All right, plain language, I would
say I've been an evangelist of plain
22:46
language ever since I read
the chapter Design for Scanning,
22:51
Not Reading,
in Steve Krug's Don't Make Me Think.
22:55
If you're studying design,
check out that book for sure.
22:58
An excellent free resource is
a federal government website called
23:03
plainlanguage.gov, and
I have samples from that site right here.
23:08
And you can see that really any
user would much rather read
23:13
the column on the right than the left.
23:17
In terms of tips for plain language and
they're all over this website,
23:20
keep your reading level appropriate.
23:25
Don't speak at a higher reading
level than you need to.
23:28
Use short paragraphs,
23:32
long paragraphs like the text on
the left is visually intimidating.
23:34
Bulleted lists,
I look at the text on the right and
23:40
the important stuff sticks out to me.
23:43
After a flood, I need to watch out for
the air, damp building materials, great,
23:46
that's much more meaningful than me having
to hunt through that text to find it.
23:51
Keep it conversational, at Treehouse,
23:57
we have to practice what we
deliver out loud all the time.
24:00
Do the same with your writing.
24:04
If it sounds clunky, maybe it is,
maybe it needs to be reworked.
24:05
Plain language has universal benefits, but
24:10
it's particularly important to those with
cognitive disabilities and dementia.
24:13
All right interface design.
24:20
Now, the WC in WCAG is
a little misleading, right?
24:23
Web Content Accessibility Guidelines,
web content suggests websites and
24:29
apps, but, and
Ricardo pointed this out to me,
24:34
all digital interfaces
are required to be accessible.
24:38
Some of you have perhaps
encountered a Redbox DVD rental
24:42
kiosk at a pharmacy or a grocery store.
24:47
In 2014,
they agreed to a $1.2 million settlement
24:50
because they hadn't made these
accessible to blind users.
24:55
I've heard rumors,
the last, it's version 2.1,
25:00
the last update to the WCAG
came in September, 2018.
25:04
I've heard rumors that, next time, they're
gonna rename it to make this clearer,
25:08
but I don't know if that's true or not.
25:13
Interface elements,
25:16
this is another one that I'd say
I've been a long time evangelist of.
25:17
Picture yourself using a mobile device,
a touchscreen, and
25:22
we can all picture ourselves struggling
to tap something on the screen
25:26
because the interface elements were
either too small or too close together.
25:31
The WCAG says your minimum target size
should be a minimum of 44 pixels square,
25:36
and that's a great recommendation.
25:42
However, Jennifer pointed out that I
had simply misread the recommendations.
25:45
It doesn't actually say
touch interfaces anywhere.
25:52
So while you should get your
touch interfaces correct,
25:55
it also applies to mouse targets.
26:00
Most of you will recognize
what I have on screen here,
26:03
that if you've ever opened
an application window on a Mac,
26:07
there's a red close, a yellow minimize,
and a green maximize button.
26:12
But these are only 16 pixels in size,
which means Jennifer can't use them.
26:17
Anyone who has trouble making
precise movements with a mouse
26:23
is going to find that these
are too small to click.
26:28
So that means,
it's not only touch targets, and
26:32
it also means that Apple is not following
its own recommendation in this case.
26:35
Now, I've built and
designed a lot of websites, and
26:43
I've tested a lot of them for
screen readers,
26:47
a device that reads content
aloud to a blind user.
26:50
And you'll hear these
recommendations all the time.
26:54
Provide alt descriptions for your image.
26:57
Here's a woman playing basketball, right?
27:02
Well, I will describe this
woman playing basketball,
27:05
throwing the ball into the hoop.
27:08
Now someone who can't see
the image will understand it.
27:10
However, I have not tested enough for
screen magnifiers, and
27:14
I feel like this gets overlooked.
27:18
There's a graphic on the screen right now,
indicating a site called
27:20
Bureau of Internet Accessibility and
what it looks like zoomed in.
27:25
Many low vision users like
Ricardo rely on screen
27:29
magnifiers used to enlarge web content.
27:33
Accessible design for
screen magnifiers means your
27:37
user shouldn't have to scroll
horizontally to read your text or
27:41
struggle to use your navigation,
even when zoomed in at 200%.
27:45
I know I'm guilty of not testing this
enough, but having met Ricardo and
27:50
observed him using his phone and
having gone through these slides,
27:55
I don't intend to make this
mistake in the future.
28:00
Keyboard navigation, not every user
is capable of using a mouse or
28:09
a touchscreen, and
28:13
it's possible that they will be navigating
your site purely with a keyboard.
28:14
If that's the case,
focus indicators are incredibly important.
28:20
One of the more maddening experiences
I've had as a college teacher is as
28:25
recently as 2018, I inherited
another instructor's curriculum.
28:29
I want to say it was a JavaScript course,
who recommended how to use
28:34
CSS to turn focus indicators off because
they're distracting. Absolutely not!
28:39
Picture yourself holding a mouse,
28:46
trying to select items on the screen,
and you can't see the cursor.
28:49
How would you know what you were
selecting, what you were doing?
28:54
This would be a similar situation if you
were trying to navigate with the keyboard
28:57
and focus indicators, which show
the currently selected element was hidden.
29:03
A light blue indicator is used by default,
it's pretty thin.
29:09
I recommend making it more prominent.
29:14
Jennifer pointed out that you really need
to combine principles to get this right.
29:18
I haven't really talked about
color contrast anywhere,
29:23
it's actually one of the more
famous WCAG principles.
29:26
Make sure that your foreground and
background color have enough contrast.
29:29
Here's a case where hm, didn't really
work out with the focus indicators.
29:36
Jennifer sent me two screenshots
trying to navigate Apple's
29:40
accessibility options in light mode.
29:45
Look at that lovely focus indicator.
29:48
It's bold, and it's highlighted,
Enable Sticky Keys, plenty of contrast.
29:51
Then I get into dark mode,
I have no idea what's highlighted now.
29:56
Jennifer didn't know either, and therefore
she can't use dark mode on her Mac.
30:01
I'm not picking on Apple, it may look like
I am from these last couple of options.
30:06
Apple actually has a tremendous
commitment to accessibility, but
30:12
like anyone,
they always have more to learn.
30:17
Keyboard traps.
30:20
I knew about this, I just didn't know
the term. As developers, make
30:23
sure you test (and test some more)
your product using only a keyboard,
30:26
and make sure your cursor
doesn't get stuck anywhere.
30:31
And if your application
provides keyboard shortcuts,
30:35
that's tremendously helpful for
your keyboard audience.
30:40
But make sure that you make
the shortcuts easy to learn, and
30:44
the documentation easy to find.
30:49
And there you go,
Apple has actually done this as well.
30:51
I'm looking at Mac accessibility shortcuts
from their accessibility website.
30:53
Forms.
31:00
This is a place where lots goes wrong.
31:01
Reduced cognitive load.
31:04
I think this is your big test of,
am I building a successful form?
31:07
Jamie Rene Williams spoke earlier
this week in a talk called,
31:11
day in the life of the UX designer,
and I noticed that phrase,
31:16
I need to work every day
to reduce cognitive load.
31:20
So we have some bullet points on
the screen, minimize questions per screen,
31:24
making sure the purpose of each
part of the form is obvious,
31:29
clearly label form inputs.
31:33
Again, this tremendously benefits
your audience with cognitive
31:35
disabilities or dementia.
31:40
And Ricardo wanted to stress that,
it's much more important that you
31:42
be specific and accurate with your labels
than that you provide short text labels.
31:47
Designers love short text labels,
they're easy to fit in mobile.
31:53
But it's much more important
people can understand your form.
31:57
Avoid unnecessary questions.
32:03
This will shorten your form.
32:05
Great, we just said minimize
questions per screen.
32:07
But also one potential
source of frustration
32:10
out there is questions about gender.
32:14
If you have an extremely compelling
reason to ask about gender,
32:17
maybe it's a demographics question,
32:24
then you're going to need to provide
either plenty of response options,
32:28
or an input where a user
can type of their own.
32:35
And you need to assure the user
their information will be private,
32:40
anonymous, and safe.
32:43
Otherwise you run the risk of
excluding non-binary users or
32:45
people who just don't feel
comfortable answering that question.
32:49
Making the required fields obvious,
as I said,
32:54
one key to making a successful form,
is reducing cognitive load.
32:58
I would say the other is minimize errors,
make sure that users know what is obvious.
33:03
And I built a food delivery form as my
demo for accessibility for UX designers.
33:09
Careful with what you make required.
33:16
If you are a phone, excuse me,
a food delivery service,
33:18
perfectly reasonable to ask for
a phone number, but
33:23
if you require the phone number, you might
be excluding deaf or nonverbal users.
33:26
So think about,
can you accept an alternate contact?
33:32
Active versus inactive links.
33:36
So I had a great discussion with
Hope Armstrong, one of my colleagues,
33:39
those of you who study UX at Treehouse,
you know her well.
33:44
The WCAG doesn't actually enforce
making your inactive links
33:48
the links to come that you can't click,
yet have a high contrast.
33:53
But does that mean you shouldn't do it?
33:59
Don't your low vision users deserve
to know what's coming on your form?
34:01
Placeholder text, the practice on
the left is a terrible practice,
34:08
using placeholders to
label your form input.
34:14
It seems like a space saver, but
as soon as the user starts typing,
34:17
they disappear, and then you can't
remember what it was filling out.
34:21
Placeholders are also a contrast
challenge, make them to light,
34:26
low vision users can't see them, too dark
and they look like pre-filled form field.
34:30
So, stay away from them wherever you can.
34:36
You might say,
34:39
couldn't I use placeholders to suggest
the formatting of a phone number?
34:40
You could, but
then if the user starts typing, and
34:45
they get distracted,
a phone call comes in.
34:49
Or again they have a cognitive
disability or dementia,
34:53
how are they supposed to
remember that format?
34:56
Developers, I recommend input
masks which just shapes the data
35:00
to the correct format as
the user begins typing.
35:04
Okay, I believe this is my last category,
but this is a dear one,
35:09
to Treehouse: videos.
35:13
Avoid sounds that autoplay. The WCAG
doesn't say this, the WCAG just says,
35:15
provide a mechanism for
pausing the sound or lowering the volume.
35:21
And Jennifer, Nina, and
Ricardo, all said, no,
35:26
just don't make them autoplay for
three different reasons, actually.
35:30
Ricardo said, it's tough to use a screen
reader while the video is autoplaying,
35:35
how can you listen to the screen reader?
35:39
Jennifer, who is sensitive to sound and
motion says she sometimes
35:42
gets uncomfortable or
even ill by an unexpected sound.
35:46
And Nina pointed out that often
users will want to make adjustments
35:50
to the captions before hitting play.
35:55
So, I would say, go beyond the WCAG
in this case, don't autoplay videos.
35:57
If you're curious how the browser will
handle it by default, this is an odd one.
36:03
Firefox in their mission
statement prizes user control.
36:09
Firefox will not autoplay videos, and
36:14
you actually as a user have to go
change that setting, if you care to.
36:16
Chrome, not only autoplays videos,
if you're on a site where you've
36:21
played videos before,
they will continue the autoplay, but
36:26
you as a user don't have the option
anymore to turn that off.
36:30
So, developers, don't depend on
the browser to handle this.
36:34
Captions: not just for deaf and
hard of hearing audiences.
36:38
I'm sure a ton of you watch Treehouse's
videos with the captions on, I always do.
36:44
They're helpful in a noisy environment,
36:50
they're helpful to understand difficult
vocabulary, they're helpful for focus.
36:52
Jennifer pointed out that also
the WCAG captions guideline doesn't
36:57
mention auditory processing disorder,
I didn't know about this.
37:02
It's not about hearing but
about how the brain understands speech.
37:06
Jennifer said in her bio,
she can hear you just fine, but
37:11
distinguishing sounds sometimes
they get scrambled.
37:15
And this actually affects 5%
of school-aged children, so
37:19
not an insignificant [INAUDIBLE].
37:23
When designing captions,
37:26
fortunately Treehouse had a lot
of good practices in place.
37:28
The white text on a black
background provides great contrast.
37:32
No more than two lines of text at once.
37:37
And Treehouse's captions are draggable,
you can move them out of the way if
37:40
they're covering something
critical on screen.
37:45
Two changes I did have to make when I got
here, one was implementing an instructor
37:48
led caption review, because no service
will ever provide 100% accuracy,
37:54
and key information sometimes
gets mistranslated.
37:59
And also Nina pointed out I need to
work hard to identify who is speaking.
38:03
Here's a screenshot from my
video with three speakers.
38:09
Mark Sutton is demonstrating
how to use a screen reader,
38:14
then the screen reader begins speaking.
38:17
And then I resumes speaking.
38:20
Our caption service here at Treehouse,
I believe it's called Cielo 24,
38:24
does not identify speakers by default, and
38:29
Nina really struggled with
how to use our videos.
38:33
Okay, I will leave you with a list
of resources, there are plenty more,
38:36
but definitely should know
the A11Y project, Deque, and WebAIM,
38:43
as well as some potential resources for
further reading.
38:49
These get updated all the time.
38:54
And I think I'm ready for questions.
38:56
Do we need to know advanced coding to
make accessible digital products?
39:04
That's a really good question.
39:09
A lot of (oops, just closed Slack, okay)
39:11
a lot of accessibility actually comes
when you're learning HTML basics.
39:14
So that's the best way to
get accessibility, right?
39:19
If you write semantic HTML carefully,
there's an article,
39:22
there's an author named Shay Howe,
that I look at his articles a lot,
39:27
S-h-a-y H-o-w-e, how to use
semantic HTML meaningfully and why.
39:33
If you get the basics of HTML right,
you are very well on your way.
39:39
The other key part is, once you do get
into advanced JavaScript, you do have
39:44
to be cautious, or sometimes JavaScript
will update more content on the screen.
39:49
And the browser isn't built to notify
users of assistive technology,
39:55
but something changed on
the screen using JavaScript.
40:00
So there are some advanced features
as well, but I would say definitely.
40:04
Get to know semantic HTML inside out.
40:08
What web and UX design would you
like to see more websites roll out?
40:13
What are the most common issues you see?
40:17
Hmm, that's an interesting question.
40:19
I think really what I want to
see is more all members of
40:29
the team being equally
passionate about accessibility.
40:34
I mentioned that I am attempting
to audit Treehouse's product.
40:40
But I should mention,
it's not just my job.
40:45
And if it were just my job,
it would never go right.
40:48
I'm also here to educate my
team members,and
40:52
I've had all sorts of team members since
I've been here fix things on their own.
40:55
Oh, I noticed the contrast on this
animation I just built was off and
41:01
I fixed it.
41:05
So this is what I want to see is equal
passion from every member of the team.
41:06
How do you promote accessibility in
your workspace when they have no
41:14
accessibility background guidelines?
41:18
Well, you already heard a talk
from Michelle Zohlman this morning,
41:21
she's amazing.
41:26
And yeah, I think the types of conference
talks we've had at the festival,
41:27
we're wanting to do similar
things at Treehouse.
41:34
I think that inclusiveness and
41:39
diversity training is very
important no matter where you work.
41:41
I think accessibility
training is also important.
41:45
Where can we gain skills accreditation
training for WCAG or accessibility?
41:52
Well in terms of learnings,
I think the places
41:57
on the screen are a great place to start.
42:03
In terms of accreditation,
I honestly don't know.
42:07
I think Nielsen Norman Group is
potentially a good place to go for that.
42:10
I do have some folks, some former
colleagues and former students of mine
42:14
who have actually gotten accreditation
from Nielsen Norman Group.
42:19
And since they have a heavy
emphasis on accessibility,
42:24
that's potentially a way
to get accreditation.
42:28
I'll say it, I don't have any
accreditation on it, I haven't gone
42:32
through the Nielsen Norman conference,
but I've heard it's really cool.
42:38
What are some accessibility issues and
trends in AR and VR?
42:45
If you find out the answer, I've asked
you to connect with me on LinkedIn.
42:50
If you find out the answer, come back and
I would love to take your course on it.
42:54
I admit I don't know
anything about AR or VR.
42:59
I would have to imagine there
are plenty of accessibility issues.
43:04
I don't think the WCAG right now is
really built to handle those things.
43:08
So yeah, it's an excellent question and
I'm really glad you're asking that,
43:13
and if more people start asking it
hopefully accessibility will emerge
43:19
faster with AR and VR than it did
with web design and development.
43:25
But that's a good question, I don't know.
43:30
How has your approach to
accessibility changed over time?
43:34
I honestly think a big catalyst
was the launch of HTML5,
43:39
which was, I can't remember,
the mid 2000s or something.
43:43
Before we had semantic HTML,
I mentioned already using your HTML tags
43:48
descriptively to accurately describe
what's going on in your page.
43:54
We didn't use to have this, and
a lot of websites were built in Flash.
44:00
I was a Flash developer for
a long time in the mid 2000s.
44:05
Those were not accessible in any way,
shape, or form.
44:09
So once HTML5 came out and I said, really,
I can actually make this usable for
44:13
broader audiences,
that sparked my interest.
44:19
But as this talk hopefully indicates,
I'm constantly trying to learn new things.
44:23
And my knowledge is nowhere near complete
as the AR VR question just indicated.
44:30
What are some of the tools available to
test the accessibility of a website or
44:38
web application?
44:43
Great question, Google Lighthouse,
which you will,
44:45
I believe it's found built into your
Google browser when you do Inspect.
44:49
You have a bunch of options there.
44:55
Google Lighthouse will audit your
product for accessibility and
44:57
also performance,
how fast is this thing loading.
45:04
There's also a plugin called Axe, A-X-E,
I believe it's made by the organization Deque.
45:09
Axe is great for websites or
apps that use a lot of
45:15
JavaScript because Axe you
can rerun it every time.
45:19
JavaScript runs and
check the accessibility again.
45:24
So those are two great tools, and
I'm glad you asked that question.
45:27
I will close with accessibility audits.
45:31
They're awesome.
45:35
HTML5.validator.nu, that's the third one.
45:36
I use that a lot just to check
the validity of my HTML itself.
45:41
Those only catch I think less than half
of the potential issues you can have.
45:46
So do run those audits, they're amazing,
but it's not a substitute for
45:52
user testing.
45:57
Question on the forums on
avoiding unnecessary questions.
46:01
How do you draw the line for gathering
gender and demographic information?
46:05
I think most of the time, if you sit and
ask yourself this question,
46:10
and it really could
apply to phone numbers,
46:16
email addresses,
it could apply to any question.
46:20
Just sit and think to yourself or
discuss with your organization,
46:24
do I really need this information?
46:29
My default is kind of no.
46:31
And then I have to convince myself,
46:33
here are really strong
reasons that we need this.
46:36
Because I think every
user objects in some way.
46:40
Phone numbers,
why did they need this phone number?
46:43
I don't want whichever organization
calling me, that's weird.
46:47
So we've all felt that
way designing forms.
46:51
Gender, yeah,
I think you would really know
46:56
that your organization depends
on having this information.
46:59
And if that's not the case, then great,
you've shortened your form and
47:04
you've also avoided making
people feel uncomfortable.
47:09
There are plenty of cases where
people look to the form and
47:12
they saw two radio buttons, male, female.
47:16
This doesn't apply to me, and
they couldn't complete the form.
47:20
So we wanna still clear of that.
47:23
What are your suggestions for
someone working on a portfolio project and
47:28
wants to showcase
an accessibility case study?
47:32
What should you include?
47:35
That's an excellent question.
47:37
A couple of speakers have actually
mentioned this week the idea of
47:39
an accomplishment journal, each week write
down what you accomplished this week.
47:43
And then when you build your portfolio or
resume,
47:48
you can highlight that information.
47:51
I think it would depend on
the accessibility study itself.
47:53
One possibility could be
you arrived somewhere and
47:57
took a website that didn't have very
good accessibility and you fixed it up.
48:01
And that's probably a reasonably
easy thing to document,
48:07
you could just kind of do a before and
after, all right.
48:10
Before our videos lacked captions, after
not only do our videos have captions,
48:14
but here's all the things I did to
ensure that they were useful captions.
48:20
If you're starting a website from
scratch and you just wanna make
48:26
sure that it's accessible, I would
say include that in your case study.
48:31
A lot of portfolios say
here's the finished products,
48:36
now let me back up and this was my
planning, this was my sketching.
48:40
You could have a little section for
accessibility and
48:45
what I learned on the project.
48:49
I actually didn't realize that screen
magnifiers were important, but
48:51
I showed my site to Ricardo and
he couldn't use it.
48:56
Here were the fixes I made.
48:59
Can you explain the A,
AA, AAA ranking system?
49:02
Very good question.
49:06
For those of you who don't get
the context of that question,
49:07
it's in my course that I made for
Treehouse but it wasn't in any slides.
49:11
(Sorry, plugging in.)
49:15
So the tag recommendations
are all A recommendations,
49:17
which means really simple to meet.
49:22
An example of a single A recommendation
is sufficient color contrast or
49:26
alt descriptions for your image,
49:32
just like it should be no effort
at all to get this right.
49:34
AA would be a little bit
tougher to implement, but
49:39
you still definitely need
to have these things.
49:44
I feel like most of what applies to
video captions actually falls under AA.
49:48
And it might require an external
service and it might require
49:56
spending a little bit of money,
but it's absolutely essential.
50:01
I say if you are not at AA with your
product, Your work is definitely not done.
50:07
AAA, Microsoft famously is committed
to making all of their products AAA.
50:12
Just like Apple, but it doesn't mean
that they never get anything wrong.
50:21
I think all of us make mistakes and
we owm up and try to fix them.
50:24
AAA, an example actually
is the captions that we
50:30
are providing for
this talk, captioning for
50:35
a live presentation rather
than pre-recorded video,
50:39
that's even tougher and
it qualifies as AAA.
50:44
The WCAG, it doesn't actually
require AAA, but go for
50:49
it whenever you can.
50:54
I mean, again, I think both Nina and
Jennifer couldn't make use
50:55
of this presentation had Treehouse
not met the AAA requirements.
51:00
So, whenever it is within
your means to do so,
51:06
I say yes, go above and
beyond, get that AAA mark.
51:10
Do you recommend using animation or
staying away from it,
51:15
from an accessibility standpoint?
51:19
That's a really good question and
it's led to some conversations
51:21
with our animator Michael Myers,
who's awesome and
51:26
who has really embraced making
his animations more accessible.
51:30
Definitely one of the things
to consider is blinking.
51:35
If something is blinking more
than three times per second,
51:41
you absolutely need to
stay away from that.
51:44
And I already mentioned that
Twitter got that wrong.
51:47
Slack has a great accessibility
feature that I hope gets embraced in
51:50
a lot more places.
51:55
If you go into your Slack preferences,
there's an accessibility toolbar.
51:56
And there's a checkbox that
says disable animations and
52:01
GIFs or something like that.
52:06
But basically, a lot of users actually
can't concentrate with animation going.
52:08
Or like Jennifer said,
the motion might make her kinda dizzy.
52:14
So if you can provide that kind of
feature in an app, reduce motion,
52:18
Jennifer mentioned Apple has that,
that's amazing.
52:23
So it's a really good question.
52:27
I would just say,
be cautious with animation and
52:30
interview some disabled users and
get their input.
52:35
When is it appropriate to
image-caption on a common
52:40
high traffic page like a landing page?
52:44
I'm not entirely sure I
understand the question.
52:47
All descriptions which describe
the images to users using screen readers,
52:52
they are required unless
the image is totally decorative.
52:59
If you add an image of an orange gradient
and it adds no meaning to the page,
53:04
then you can leave the whole description
blank because somebody on a screen
53:08
reader doesn't need to know about that.
53:13
But that's pretty rare I would say,
53:16
a meaningful description
is helpful 99% of the time.
53:19
It also has the side benefit of SEO,
images that are described well,
53:23
do better in the search engines
than images that don't.
53:28
In terms of using the figure elements
like figure and figcaption in HTML.
53:33
Those are great tools,
I'm not entirely sure how
53:40
figcaption in particular
affects accessibility
53:45
other than it does communicate
the role of what this
53:50
thing is which is always helpful to
your assistive technology users, okay.
53:56
All right, thank you, Kayleen.
54:04
Thank you to everyone.
54:05
Yep, we're done here.
54:06
Thanks for joining me and
definitely connect with me on LinkedIn.
54:09
And stick around, I think we have
another cool chat coming at 11.
54:13
You need to sign up for Treehouse in order to download course files.
Sign up