The Web Accessibility Project: Development and Testing Best Practices
- Length: 220 pages
- Edition: 1
- Language: English
- Publisher: Auerbach Publications
- Publication Date: 2022-07-20
- ISBN-10: 1032280832
- ISBN-13: 9781032280837
- Sales Rank: #0 (See Top 100 Books)
Approximately 15% of the global population is affected by some sort of disability, according to the World Report on Disability. Many C-Suite executives perceive digital accessibility (DA) as an endless task. Among the engineering leaders, one in four leaders are reliant on very limited knowledge about digital accessibility. Many countries are increasing their legislative efforts to make web accessibility an important part in web development and testing of software releases. Numerous organizations are facing extreme turbulence when not adhering to international accessibility guidelines while developing their software’s and website applications.
Web Content Accessibility Guidelines (WCAG) is a global guide on accessibility recommendations that are developed through the World Wide Web Consortium (W3C) to help organizations to meet minimum standard accessibility guidelines. It has become critical for every organization to focus on implementing the accessibility checks at every stage of their application development to avoid costly mistakes. Meanwhile, the need for front-end engineers and Quality Assurance (QA) test analysts to learn WCAG best practices is immensely important for the growing need to incorporate accessibility-focused inclusive design, development, and extensive accessibility testing, which are essential for most of the customer-facing websites.
In a fast-paced world, incorporating shift left accessibility within development and testing is the new normal. The Web Accessibility Project: Development and Testing Best Practices helps developers address right accessibility attributes to user interface (UI) components. It also helps developers focus on developing manual and automation tests for QA professionals to inject accessibility audit, accessibility functional tests, and accessibility automation tests as part of their Continuous Integration and Continuous Development (CI/CD) models. The book is filled with readily usable best practices to adapt web accessibility early in application development.
By applying the accessibility best practices covered in this book, developers can help their organizations rise to a whole new level of accessibility adherence, innovation, and inclusive design. They will also see greater work satisfaction in their professional lives and a way to help improve digital accessibility for end users.
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
Donate to keep this site alive
To access the Link, solve the captcha.
1. Disable the AdBlock plugin. Otherwise, you may not get any links.
2. Solve the CAPTCHA.
3. Click download link.
4. Lead to download server to download.
