Slide 1
Slide 1 text
Iryna Mazurak
Front-end developer
at MacPaw
Slide 2
Slide 2 text
Make your site
fully accessible
Slide 3
Slide 3 text
What is accessibility?
Slide 4
Slide 4 text
What is accessibility?
Accessibility is the practice of making your
websites usable by as many people as possible.
Slide 5
Slide 5 text
Accessibility = a11y
Slide 6
Slide 6 text
Approximately 1 billion people in
the world live with disabilities!
Slide 7
Slide 7 text
“If an organization’s web product is not accessible to
a disabled person, that person may have grounds for
making a claim against the organization under the
Equality Act 2010 or the Disability Discrimination Act
1995”
BSI Group
Slide 8
Slide 8 text
Section 508
Slide 9
Slide 9 text
Section 508
Its purpose is to “…require Federal agencies to
make their electronic and information technology
(EIT) accessible to people with disabilities.”
Slide 10
Slide 10 text
● Visual disabilities:
total blindness
low vision
color blindness
Slide 11
Slide 11 text
● Visual disabilities:
total blindness
low vision
color blindness
● Auditory disabilities:
partial or total inability to perceive sounds
Slide 12
Slide 12 text
● Visual disabilities:
total blindness
low vision
color blindness
● Auditory disabilities:
partial or total inability to perceive sounds
● Mobile disabilities:
cerebral palsy
neuromuscular disorders or paralysis
Slide 13
Slide 13 text
● Visual disabilities:
total blindness
low vision
color blindness
● Auditory disabilities:
partial or total inability to perceive sounds
● Mobile disabilities:
cerebral palsy
neuromuscular disorders or paralysis
● Cognitive disabilities:
have difficulty thinking and remembering (dyslexia)
Slide 14
Slide 14 text
● People using mobile phones, smart watches, smart TVs, and
other devices with small screens, different input modes, etc.
Slide 15
Slide 15 text
● People using mobile phones, smart watches, smart TVs, and
other devices with small screens, different input modes, etc.
● Older people with changing abilities due to ageing
Slide 16
Slide 16 text
● People using mobile phones, smart watches, smart TVs, and
other devices with small screens, different input modes, etc.
● Older people with changing abilities due to ageing
● People with “temporary disabilities” such as a broken arm or lost
glasses
Slide 17
Slide 17 text
● People using mobile phones, smart watches, smart TVs, and
other devices with small screens, different input modes, etc.
● Older people with changing abilities due to ageing
● People with “temporary disabilities” such as a broken arm or lost
glasses
● People with “situational limitations” such as in bright sunlight or
in an environment where they cannot listen to audio
Slide 18
Slide 18 text
● People using mobile phones, smart watches, smart TVs, and
other devices with small screens, different input modes, etc.
● Older people with changing abilities due to ageing
● People with “temporary disabilities” such as a broken arm or lost
glasses
● People with “situational limitations” such as in bright sunlight or
in an environment where they cannot listen to audio
● People using a slow Internet connection
Slide 19
Slide 19 text
Accessibility principles
Slide 20
Slide 20 text
Accessibility principles
Perceivable
Slide 21
Slide 21 text
Accessibility principles
Perceivable
Operable
Slide 22
Slide 22 text
Accessibility principles
Perceivable
Operable
Understandable
Slide 23
Slide 23 text
Accessibility principles
Perceivable
Operable
Understandable
Robust
Slide 24
Slide 24 text
Three priority levels
Slide 25
Slide 25 text
Three priority levels
Level A
Level AA
Level AAA
Slide 26
Slide 26 text
Most common WCAG failures
(% of home pages)
Slide 27
Slide 27 text
Sites with the least number
of accessibility errors
Sites with the most
accessibility errors
● .de (Germany)
● .uk (United Kingdom)
● .jp (Japan)
● .nl (Netherlands)
● .edu (U.S.-based education institutions)
● .au (Australia)
● .ca (Canada)
● .cn (China)
● .ru (Russia)
● .pl (Poland)
● .br (Brazil)
● .it (Italy)
● .es (Spain)
Slide 28
Slide 28 text
Benefits with accessible sites
Slide 29
Slide 29 text
Benefits with accessible sites
● Semantic HTML, which improves accessibility, also
improves SEO, making your site more findable.
Slide 30
Slide 30 text
Benefits with accessible sites
● Semantic HTML, which improves accessibility, also
improves SEO, making your site more findable.
● Caring about accessibility demonstrates good ethics
and morals, which improves your public image.
Slide 31
Slide 31 text
Benefits with accessible sites
● Semantic HTML, which improves accessibility, also
improves SEO, making your site more findable.
● Caring about accessibility demonstrates good ethics
and morals, which improves your public image.
● Make your site more usable by other groups, such as
mobile phone users or those on low network speed.
Slide 32
Slide 32 text
Main tips
Slide 33
Slide 33 text
Use correct HTML for structure and CSS for layout
●
●
●
●
●
●
●
●
Slide 34
Slide 34 text
Add ARIA attributes
● aria-label
● aria-labelledby
● aria-describedby
● aria-required (state)
● aria-hidden (state)
● aria-valuemax
● aria-valuemin
● aria-valuenow
● aria-valuetext
● aria-disabled (state)
● aria-expanded(state)
● aria-haspopup(state)
● aria-modal(state)
● aria-multiselectable
● aria-dropeffect
● aria-dragged
● aria-orientation
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
Heading levels should only increase by one
Slide 40
Slide 40 text
Include proper alt text for images
Slide 41
Slide 41 text
Give your links unique and descriptive names
with underline
Click here to read more about our company
Click here to read more about our company
Click here to read more about our company
To learn more about our company read About Us
Slide 42
Slide 42 text
Maximize the colour contrast between
the text and the background.
Slide 43
Slide 43 text
Ensure that all content can be accessed with the
keyboard
Slide 44
Slide 44 text
Avoid automatic media or intensive animation
Carousels example
Slide 45
Slide 45 text
Keep your copy simple and
create sites with accessibility in mind.
Slide 46
Slide 46 text
How to test accessibility?
- aXe Chrome extension
- Contrast Ratio
- High Contrast Extension
- Web Developer Extension
- WAVE Web Accessibility Tool
- Accessibility Checklist
- VoiceOver for Mac
- NVDA for Windows
Slide 47
Slide 47 text
Test accessibility
with real people
Slide 48
Slide 48 text
Useful links
Web Content Accessibility Guidelines
A11ycasts by Google Chrome Developers
Web accessibility in mind
WDN Accessibility
Slide 49
Slide 49 text
Thanks!
Questions?