The Web Accessibility Project: Development and Testing Best Practices

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