How to be an a11y - Creating Accessible React Apps

Neha Nivedita

Recorded at JSConf US 2018

Get notified about Neha Nivedita

Sign up to a email when Neha Nivedita publishes a new video

I am trying to produce music I think it
took me two years to produce two tracks
one of them is listenable okay so we are
here today and I'm going to talk about
how we can be allies by creating
accessible react apps my name is Neha
nivedita I'm a software engineer with
node experts which is a global
consulting firm based out of New Delhi
that creates custom web apps for clients
big and small on nodejs react Express
MongoDB you know the whole shebang so
let's begin oh yeah i'm also on twitter
at nick nevada the few one of let's take
a look at what we'll be discussing about
today could I have the confidence
monitor please
sorry about this I'll just continue
speaking off of the screen so we will
talk about what accessibility is why we
need it what kind of problems we face
when we try to implement things in gs
frameworks what accessibility issues
occur there
how react works and how we can make our
react apps accessible then we'll spend a
little bit of trying talking about the
importance of colors and react
accessibility tools and unit testing in
those before we proceed further on this
I just want to point out that this talk
is meant to be a primer only it's
basically an amalgamation of what I have
learnt so far in a short amount of time
about accessibility in react it should
help guide you on your way if you are
trying to do similar things in react it
may not be perfect none of us are but I
hope it helps you oh and one more thing
how many of us were here yesterday for
just insoles talk the one with seven 25
slides in 30 minutes I just want to say
that it makes me really happy to see
have live captioning and an amazing team
of people at white-coat captioning would
do that I just want to have a big round
of applause for our awesome heroes who
have been working very hard to make sure
that this conference is accessible and
on top of that you know dealing with
just ensures brilliant brutal talk okay
proceeding from here what's
accessibility and why do we need it
everyone should be able to access any
service or product regardless of their
ability or disability this is a fact
there should be equality about this so
far when we think of accessibility how
many different kinds of accessibility
can we think of physical
like when people who cannot walk they
need wheelchairs right so this is a form
of accessibility that they should have
they should be able to go anywhere they
should have wheelchair ramps they should
have buses that are able to pick them up
similarly we have accessibility when it
comes to web as well people who cannot
see or cannot hear should be able to use
web apps just as well as those of us who
can see and hear
so that's web accessibility related to
web services products and apps web
accessibility is governed by a set of
features and guidelines that help design
your app to be fully usable by people
with disabilities some of these tools
include screen reader support photo
captioning and keyboard usability let's
look at a few terms that are associated
with web accessibility a11y it is
pronounced like this a 1:1 by or a 11 by
although since I'm a terrible punster I
decided to name my talk how to be an
ally I like doing that I like hitting
people with puns sometimes all the time
then we have Bach AG WCAG that's web
content accessibility guidelines these
are the rules set for how we should
develop any application so that it is
accessible to everyone the third thing
that we need to look out for is aria
it's accessible rich Internet
applications these are features baked
into HTML that enable any app to be
accessible to people
stats 15% of the population has some
form of disability if we take a look at
it and cold hard numbers that's almost 1
billion people that that's how many 15%
is now 8% of the population is also
color blind just trying to think about
all of these numbers if you try to think
of exactly how many people are we
excluding if we are not making sure that
our app is accessible that's 1 billion
15% of the population and out of
8% being colorblind the monitor is off
again if we are excluding 15% of our
users then we are failing at our jobs as
developers I'm sure some of us have
heard this before accessibility is not a
feature it is a necessity if by design
we are excluding a vast number of our
users then we are actively
discriminating against them and this is
wrong this is unfair it should not
happen therefore if we are excluding
these many uses we are failing our jobs
and this should not happen I'm trying to
work on that myself I did not know
excessive about accessibility for a long
time but now I'm trying to learn so this
is what I'm here for today accessibility
will ensure that our app is usable by
persons with disabilities today's talk
is mainly going to focus on screen
readers and color blindness not so much
about people who are deaf unfortunately
we don't have enough time for that but
let's see so what kind of issues occur
when we are using J's frameworks like
frameworks like react they typically use
syntactic sugar to create apps syntactic
sugars are syntactic sugar means that
they are not pure HTML due to this
developers sometime end up writing
non-semantic HTML now tools like screen
readers are not able to parse
non semantic content meaningfully what
does this mean this means that people
who are disabled who are using those
screen readers to understand the content
on your web page they are not able to
get any meaning out of it they are not
able to use it your app has become
inaccessible let's take a look at how
this happens this is something that I'm
sure a lot of us are guilty of I know I
am 10 times over this piece of code is
supposed to be a button made out of a
div how many of us have done this quite
quite a few of us right so what happens
is that when a screen reader encounters
for code it fails to read it out loud as
a button because it doesn't understand
that it's a button it sees a div and
something inside it that's it that's all
it sees this way the user is not aware
that what they are trying to look at is
actually a button so if we try to look
at it this way you could say the verdict
is that because of JavaScript frameworks
these frameworks are killing
accessibility but it doesn't have to be
like this let's take a pause on that
thought and think about how react works
react works with dome and virtual dome
changes whatever changes we want to
happen in the app they occur in the
virtual dome and the reactor econ Seiler
compares the difference between what is
already there on the screen and what the
changes are supposed to be and updates
those differences on the actual dome
this is an example of react JSX it looks
like HTML but it's not HTML it has a
label but then it has certain attributes
that are written in camelcase you can
pass values to it so this is this looks
like HTML might be react GSX is then
converted into pure HTML and rendered in
the dome just like that so if we try to
think about this we can say that
essentially whatever code we are going
to write it is going to turn into HTML
at some point it's going to be plain old
HTML so if we start writing some Mantic
with accessibility so if any of us have
been holding on to the excuse that hey
look I'm a reactive I'm an angular
therefore accessibility is hard for me
no it's not it doesn't have to be yes it
will take some effort but we can do it
react supports Aria natively so
therefore user property right could
react code then you get good HTML code
if you get good HTML code then you have
better accessibility simple as that
how to make our react app accessible I'm
going to take you through a series of
several types of actions that we can
take to do this
react provides several features that
make accessible design possible first of
all before we begin on that we need to
make sure that we get the long
low-hanging fruit out of the way first
if you are if you are if you need to
show an image make sure that it has an
alt attribute all the attributes are
important to screen readers do not make
a button out of something that is not a
button don't use dips for that don't use
anchor tags I'm going to keep coming
back to this point again and again until
I'm sure that we've got it right
semantic HTML let's take a look at the
core accessibility features we can focus
on setting page titles setting page
title is important for several reasons
in a single page application like react
the page may update we may go to a
different route but then that page title
remains the same this creates problem
because the page title is the first
thing that screen readers usually read
out now if a screen reader isn't reading
aware that something has changed that we
are at a different location so let's
update our page title in a react app we
can do it simply like this we can update
the document or title inside our
component dead mount lifecycle method
simple as that or we could use some
plugins for it there there is react
document title that does the same thing
you wrap this component around whatever
content you want to render and provide
it a page title or you could reuse react
helmet it's a this is a very useful
plug-in that is used not just for
setting page titles but also for
basically setting anything that you want
to on that pages HTML head you can
include meta tags in it so it's very
useful for SEO as well header semantics
so some of us may have used head
in ways they were not supposed to be
used how many of us have used headers
just to set something like font size
some of us make sure that you're using
headers the way they are meant to
of your content where sections are
supposed to be which is a subsection and
so on and so forth the top header should
always be H 1 followed by n h2 and then
NH 3 don't try to use headers if if what
you're looking for is font size and CSS
never do that
if you did that in your school homework
for English your teacher wouldn't
approve so no need to do that now you
can also create configurable header
component like this you can pass it
content as well as level of the header
and it will spit out the current the
correct header tag you can also
configure it to return next level header
programmatically unique IDs unique IDs
are again important for screen readers
because they specify exactly what
element a screen reader is focused on to
generate unique IDs you could use
something that comes from a database or
you could use a library like UID to
generate unique strings so that the
screen reader knows exactly where
element is supposed to be and your user
is able to parse through your content
meaningfully react fragments react
fragments they were introduced and react
16 a while back they are used to group a
list of elements without adding extra
notes with doom
they do a very useful thing in that they
get rid of x value drop Odom's
let's take a look at how we used to
export certain components that had
sibling elements but nothing wrapping
them we would have to add an invalid
empty wrapper div around it just to
export it as a single
now if we did this on something like a
list item or a subset of list items if
we try to expose that it would it would
not come out in a way that was
semantically correct they aren't
supposed to be any divs inside an
unordered list unless they're inside the
list item so what to do about this use
fragments since react 16 you can use
react fragment to wrap such items and
export them so when this renders in the
dome it is not bound by any empty
useless invalid wrapper lives your code
is semantic perfect and ready to be read
by a screen reader change announcements
what a change announcements in react app
since react is dynamic things may be
updating at any section of the page
without being picked up by the screen
reader this creates a problem when
something is changing we want the user
to be aware of it for this we can create
a simple component that makes use of the
aria-live attribute what is aria-live do
whenever the underlying content of an
HTML element with the aria-live tag
changes it announces that content again
so here we are doing something that
basically creates an simple empty
component that can be put anywhere in
our app inside it we can put a message
at firstly message can be empty and when
we want the announcer to announce
something we can simply pass it some
message since it has the aria-live
attribute the screen reader will pick
this up and announce it you can see that
the aria-live value right now is polite
which means that the screen reader will
wait until any other announcements have
been finished to announce this one aria
atomic true means that whenever any part
of the content inside this component
changes it will announce the
tire thing all over again how to use
this in any parent component have a
value in the state like message at first
it's empty its null then when some event
occurs certainly state to what you
wanted to be like professor utonium i'd
say element x has been added by mistake
but whatever it will create the
Powerpuff Girls so this value can then
go into the announcer by the state and
whenever the value changes we can the
screen reader will pick this up and
announce it pretty simple but very
useful there are other components like
this as well that you can use this react
aria-live and react accessibility
announcer both of these do the same
thing there's also something called
react portal that was recently
introduced react portal is something
that is not exactly part of your current
react dome but you it is outside of it
but you can still access whatever values
inside it so this could be potentially
used for a for an announcer as well
focus in life focus is important this is
what I've been told many times by my
parents by my teachers by some friends I
never used to listen to them I'm
terrible at being focused but this is
again very important when it comes to
what does focus do when a page loads and
we want some element to be focused by
default that that thing is important
when we're dealing with Jace's JS
frameworks like react react so far has
silent routing that means that when the
route changes nothing much happens the
browser doesn't refresh so keyboard
focus doesn't really know where to go by
default so you need to manage it on your
own for this you can use refs don't
overuse the refs use them judiciously
but for managing focus you can use them
since react 16.3 using refs has been
more straightforward and easier
you can use them like this for any
component you can create ref using react
dot create ref as you can see in the
constructor over there we have a ref
called section header and then in my
render section we I have a h3 compete
tag which I want to be focused so what
I'll do is that I'll attach this ref to
the h3 tag next on when this component
mounts I want the focus to go to that
particular ref so what will I use I will
use a component ded mount method and I
look for that particular ref section
section header and use dot focus to make
sure that when this component is mounted
that header is being focused now when
the screen reader notices that this
particular component has the focus it
will read out its content and it will be
easier for the user to know where they
are like we discussed earlier let
button's be buttons for God's sake
always remember this again this is not
just about buttons this could be about
any element in HTML try to use semantic
hTML as much as possible
don't try to repurpose some other some
type of HTML tag for something it was
not meant for use anchor tags for links
use button for buttons use tables if you
need to that example that we saw earlier
the button with the made out of Dave
don't do that use a button attach an
onclick handler to it if you want it to
look like something else if you want
your button to look like anchor tag you
CSS for it but don't use anchor tag to
make it next let's talk about SVG's SVG
is by default they are not passed
properly by screen readers but still
SVG's are better than PNG is if you want
to use icons this is especially
important for people with low vision who
might need to zoom
on the screen to see to read what's in
now since SVG scale better if if you
zoom in on it it won't break it won't
blur it won't be what's it called
basically you can understand what's in
there but with some PNG is if we zoom in
too much you might not be able to see
what's in there you might not be able to
understand it it's too blurry so how to
make SVG's accessible you can use the
title and description tags that are
supported by SVG screenreader do read
this out so make sure you have this
whenever you're using SVG here is an
example of how to do it I think I picked
it off so this SVG has a title and
description screen reader will read it
out and the user will be able to
understand what they're looking at
context is key context is super super
important no matter what you're doing
where you are especially so in
accessibility take a look at this icon
over here it's a common enough icon it's
across sometimes it means close
sometimes it means delete you need to
specify exactly what the purpose of that
icon is in the context you're using it
if you don't do that you know it's like
Apple and Apple one of those is super
popular the other one manufactures fancy
laptops right so make sure you specify
the context when you're using icons be
it SVG PNG whatever add custom titles
whenever you you can to provide
contextual info to screen readers and
make sure that you can do this for any
type of element you should know this
next colors are important that can also
be a problem typically when we design
our web apps we put a lot of stock in
colors hey it's green right that means
success that means say it's red that
means error
it means delete blue is for info or for
update the problem begins to have
when we begin to rely solely on colors
to provide meaning that should not
happen because colorblind people are
going to have a very very very tough
time there with it you don't want to
trouble them so much another type of
problem that occurs when we are using
the wrong colors is when there's less
contrast people with low vision cannot
differentiate between two colors that
are of same hue and the contrast between
them is very less so you might think
that you have a very visible pale red
background and dark red foreground but
someone with low vision may not be able
to see anything on that screen you don't
want that to happen so choose your
colors white wisely and try not to put
too much talk or too much meaning into
be colors sure use that but make sure
you provided additional info you provide
the contextual information along with
understands what is happening what
they're doing what they need to do pair
the color with text or descriptive icons
that the user can easily understand and
use and ensure high contrast between
element background and foreground now
time for some opinion accessibility
benefits more people than you would
think when we talk about or when we
talk about places being accessible when
we even think of the dips in the
sidewalk that you see are those being
used only by people who are physically
disabled who are on wheelchairs or are
they also being used by other people
parents with babies in strollers all the
people older people with low mobility
down that you know even though I can
step aside and you know the point is not
that the point is don't exclude anyone
if you can if if you start thinking of
accessibility like a feature
then you are by design excluding people
and that's harmful so when we talk about
web accessibility if our apps are
accessible that does not just mean that
people who are blind would be able to
use it but think of older people who
have a tough time trying to memorize the
newer interfaces that we come up with
every day they might be able to grasp it
better more easily if they are using the
accessibility options increasing the
font size they might have an easier time
with it so try to keep that in mind it
might seem like a lot of work at first
but somebody said to me that once you
get into the flow of it once you start
writing your code semantically it gets
very easy and you just start doing it
without thinking so that is something
that where we need to get at and for
as well that will make our life easier
while we are trying to get there since I
don't have enough time I just want to
very briefly depend to unit testing what
are the kinds of things that we should
test when we are developing react apps
we should test whether our area
attribute values are being set correctly
whether our page title is being updated
correctly whether our elements are being
focused when and when they should where
whether our announcers are working fine
everything apart from this should be
caught in the lender here is a very
simple unit example here I have a react
component name button which has a label
called close he in this test I am
checking whether the underlying HTML
button has the Aria label property set
correctly or not
this will ensure that the screen reader
is able to read the value of this button
correctly so you can think of more tests
like this time for tools dev tools for
we have several libraries take your pick
in JSX
it's a very cool useful lender that will
tell you where you are falling short
what you should do
and what what things you should correct
in your code we have react accessibility
analyser and react acts which throw
errors into your console so that you
know where things are going wrong in
terms of accessibility if you are a
beginner and you want to start into this
but are not sure where to begin the
create react app repo by Facebook is a
very good starter it also comes with
several accessibility options configured
so it would be a good place to start and
then there are several accessible
modules available at this link over here
react not rocks slash tag slash
accessible there are several other tools
that you might be able to use when
you're developing your app there's
Chrome extension called C this is a very
cool very useful one in which you are
able to see your app from the
perspective of a colorblind person you
are able to see it the way a colorblind
person would see it and it really at
first it can be really jarring but also
it should generate a lot of empathy and
then you'll be able to understand better
and try it better code design better
apps and make sure that whatever
shortcomings you have in your code right
now those are removed then there is
another tool called contrast checkol it
will help you decide whether help you
discover whether the contrast in your
app is fine or not
and finally the react Docs and
accessibility are very useful I have
that from them personally and I found
them a good good place to start with
alright so that was my talk thank you
for being here today
please follow me on social media that's
my twitter handle over there nick nevada
'the email me if you want to talk want
to say hi or have questions want to yell
at me feel free that's high ad anyway
that taught in and please also visit the
node experts website node experts calm
the cool things that we have been doing