5. WHAT IS WEB ACCESSIBILITY?
“All users regardless of their abilities are able to access and use digital tools,
technologies, and websites as well as participate equally on the web”
8. COMMON TERMS
• Web Content Accessibility Guidelines (WCAG) explains how to make web content more accessible
• A11Y is shorthand for "accessibility"
• Assistive technology also known as (AT) is devices, software, and equipment used to maintain or enhance the
functional capabilities of people when accessing websites and digital products
• AAA most strict • AA • A least strict
• Screen magnification software
• Alternative keyboards & input devices • Voice Recognition
• Screen readers
9. • MDN web doc accessibility guide
• The A11y project
LEARNING RESOURCES
• WAI accessibility tutorials created by
the W3C
Technical Built empathy
• Get to know users
• Try using different ATs
• User stories
• Deque University
10. • Color Contrast
• Missing Alt Text
• Empty links & buttons
• Missing form labels
• Missing language attributes
Annual report of the most used one
million websites showing the most
common accessibility issues
WEBAIM
11. • Difference in brightness between foreground & background ratio 4.5:1
COLOR CONTRAST
• Having the correct color contrast ratio helps people with vision impairments be able to tell
colors apart and see your content.
12. MISSING ALT TEXT
Need to include If you have any images on your site that contains critical information or improves the context of the site
● Critical information | Provide context: include alt text
● Use specific and concise language
● Describe the information being conveyed not the asethics of the image
● Let alt text empty for decorative images
13. EMPTY LINKS & BUTTONS
BUTTONS
• Add text content within an empty button <button> Submit form </button>
• Add alternative text to a button image that describes what the button is
being used for or the action the button triggers
LINKS
• The purpose of each link should be able to be determined from the
link text (Add unique & descriptive text)
Bad: <a href=”/readmore”> Read More </a> will be read out loud as Read More
Better: <a href=”/readmore”> Read more about our company culture </a>
14. MISSING FORM LABELS
Every interactive element has a label
• input fields, radio buttons, check boxes, iframe, buttons and links all have
labels.
• html <label> element
• for attribute matches the id
<label for="firstname">First name:</label>
<input type="text" name="firstname"
id="firstname"><br>
<input type="checkbox" name="subscribe" id="subscribe">
<label for="subscribe">Subscribe to newsletter</label>
• visually hide elements sighted users
<label for="search" class="visuallyhidden">Search:
</label>
<input type="text" name="search" id="search">
<button type="submit">Search</button>
15. MISSING LANGUAGE ATTRIBUTE
<html lang="en">
...
<body>
<p>This page is written in
English.</p>
• set the value of the hmtl language attribute
• sets voice and dialect
• translation
16. INTERNATIONAL
LAWS
US LAWS
• Americans with Disabilities Act (ADA)
• ADA and Section 508
• Canada: Accessible Canada
Act (ACA) and Accessibility
for Ontarians with
Disabilities Act (AODA).
• Europe: EU Web
Accessibility
Directive,
17. TESTING & TOOLS
• Lighthouse (Google Dev Tools)
• Axe dev tool chrome extension
AUTOMATED
MANUAL
• Screen reader
• Keyboard Access
• User testing
18. STAY UP TO DATE
• Find community
• Learn with others
• Weekly learning challenge
@laurelyounisdev
laurel-younis-dev
