okay this is impactful accessibility the
changes that mean the most
so a little belt me to get started I'm
an accessibility engineer I'm a former
technology evangelist
and a full stack web developer I have
multiple disabilities that actually make
using the web a little difficult and I
have an MA in international peace and
conflict resolution which means I've
done like a lot of studying of how
people's worlds affect how they interact
with other things and you can find me at
tech Evangelista on Twitter I also added
a bunch of puppy pictures to my slides
like just now because I felt bad for not
having more puppy representations he's a
little sleepy because I'm on benadryl um
about this talk this is not really an
intro to accessibility talk I'm not
gonna be going over what a disability is
what alternative input and outputs are
or anything like that it's pretty easy
to find online
there's tons of intro talks around I've
given them but even if you don't have a
background in this there should be a lot
of things that you can understand and
take away from this talk I've also tried
to focus on the parts of accessibility
that developers actually have some say
in because there's some things that you
need a designer to be willing to work on
like color contrast or you need a
product owner to agree on and um I have
a page with these exact slides like just
a link to this google slide presentation
and a bunch of resources on disability
and accessibility at Dragon with a you
like my last name dot tex /gs comp ye
and just a disclaimer before we get
started this talk is not the end-all
be-all of accessibility obviously it's
like 25 minutes long I had to cut out
three sections it's it's not a lot um
even if you do everything I talked about
here if you do nothing else for
accessibility you'll probably still have
bad accessibility and what is or isn't
good accessibility is also very
dependent on your site and your
users even things like with Ag which is
the web content accessibility guidelines
which are the standards lob government
uses can be wrong for your specific use
case users especially disabled users
obviously have a variety of needs that
might you might not think about it first
probably one of the biggest issues for
accessibility on the web is giving users
the information they need right so for
example you as a developer probably
shouldn't be writing the alt attributes
on your images it's copy unless you're
writing other copy you probably
shouldn't be doing this but let's say
that you have to because you probably do
I'm gonna do like a brief exercise to
get you into that mindset this is a
picture of my puppy Colby who's on a bed
playing with the toy and I want you to
study this for a few seconds and think
about what the relevant information in
the picture is okay so the problem is
that depending on what your site is
doing what is relevant is completely
different if you're doing a dog adoption
site and you need alt text for this
picture you're gonna focus on the
details about the puppy you're gonna say
maybe long-haired miniature dachshunds
puppy of 14 weeks plays by himself
inside or something like that and then
for the dog story you're gonna focus on
the toy you don't really care so much
about the puppy you can be like small
breed puppy plays indoors with our
rainbow puzzle toy or something like
that and it's going to be a completely
different mindset depending on who your
audience is
because alt text is very dependent on
that sort of thing it's supposed to be
what your users would get from that
image if they could actually see it you
should also make sure not to use words
like image
I didn't use it in my little like
examples there because screen readers
actually say image so what you end up
doing is like image image of a puppy
image image of a toy over and over again
and it gets really annoying and also I
know like there's a big debate over what
is trivial images or not if you're doing
alt text you need to remember that like
there are people who have low vision who
are also using a screen reader so they
know that something's there but if you
remove it from the screen readers like
ability to tell them that you're going
to have people really frustrated because
there's like this spot on the page that
they just don't know what it is
complimenting alt text is long
description so if you have an
infographic like this one I took from
the web accessibility site dequeue or
you have a chart like this pie graph I
made the last night using Excel a long
description gives a way to fully
describe these all that information
needs to be accessed by people and who
can't see it or maybe can't understand
it in the format it's in and I thought
it was appropriate to have a dachshund
for this one a long description can be
accessed through like placing a link
next to the image or by providing a link
using what's called longdesc attribute
like description that cut off because
all these things are really obvious and
there's other options like the
infographic that I showed just has the
page after it have the text from the
infographic and charts it's highly
recommended to have a table with that
same data like right with the chart so
people can figure out what's going on
and I did some web stuff during the 90s
I know tables aren't really like a thing
people want to think about but this is
actually tablature data so it's actually
the point where you'd use a table which
of course brings up this idea of like
semantic markup in general
which can be very accessible on its own
right um sometimes using HTML just
better accessibility than CSS naturally
so when some people use spans or classes
to change how the letters or words look
on a page that means that screen readers
can't really access that so if it's not
just purely for design if you're
actually trying to get across something
like say you're emphasizing a word well
if you use CSS instead of like the e/m
markup the screen readers can completely
miss that another thing is using HTML
properly like how can there be two main
sections on a page or like why would an
h4 heading come before you even see in
h2 screen readers and also web scrapers
which are like search engines are
relying heavily on the structure of the
HTML document so it's really important
to have actual proper structure and you
shouldn't just use semantic markup but
use the right HTML right um don't just
make something look like something else
this is common with checkboxes list
buttons
Kolbe likes to pretend he's a bagel all
different things so like usually it just
makes it harder for screen readers and
can also make it harder for others
depending on how their browser add-ons
or phones treat the elements on my phone
I have a option turned on to make the
buttons like way more obvious it puts an
outline around them it gives me a little
more space to press them but it works
for buttons not for divs that are used
like buttons and like buttons are not
just for forms buttons are actually
really great they do things and people
know they do things and there are
announced by screen readers as buttons
so if you're looking to do something on
a page you might just be skimming for a
button if you're going to do something
that like trigger
is when a user presses something the
buttons generally your best option
and along with buttons you want to make
sure you're giving like all the proper
information right it's the whole I don't
want to just style something with CSS
and have it actually have meaning if you
disable a button if you make it say like
really faded out or flat when your other
buttons aren't to tell people hey you
can't use this button you also need to
use the attribute that will let other
people who can't see the button know
that which leads into what's called Aria
which is like markup like extra
information in your markup to give to
your screen readers it basically can
give screen readers information about
the visual aspects of the page about
steps in our process even about changes
made on the page so like your login
screen maybe the only change you do when
something goes wrong is you put some red
text at the beginning to tell them that
their informations wrong well Aria lets
people know hey something changed you
can't see that red text Aria also gives
you a way to turn that div into a button
as far as your technology is concerned
you can give it the role of button and
then it will be treated more like that
and for whatever reason you wanted that
div and sava button you can have it I
think it also provides alt text
equivalents right so um this is really
good for anything where it might be
ambiguous like say you have a button
that has an X because it's gonna close
something so you can tell people hey
Aria label closed this isn't just a
random X sitting on your page you can
use this but of course like it has its
downsides
so one thing everyone who uses screen
readers tells me about Aria is that the
worst thing then under use is overuse
some things do not need labels some
things don't need alerts and for some of
this stuff it has no like
character limit so you could really just
take an icon of a house and explain it
in details for paragraphs when all
anyone really wants to know is it's a
home button the w3c who made Wicca
itself says that like no aria is better
than bad aria because you could end up
overriding actually good accessibility
by using bad Aria which is like hard to
imagine but browsers actually have some
pretty good defaults going on that you
can take advantage of so like if you
don't have a designer giving you any
specifics or you don't have a designer
at all and you're not sure what to do
falling back on the browser defaults is
actually not only just easy but it can
be better all right they have a focused
indicator that's when you like keyboard
navigate into a page like with your tab
and it gives like an outline around
something they have cursor behavior
button appearance and all of that is
something that people are familiar with
who use these options just like seeing
an underlying link seems familiar to
most people and not only do browsers
have defaults but there's also a way
that users can set them to perform
better for them in certain ways and have
it affect every page they go to such as
minimum font size ah so font size is
obviously kind of important for how
people read your page but even if you
have like a reasonable font size it can
also not be enough for people so they
set a setting in the accessibility
options in their browsers to never go
below a certain font size which of
course there's some like horrific CSS
properties that allow people to keep the
font very small which keeps people from
being able to read the site because
overriding the minimum can cause it to
just be unreadable
there's also choices that you can make
in the CSS in HTML that can mean that if
that text expands it gets hidden by
another element or goes off the page
meaning that people miss out on him
that you don't allow for your pages font
size to go so try to make sure your
users have the information they need in
a format they can read it in whether
that's adding more code or leaving it
out whether it's communicating directly
with a screen reader or creating
something any user can access it's
really an important step but also in
order to get that information they
actually have to navigate to it so with
accessibility specific methods like a
skip menu link sometimes called a skip
to main content link they can do that
really easier so what is that it's like
an internal link at the top of the page
that gives people the choice to skip
navigation like say they're really
hardcore Amazon now that's like a bunch
of menus there's a bunch of buttons it's
just really complicated so when you tab
into the Amazon website they actually
have a skip to main content link that
just lets you skip all that
so if possible like have it always
visible but most people don't if you
have designers working on this who agree
to do a skip content link they'll
probably want it to disappear when
people lose focus of it so make sure
that people can get back to it and it
will be visible again also make sure it
appears really high up in your page so
that like they don't have to go through
half your menu in order to skip the last
half of your menu most people who are
familiar with us are also used to the
language of it so something like skip to
main content is really familiar to them
and you probably shouldn't mess too much
with the wording search bars which we
don't really think of as an
accessibility need are actually a very
similar deal people will just go
straight to the search bar instead of
messing around with your navigation
they'll type in what they need to search
for and they'll go to it right away this
is the same deal you want it to be like
literally you want to be noticeable you
definitely want a keyboard to be able to
to it and use it and you definitely
don't want it to disappear like I think
probably all of us have had experience
where something we hover over needs to
be like the cursor needs to be in the
exact right spot in order to have it
stay up and that's really bad for a lot
of people another one that people really
don't think much of is sitemaps so
there's not much to add to it it's like
you normally Auto generate it and shove
a link in the footer right but some
people actually just use this to
navigate your site it they don't know
exactly what they're searching for if
they're like you don't have a search
they might use your sitemap you want it
in the footer you want it to be called
sitemap like you don't want to do some
cutesy thing with it and you want to
make sure people can navigate to it so
if you have something like infinite
scroll and people never access your
footer that's not accessible and there
are special features that you add that
can go beyond the basic site that you
might be implementing the are big
headaches for literally everyone
involved like modal's so um there's two
main issues with modal's for
accessibility that like everyone talks
about and the first is what we call a
reverse keyboard trap and it's when a
motor pops up and the person's on the
page behind it and their keyboard
navigating or they're using something
similar to that and they cannot get to
your modal the two ways to solve this
all the easiest two ways to solve this
or to just put the modal code physically
with the trigger like it should be the
next code in your page so people just go
naturally to it but also there's a
JavaScript answer and it's the really
hard to think of focus method that you
just used to pass focus to something and
the second way is exiting so probably
even if you don't have accessibility
needs you've experienced a modal that
you cannot get rid of
and it's especially bad if you don't
have a mouse or if you don't have fine
motor control to like get a tiny little
button somewhere so the main way to do
this is you should have an event
listener for the Escape key and you
should also have that X button we
mentioned earlier for closing things
somewhere on the top which should be one
of the first things people hit and if
you can having an exit button at the end
is very good too so people don't have to
go back and forth to different buttons
to get out of that modal and remember
mobile users because that's where people
have the most problem with it and that's
where like a mobile a modal popping up
that they can't close will just
generally make people shift to a
different site and just not come back to
yours
so users must be able to navigate to the
information they need and be able to
perceive how to navigate to so what's
the general takeaway from this users
navigating websites to access
information is basically what the web is
for there are many ways to make the that
better for people with accessibility
needs as a developer you have some say
in what you do with the code you're
writing right maybe you can't change the
colors
maybe you can't stop autoplay from
happening but you can make some
decisions and by working in areas that
will never even affect the design of the
page you can improve the usability of it
by adding a little accessibility you can
make a stressful process which is which
for some people is going to be like
nearly every website they go to easier
on your users yeah thank you
you