Practical Web Accessibility: A Comprehensive Guide to Digital Inclusion

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?