1.
BEST PRACTICES TO
MAKE YOUR WEB
APPLICATION ACCESSIBLE
TATIANE AGUIRRES NOGUEIRA

2.
TATIANE AGUIRRES NOGUEIRA
Front-end Developer
@tatianeaguirres
tatianeaguirres.com
Utrecht, Netherlands

3.
WHY HAVING AN ACCESSIBLE
WEBSITE ISN'T A PRIORITY?

4.
EMPATHY
&
ACCESSIBILITY

5.
WHY ACCESSIBILITY IS SO
ESSENTIAL NOWADAYS?

6.
•According to data, disabled people represent 6.7% of the
Brazil population
•In 2019, the total population of Brazil was estimated at
almost 210 million
•14 million people with disabilities in Brazil

7.
WHO ARE THESE USERS?
HOW DO WE MAKE OUR WEB
APPS ACCESSIBLE TO THEM?

8.
PHYSICAL OR MOTOR
DISABILITIES
• If a person has an injury or disability that hinders
normal physical functioning, they will be described as
having a physical impairment. If the person has a loss
or limited function in their muscle control, movement or
mobility, they will be described as having a motor
impairment.
• Includes: Spinal Cord Injury, Amputation,
Musculoskeletal Injuries (Back Injury), Arthritis,
Muscular Dystrophy, Parkinson's Disease.
Stephen Hawking

9.
WHAT NOT TO DO
Need for
precision
Grouping of
close
interactions
Content that
requires a lot
of mouse
movement
Show
messages for
a short period
of time
Tire users with
a lot of typing
and scrolling

10.
WHAT TO DO
Large clickable
areas
Spacing
between form
fields
Design to use
only the
keyboard or
screen reader
Design for
mobile and
touch screens in
mind
Provide
shortcuts

11.
AUTISM SPECTRUM
DISORDER
• Autism spectrum disorder is a condition related to
brain development that impacts how a person
perceives and socializes with others, causing
problems in social interaction and communication.
• Includes: Asperger Syndrome and Autism.
Anthony Hopkins

12.
WHAT NOT TO DO
Large blocks of
text
Buttons with
general text
Bright
contrasting
colors
Complex and
disorderly
layouts
Figures of
speech and
idiomatic
expressions

13.
WHAT TO DO
Simples phrases
and labels
Descriptive
buttons
Simple colors
Consistent and
intuitive
layouts
Describe
everything
clearly and
simply
DO IT!

14.
DYSLEXIA
• Dyslexia is a learning disorder that involves difficulty
reading due to problems identifying speech sounds and
learning how they relate to letters and words (decoding).
Also called reading disability, dyslexia affects areas of
the brain that process language.
• Types of Dyslexia: Phonological Dyslexia, Surface
Dyslexia, Rapid Automatic Naming Dyslexia, Double
Deficit Dyslexia, Dyscalculia, Dysgraphia, Left-Right
Confusion.
Steven Spielberg

15.
WHAT NOT TO DO
Large blocks of
text
Underline words,
use italics and
write in capital
letters
Force the user
to remember
things from
previous
pages
Depend on
correct
spelling
(provide
suggestions)
Lots of
information in
one place
DON’T
DO IT

16.
WHAT TO DO
Keep content
short, clear and
simple
Use images and
diagrams to
follow texts
Align text to the
left and
maintain layout
consistency
Consider
producing
materials in
other formats
Allow users to
change the
contrast between
background and
text
Lorem ipsum dolor sit
amet, consectetur
adipiscing elit, sed do
eiusmod tempor
incididunt ut labore et
dolore magna aliqua.

17.
HEARING IMPAIRED OR
DEAF
• The difference between being hard of hearing and being
deaf lies in the degree of hearing loss. People typically use
being hard of hearing to describe mild-to-severe hearing
loss. Meanwhile, deafness refers to profound hearing loss.
Deaf people have very little, if any, hearing.
• Main cause: genetics, ageing, exposure to noise, some
infections, birth complications, trauma to the ear, and
certain medications or toxins. A common condition that
results in hearing loss is chronic ear infections.
Millie Bobby Brown

18.
WHAT NOT TO DO
Large blocks of
text
Use audio or
video content
only
Do not allow the
phone to be the
only means of
communication
Complex and
disorderly
layouts
Figures of
speech and
idiomatic
expressions

19.
WHAT TO DO
Split content with
subtitles, images
and videos
Describe
everything
clearly and
simply
Use captions
and provide
transcripts for
videos
Consistent and
intuitive
layouts
Allow the user to
choose their
best means of
communication
DO IT!

20.
LOW VISION
• Low vision generally refers to people who can see but
have an impairment that impacts their vision. Low vision
only includes impairments that are not mitigated with
regular glasses, contact lenses, medicine, or surgery.
Only when it interferes with a person's ability to perform
daily activities, is it considered a visual impairment.
• Main cause: eye diseases and health conditions such
as cataracts, glaucoma, and diabetes, birth conditions
or injuries.
Johnny Depp

21.
WHAT NOT TO DO
Low contrast
and small fonts
“Hide”
information in
download files
Use only
colors to
transmit
messages
Spread
content and
need to scroll
screen
Separate
actions from
their context
Aa
+ 200%

22.
WHAT TO DO
Good contrast
and readable
font size
All information
directly in
HTML pages
Use
combination of
colors, shapes
and text
Logical and
linear layout
ensuring good
readings with
zoom
Build buttons
and notifications
within context
Aa
+ 200%

23.
SCREEN
READER USER
• Screen readers convert digital text into
synthesized speech, and they allow users to
listen to the website content and navigate with
the keyboard. This technology helps people with
special needs to have independence and
privacy to surf the internet.
• Disability Types: Blindness, Low Vision/Visually-
Impaired, Cognitive, Deafness/Hard-of-Hearing,
Motor and others.
Blindness
Low Vision /
Visually-
Impaired
Cognitive
Deafness
Motor Other
Webaim Screen Reader User
Survey 2015
https://webaim.org/projects/screenreadersurvey6/

24.
WHAT NOT TO DO
Display content
in video and
image only
Force user to
use mouse or
touch to interact
Spread
content across
the page
Structure
dependent on
text size, style
and location
Badly
descriptive
titles and links
<p class=“u-font-36”>Title</p>
<p class=“u-font-24”>Subtitle</p>
<p class=“u-font-12”>Content</p>
Click here

25.
WHAT TO DO
Describe images
and provide
transcripts for
videos
Semantic
HTML
Build for
keyboard use
only
Inform the
language of
your app
Self-describing
links and titles
<h1>
<nav>
<label>
<section>
<alt>
Contact us<html lang="en">

26.
CONCLUSION

27.
REFERENCES
•World Wide Web Consortium (W3C) - https://www.w3.org/
•WebAIM - https://webaim.org/
•Michael K Sahota - https://twitter.com/michaelsahota
•Web Accessibility I: Make Your Website Accessible to Keyboard Users -
https://www.tatianeaguirres.com/blog/2020-07-20-web-accessibility-1/

28.
THANKS!
Slides available at https://tatianeaguirres.github.io/public-speaking