Practical Web Accessibility: A Comprehensive Guide to Digital Inclusion

✍ Scribed by Ashley Firth

• Publisher: Apress
• Year: 2024
• Tongue: English
• Leaves: 560
• Edition: 2
• Category: Library

✦ Synopsis

Everyone deserves to use the Internet. An estimated 1.3 billion people experience significant disability. That’s 16percent of the world’s population, or one in six of us. At the same time, over 96 percent of the one million most popular websites have an accessibility issue. Add to this the massive rise in legal cases around sites not being accessible, including Beyoncé, Disney, and Netflix, and you have an important topic that more and more people are starting to engage with.

In this updated and revamped second edition of the Amazon technology chart-topping Practical Web Accessibility, you’ll be guided through a broad range of disabilities and access needs. You’ll understand the ways these users typically engage with the web, the barriers they often face, and practical advice on how your websites and content can be compliant, but more than that, inclusive and enjoyable to use. There’s also a new chapter on “Outsourcing Accessibility,” exploring third party “bolt-on” tools, “build your own website” platforms like Wix, and popular design systems. You‘ll explore whether they’re helpful or detrimental in the fight to make the web more accessible.

Throughout this book you’ll learn to test for, spot, and fix web accessibility issues for a wide range of physical and mental impairments. Featuring content from the latest compliance frameworks, including the newly released WCAG 2.2 and exploratory concepts in WCAG 3, you’ll see how to go beyond the basic requirements in order to help your users. You’ll also learn that an accessible approach won’t just help people with disabilities, it will improve your website for everyone.

This book comes complete with practical examples you can use in your own sites, along with a brand-new approach to auditing and improving a website’s accessibility, and a team’s approach to it, based on tools created by the author and refined over years as a consultant ― The FAIR framework and ACCESS checklist. With these tools, you can set up processes for yourself and your team that will drastically improve the accessibility of your sites and, importantly, keep them that way in the future.

Suitable for those of any profession or experience level, Practical Web Accessibility gives you all the information you need to ensure that your sites are truly accessible for the modern, inclusive web. If you would like to learn about web accessibility in a clear and actionable way, this book is for you.

What You Will Learn

• A greater understanding of a vast range of disabilities that have online access needs, and the issues they typically face accessing content online.
• Ways to apply the practical steps required to cater for those needs.
• How to take your sites, and colleagues, on a journey from being inaccessible to accessible.
• The importance of accessibility in your designs, code, content, and more.
• The best ways to test andimprove your sites, so you can be compliant, and truly accessible.

Who This Book Is For

Anyone, regardless of what they do, who wants to learn how to make websites and their content more accessible for those with disabilities. In the world of web, the book has been used by front and backend developers, designers, product and project managers, team and business leaders.

✦ Table of Contents

Table of Contents
About the Author
About the Technical Reviewer
Acknowledgments
Introduction
Chapter 1: The Accessibility Problem
The State of Accessibility Today
The “Disability-Driven” Mindset
Why Is It Important Now?
Accessibility Is Receiving More Mainstream Attention Than Ever Before
Competitive Advantages
Opposition to Accessibility
So, Why Approach Accessibility in a Disability-Driven Way?
Frequently Asked Questions
Conclusion
Chapter 2: Blindness
Screen Reader Software
Perceive, Navigate, and Interact
Accessibility Tree
Screen Reader Information
Native HTML Elements
Named Tags
Semantic Markup
Heading Structure
Styling Headers
Testing
Off-Screen Headers
Linear Layouts
How Users Navigate
What Is a Linear Layout?
Mobile Devices
“Mobile-First” Design and Development
“Skip to Main Content” Link
Link Placement
Alt Tags
Image Context
Adding Alt Text
When Not to Add It
Social Networks
The lang Attribute
Handling Multiple Languages
Forms
Proper Labeling/Identification
Linking Labels to Form Fields
Bonus: Large(r) Click Areas
Using ARIA
Applying ARIA Attributes
aria-label
aria-hidden
aria-live
aria-labelledby
Components
Support and Testing
Conclusion
Chapter 3: Low Vision and Color Blindness
Accessible Text
Relative Units
Stop Using Pixels
Screen Sizes
Raise Your Base Font Size
Line Height
Word and Letter Spacing
Font Choice
Custom Fonts
Accessibility-Specific Fonts
Contrast Ratio
Good Contrast Helps Users Without Visual Impairments
Testing
You Could Always Offer a Change
Dark Mode
High Contrast Mode
Color Blindness
Different Types of Color Blindness
Red–Green Confusion
Color to Infer Status
Yellow–Blue Confusion
Color to Distinguish Sections
Monochromacy
Links
Testing
The Compounding Effect of Accessibility Fixes
Magnification
Horizontal Scrolling
Tracking
Text Overflow
Testing Zoom
Responsive Web Design
Ensuring a Responsive Layout
Preventing Zoom
Point of Regard
Navigation
Conclusion
Chapter 4: Motor Impairments
Keyboard-Only Navigation
Focus Indication
Focus Styles
Focus State Issues
Contextual Focus
Focus Visible
Custom Focus Styles
How Visible Do They Need to Be?
Examples
Clear Change in Background
Clear Change in Border
Outlines
Other Options
Using a Combination of Focus Changes
Using Hover Styles as Focus Styles
Tabindex
So What Is Tabindex?
Tabindex Values
Obscured Elements
Fixed Elements
Solutions
Overlays
Accessible Overlays
Changing Focus When the Overlay Appears
Keyboard Traps
What Should I Move the Focus To?
Keeping Tab Focus Inside the New Content
Allow the User to Close the New Overlaid Content
Allow the User to Return to Where They Were Before
Third-Party Software
Pointer-Based Gestures
Large Hit Areas
Pointer Gestures
Pointer Cancellation
Undoing the Action
Voice-to-Text
Support for All Motor-Impaired Users
Short Timeouts
Extend a Timeout
Motion Actuation
Orientation
Skip Links
Autofill
Conclusion
Chapter 5: Deafness and Hard of Hearing
Subtitles and Closed Captioning
What’s the Difference?
User Preference
Caption Actions
The Rise of Captions
Element
WebVTT Files
Styling Subtitles
cue
Formatting
Positioning
Position and Line
Align
Size
Future Features
Voice Spans
Classes
:past and :future Pseudo Elements
Captions or Subtitles: Which Should I Apply?
Audio Captions
Practical Example
Closed Caption Buttons
Other Caption Formats
YouTube
Accessible Subtitle/Caption Content
Signed Captions
Sign Language-Friendly Content
Transcribing and Summarizing Audio and Video Content
Providing a Transcript
Unexpected or Automatic Audio
Linear Layouts
Servicing Customers Without a Telephone
Providing Alternatives
Text or Video Relays
Conclusion
Chapter 6: Cognitive Impairments
What Are Cognitive Impairments?
Use Clear Content
Plain English
Structure
Headings
Paragraphs
Sentences
Guiding Sentences
Supporting Content in Multiple Formats
Word Choice
Use Familiar Language
Avoid Using Lots of Large Words
Use an Active Voice
Pay Attention to Text Style
Testing How Easy Content Is to Read
Help Users Understand What Things Are and How to Use Them
Provide Definitions
Reading Time
Clear Iconography
Custom Icons
How Do We Combat This?
Help Users Find What They Need
Avoiding Complex Pages
Complex Layouts
Coherent Navigation
Complex Experiences
Sitemaps
Help Users Focus
TL;DRs
Implementing a TL;DR
But Ashley, Won’t It Ruin the Surprise of What’s in the Content?
Breadcrumbs
Hierarchical Breadcrumbs
Routes into Your Site
Historical Breadcrumbs
Help Users Avoid Mistakes
Self-Contained Actions
Autocomplete
“Strict” Search
“Fuzzy” Matching
Neurodiversity
Conclusion
Chapter 7: Mental Health
Mental Health on the Web
Dark Patterns
What Is a Dark Pattern?
Why Are They Used?
What We’re Going to Talk About
Dark Pattern: Complicated and Obstructing Journeys
New York Times
Instagram
Google
Symptom
Solutions
Highlight the Offenders
Optimize Common Journeys
Communication Anxiety
Why Do This?
Reach Users Where They Feel Comfortable
Setting Expectations
Priming Messages
Priming Messages Away from Your Site
Signposting
Symptoms
Dark Pattern: Forced Urgency Through Scarcity
Booking.com
Creating a Sense of Scarcity
Symptom
The Reality Behind Apparent Scarcity
Shopify
Solutions
Dark Pattern: Confirm Shaming
Extreme Examples
Symptoms
Solution
Dark Pattern: “Sneak into Basket” and Hidden Costs
Symptom
Inconsistent Legislation
Solution
Giving Users the Chance to Revert Actions
Dark Pattern: Visual Interference
Solution
Dark Pattern: Bait and Switch
Symptom
Solution
Dark Pattern: Privacy Zuckering
Symptoms
Solutions
Amazon and Combined Dark Patterns
Amazon vs. US Federal Trade Commission (FTC)
Trick Wording
Confirm Shaming
Visual Interference
Sneaking
Hidden Subscription
Reviewing Information
Hard to Cancel
Legal Changes
The Inventor of Web Steps In
Conclusion
Chapter 8: Imagery
Images
Tag
Orientation
Screen Size
Color Scheme
Background Images
Text in Images
Text in Responsive Images
Color in Images
Videos
Pausing
No Sound
Consider the Color Scheme of the Video
Only Play the Video Once It Has Loaded
Loading a Poster Image
Don’t Loop Your Video
Should You Use Background Videos?
Reducing Movement
Handling This in Code
Parallax
Iconography
Tag
Sprites
Theme Switching
Icon Fonts
Decorative vs. Functional Icons
Decorative Icons
Semantic Icons
Interactive Icons
Animations
Building Your Own Icons
SVG
Benefits
Tag
CSS Background Image
Inline SVG
role Attribute
aria-labelledby
aria-describedby
Hiding Icons
Adaptive SVGs
currentColor
Conclusion
Chapter 9: Accessible Email
Issues with Email
Different Approaches to Email Rendering
Include a Link to View Your Email as a Web Page
Does an Email Service Provider Handle This?
Provide a Plain-Text Version of Your Email
Does an Email Service Provider Handle This?
Content
alt Tags and Images
Does an Email Service Provider Handle This?
role=“presentation”
Does an Email Service Provider Handle This?
Set the Language
Does an Email Service Provider Handle This?
dir Attribute
Does an Email Service Provider Handle This?