The Web Accessibility Project: Development and Testing Best Practices

Cover
Half Title
Title Page
Copyright Page
Dedication
Contents
About the Author
	Note
Chapter 1. Introduction
	Ambition
	Guidelines
		Scope
	Screen Reader Recommendations
		Open Source Code Repositories
		Disclaimer
	Notes
Chapter 2. Web Accessibility Basics
	What is Web Accessibility?
	Visual Disabilities
	Hearing Disabilities
	Learning, Cognitive, Neurological, and Hidden & Unnoticed Disabilities
	Speech Disabilities
	Physical Disabilities
		Laws and Policies Across the Globe
			Screen Reader Usage Best Practices
			Assistive Technologies to Zoom Websites and their Best Practices
		Accessibility Failure Models
			"Accessibility is an Afterthought" Model
			"Accessibility Test at the End" Model
			"Accessibility as a Sprint" Model
			"Accessibility Features by Accessibility Consultants" Model
			"Accessibility as an Audit Only" Model
			"Accessibility as a Developer Check" Model
			"Accessibility at Live" Model
		Accessibility Success Models
			"EAE (Explore Accessibility Everywhere)" Model
			"AG (Accessibility Gate)" Model
			"C.A.E.R.A (Color, Accessibility Audit, Exploratory Test, and Regression Automation)" Model
	Notes
Part A: Manual Web Accessibility Development and Testing
Chapter 3. User Personas of Web Accessibility Project
Chapter 4. WAVE Evaluation Tool as Accessibility Extension
	Responsibilities of Front-End Engineers and Shift Left Testing
		Alternatives
	Notes
Chapter 5. Website Page Title-based Accessibility Development
	Accessibility Four Tests
	Page Title Tests
		What will a Good Defect Look Like?
		What will a Poorly Articulated Defect Looks Like?
		What will a Better Fix to this Defect?
		Shift Left Testing on Page Title
		Redeployment of the code in test environment for an Integration Testing
		Why Did You Miss Running this Test using Screen Reader in Test Environments When the Page Title was Missing from HTML?
		How to Write an Automated Test to Verify Such Defect Fix Part of Accessibility Automation Regression Test?
	Writing Automated Tests is an End of Story—Is it Really True?
		Why Did You Miss Running this Test in Test Environments When the Page Design Changed to Single Page Application?
		Why did a BA Missed to Include this Page Title Checks in Her Acceptance Criteria?
	Advanced Page Title Testing
	Notes
Chapter 6. Website Language-based Accessibility Development
	Web Page Language Tests
	Types of Users
	Language Selection in NVDA Screen Reader
	What is the Challenge if Lang Attribute is Missing from the Website?
		What will a Good Defect Look Like?
		What will a Poorly Articulated or Incorrect Defect Look Like?
	Language Preferences on Part of the Content within Websites
	Notes
Chapter 7. Website Landmarks-based Accessibility Development
	Listed Links
	Heading List
	Form Fields
	Buttons
	Landmarks
	Screen Readers Announcing Form Elements
		Summary
Chapter 8. Website Headings-based Accessibility Development
Chapter 9. Website Links-based Accessibility Development
	Color Contrast Analyzer Tests
	Why Color Contrast Requirements are Important?
	Link Verification using CypressIO
		Write a Feature File using Cucumber
		Write Step Definitions to Verify URL and Text of the Link Provided on the Page
		Add Two Locators and Write a Group of Functions for those Step Definitions
	Notes
Chapter 10. Website Navigation-based Accessibility Development
	Website Navigation gets Highlighted to Visually Mark the Navigation
	Positive Tabindex Causes Problems
	Keyboard Shortcuts Customization and Website Accessibility
	Single Page Navigation Techniques or Better Navigation Accessibility Inside or within a Web Page
Chapter 11. Website Tables-based Accessibility Development
	Table with Caption
	Table with aria-label
	Table with aria-labelledby
	Table with Row Group
	Table with Summary
	Table with Table Description
	Table with Table Fig Caption
	Limitations with Tables
	Interesting Defects Captured when Visually Hidden Placed Inside Caption
	Table with Table Description Visually Hidden
	Note
Chapter 12. Website Lists-based Accessibility Development
	Note
Chapter 13. Website Page Media—Page Break-based Accessibility Development
	Notes
Chapter 14. Single Page Application-based Accessibility Development
	Key Recommendations
	Test Case Template
	Notes
Chapter 15. Website Redundant Entry-based Accessibility Development
	Note
Chapter 16. Website Drag and Drop Functionality-based Accessibility Development
	Screen Reader Defects
	Notes
Chapter 17. Website Images-based Accessibility Development
	Problem Statement
	Images Testing Basics
	Screen Readers Understand Attribute in a Particular Priority on their Inbuilt Code
	Best Practices for Alternative Text
	Image that is Not of Any Use Without Alternate text
		Informative Images and New Necessity
		First Hot Fix: Image with Words That Aren't Appropriate in the Alt
		Words that Identify the Element as a Visual or Image SHOULD NOT be Included in the Alternative Text.
		The Alternate Text for Informational Photos SHOULD be kept to a Minimum (No More than About 150 Characters)
		Post Fix no.2- Image with Easily Recognized Alt Text from Mark
	Useful Guidelines for Alternative Texts
	Meaningful Alternative Texts
		Best Example: Meaningful General-Purpose Alt Text for an Informative Image
		Best Example: Alternative Text for an Image's Specialized Purpose
		Best Example: Logo of Informative Images
		Bad Example (Not Recommended): Image with No Useful Alt Text
		Bad Example (Not Recommended): Empty Alt Text on an Informative Image
	Informative Image Example
		Best Example: Concise Alt Text: Informative Image
		Bad Example (Not Recommended): Image with Excessive Alt Text on herdofZebra.png
	Decorative or Redundant Images
		Null Alternative Text (alt=""), ARIA Role="Presentation," or CSS Backgrounds Must Be Used for Images that do not Provide Content, are Decorative, or are Redundant to Content that is Already Expressed in Text
		Best Example: Redundant Image with Null Alt Text
		Bad Example (Not Recommended) : Image with Redundant Alt Text that Duplicates Adjacent Text
	Actionable Image (Buttons, Links, Controls)
		Best Example: The Alt Text on the Image used as a Link is of Good Help
		Bad Example (Not Recommended): Link used in Image Lacks Alt Text
		Recommendation: For Actionable Pictures such as "Submit Here" Buttons, the Alternative Text MUST be Meaningful (Accurately Conveying the Purpose or Result of the Action)
		Words that Identify the Element as a Link, Graphic, or Picture SHOULD NOT be Included in the Alternative Text
		Bad Example (Not Recommended): Inappropriate Words in the Image's Alt
		The Alternate Wording for Actionable Photos SHOULD be kept to a Minimum (No More than About 150 Characters)
		Bad Example (Not Recommended): Longer than Needed Image Link with Alt Text
		Form Inputs Type="image"
		Best Example: With a Discernible Alt, Input Type="image"
		For Form Inputs with Type="Image," the Alternative Text Must Clearly Represent the Goal or Outcome of the Input Operation
		Bad Example (Not Recommended): Without a Meaningful Alt, Type="image"
		The Alternative Wording for Inputs with Type="image" SHOULD be kept to a Minimum (No More than About 140 to 150 Characters)
		Bad Example (Not Recommended): Long Discernible Alt in input Type="image"
	Animated Images
		Any Prerecorded Video-Only Material that Starts Playing Automatically and Lasts Longer than 5 Seconds MUST Provide a Means to Pause, Stop, or Conceal It
	Flashing or Flickering Animated Visuals must not Exceed Three Times per Second
	Complex Picture or Visual Accessibility
		Complex Visuals must have Both a Simple Alt Text Explanation and a Longer, More Clear Explanation
		Example
		For Sighted Users, the Full Description (or a Link or Button to Access the Long Description) SHOULD be Visible
		The Image SHOULD be Paired with the Long Description Programmatically
	Images of Text and Accessibility
		If an Analogous Visual Display of the Information can be Generated Using Real Text, an Image MUST NOT Include Instructive Text
		Best Example: Logo Text in Image
		Bad Example (Not Recommended): Nonessential Text in Image
		Best Example: Text Stylized with CSS
		Best Example: Customizable Text in SVG Image
	CSS Background Images
		CSS Graphics that are Only Aesthetic or Superfluous in the HTML Content SHOULD NOT have a Text Alternative
		Best Example: Decorative Image Has No Text
		Bad Example (Not Recommended): Decorative Image Does Not Need Text
		Best Example: Decorative Background Image with No Alternative Text
		Bad Example (Not Recommended): Background Image with Unnecessary Alternative Text
		Alternative Text for Informative or Actionable CSS Graphics MUST be Present in the HTML Content as Programmatically Discernible Text
		Best Example: Using aria-label, an Actionable (Connected) Backdrop Image with Alternative Text
		Best Example: Actionable (Linked) Background Image with Alternative Text via CSS Clip
		Bad Example (Not Recommended): Actionable (Linked) Background Image with No Alternative Text
		Bad Example (Not Recommended): Background Image Has Hidden Text Using Visibility Hidden
		Bad Example (Not Recommended): Background Image Has Hidden Text Using Display:none
	An Art Accessibility
		The Alt Text
		Option 1: Short alt text
		Option 2: Short alt text, with a reference to the long description
		Option 3: More detailed alt text
		The long description
		Option 1: An Objective Long Description with as Little Interpretation as Possible
		Option 2: An interpretive description
	Medical, Health, or Ecology Images Accessibility
		Option 1: Short alt text
		Option 2. More Detailed Alt Text
		The Long Description
			Example : A Detailed Long Description
	Web-based Map Directions and Accessibility
		Visual Directions
	Text Direction Accessibility
	SVG Accessibility
	What are Scalable Vector Graphics?
	Raster versus Vector Graphic
		When Magnified, Vector Images Retain their Sharpness
	Notes
Part B: Automated Web Accessibility Development and Testing
Chapter 18. Cypress JavaScript Test Automation Framework Setup
	Take Few Minutes to Setup the Cypress Framework
		Installation Steps
	Notes
Chapter 19. Cypress Accessibility Testing using Cypress-Audit
	Is Accessibility Meant only for Developers to Focus?
	Where to Start?
	Where to Start the Actual Accessibility Testing?
	What Tools to Use for Accessibility Audit?
	What are Some of the Critical Defects Impacting User Eye Sight and Health in General?
		Key Lessons: Accessibility is a Core Future of Test Automation
			Run Cross Browser Tests in Cloud
		Key Lessons: Automate Accessibility Scans Regularly
		Key Lessons: False Positives from Accessibility Audits
		Key Lessons: It's is Not About Quantity of Tests, it is About Quality of those Tests in Accessibility Testing
		Key Lessons: Automate the Defect Retests
	Notes
Chapter 20. Cypress Lighthouse Performance Metrics and Accessibility Score
	What are the Performance Metrics Standards for Websites?
		Key Recommendations
	Use CypressIO for a Fast and Seamless Test Execution Experience
	Learn to Use Cypress-Audit Early in the Life Cycle
		Test Execution Without Thresholds on Lighthouse
		Test Execution using Lighthouse Thresholds
		Test Execution Video
	Limitations
		Execution Timeouts in Cypress v4
		Cypress Videos
	Alternative Tool as Cypress-lighthouse
	Myth on Performance Metrics
	App Optimization and Chunking Fix Strategy
		Increase the Requests and Maintain the Bundle
	Notes
Chapter 21. Cypress Accessibility Testing using Keyboard Tests
	Keyboard Only Tests are Crucial for Software Teams and Majority Misses It
	When to Perform Keyboard Automated Tests?
	Keyboard Tab to Navigate to Next Field
	Keyboard Shift Tab to Navigate backwards to a Field Prior to the Current Focus
	Regular Keyboard Shortcuts to Test using Cypress
	Limitations with Cypress
	Are there No Alternatives to Mouse at All?
	Do We Need to Run All Keyboard Tests Through Automation Test Scripts?
	Summary on Keyboard Tests
	Notes
Chapter 22. Cypress Accessibility Testing using Mouse Tests
	Introduction
	Use Your Phone to Launch the Browser and Touch Start the Action on Your Website
	How to Resolve Challenges in Test Automation Code to Run the Mobile Browser Tests with Cypress Tests?
	How to Simulate the Throttle Time or Delays in the Page Load?
	Mouse Events using Cypress
	Mouse Down Events using Cypress
	Mouse Over Tests with CypressIO
	Mouse Leave Tests with CypressIO
		Mouse Move Events with CypressIO
	Notes
Chapter 23. Summary
	Need Your Support
	Recommended Readings
	Part A: Manual Web Accessibility Development and Testing
	Part B: Automated Web Accessibility Development and Testing
		Useful Webinars, Podcasts And Universities
	Notes
Index