Sebastian Clavijo Suero

Posted on Aug 12 • Edited on Nov 8

WICK-A11Y Cypress Plugin: Your Unstoppable Ally for Smashing Accessibility Barriers, Cool as John Wick!

#cypress #qa #automation #a11y

Master Digital Accessibility with Wick-a11y and Conquer Web Barriers Like a Pro.

(Cover image by Flaticon Accessibility icons created by Flat Icons - Flaticon)

Table of Contents

ACT 1: EXHIBIT YOUR TARGETS
ACT 2: THE BATTLE PLAN
THE WICK RESOLUTION
- The Final Showdown: How Wick-a11y Fills the Gap in Accessibility Testing
- The Naming Secret: Why Wick-a11y?

ACT 1: EXHIBIT YOUR TARGETS

Accessibility testing is crucial to ensuring that web projects are inclusive and usable for all users, regardless of their abilities. However, integrating accessibility testing into the Cypress framework has traditionally faced multiple limitations.

Currently, many developers rely on the cypress-axe plugin, a friendly wrapper for Deque's axe-core® package, tailored for Cypress frameworks.

Axe-core® has become a standard and powerful tool for accessibility analysis. However, the results provided by axe-core® are raw, and cypress-axe does not provide additional processing. As a result, testers QA engineers have had to implement custom solutions to present accessibility violations in the Cypress log and, in some cases, in simple reports.

This is where wick-a11y steps in to fill the gap in the current Cypress ecosystem. 🚀🌟

Wick-a11y is a new open-source Cypress plugin designed to overcome these shortcomings by providing a seamless and efficient accessibility testing process. Built on the robust axe-core® engine by Deque and leveraging cypress-axe, wick-a11y offers enhanced features tailored to streamline accessibility checks, making the entire process more effective and user-friendly.

The plugin is available on GitHub and also for install via npm.

Wick-a11y ensures that your web projects are compliant with accessibility standards and provide an inclusive experience for all users. It's designed so that testers and QA Engineers can integrate it smoothly into their projects with minimal effort and configuration. With wick-a11y, accessibility results are interpreted quickly and easily, providing immediate feedback to the development team to fix the issues right away.

Join us as we explore how the open-source wick-a11y Cypress plugin transforms accessibility testing, addresses the limitations of existing solutions, and elevates the Cypress ecosystem to new heights, making accessibility checks straightforward and effective.

ACT 2: THE BATTLE PLAN

Spotting Barriers: Why Accessibility in Digital Media and Websites is Necessary

In today's interconnected world, digital media and websites serve as primary sources of information, communication, and services for people around the globe. Ensuring accessibility in these digital platforms is not merely a legal requirement but a moral imperative that promotes inclusivity and equal access for all. Here are compelling reasons why accessibility in digital media and websites is crucial:

Inclusivity and Equal Opportunity: Accessibility ensures that everyone, including individuals with disabilities, has equal access to information and services. This promotes inclusivity and ensures that no one is left behind in the digital age.
Legal Compliance: Many countries have laws and regulations that mandate web accessibility, such as the ADA in the United States, the ACA in Canada, and the EAA in Europe. Non-compliance can result in legal repercussions, including lawsuits and fines.
Enhanced User Experience: Accessible websites provide a better user experience for everyone, not just those with disabilities. Features like alt text for images, closed captions for videos, and keyboard navigation can improve usability for all users.
Market Reach: By making digital content accessible, businesses can reach a broader audience, including the millions of people worldwide who have disabilities. This can lead to increased engagement, customer loyalty, and ultimately, higher revenues.
Ethical Responsibility: Ensuring accessibility is an ethical responsibility. It reflects a commitment to social responsibility and demonstrates respect for the diverse needs of all users.
SEO Benefits: Accessible websites are often better optimized for search engines. Features like proper heading structures, alt text for images, and descriptive links can improve search engine rankings, driving more traffic to the site.
Innovation and Usability: Focusing on accessibility can drive innovation in design and functionality, leading to more creative and user-friendly solutions.

By prioritizing accessibility in digital media and websites, we can create an inclusive digital landscape that benefits everyone. It is not just about meeting legal requirements but about fostering a more equitable and accessible world for all.

Rules of Engagement: Key Global Laws and Guidelines for Website Accessibility

Accessible websites not only provide an inclusive user experience but also comply with legal requirements, reducing the risk of lawsuits and penalties. Several key laws and guidelines globally mandate website accessibility, making it a crucial consideration for web developers, designers, and business owners.

International Standards

Web Content Accessibility Guidelines (WCAG)

Overview: A set of guidelines developed by the World Wide Web Consortium (W3C) to provide a single shared standard for web content accessibility.
Global Adoption: Many countries reference WCAG standards as the benchmark for web accessibility.

Asia

China: Voluntary Web Accessibility Standard

Overview: Stipulates the international WCAG 2.0 derivative as the digital accessibility standard for compliance.
Implications for Websites: Encourages adherence to WCAG standards but it is a recommendation rather than a requirement under the law.

Japan: Act on the Elimination of Discrimination against Persons with Disabilities

Overview: Enforces accessibility but does not specify online content.
Implications for Websites: WCAG recommendations are increasingly adopted to ensure web accessibility.

Australia

Disability Discrimination Act (DDA) 1992

Overview: A law that makes it illegal to discriminate against people with disabilities.
Implications for Websites: The Australian Human Rights Commission endorses WCAG as the standard for website accessibility.

Canada

Accessible Canada Act (ACA)

Overview: A federal law aiming to make Canada barrier-free by January 1, 2040.
Implications for Websites: The ACA requires that websites and digital content be accessible to people with disabilities, in line with WCAG (Web Content Accessibility Guidelines) standards.

Europe

European Accessibility Act (EAA)

Overview: An EU directive to ensure that products and services, including websites, are accessible to people with disabilities.
Implications for Websites: EU member states must incorporate these guidelines into their national laws, ensuring compliance with WCAG standards for public sector websites and apps.

South Africa

White Paper on Rights of Persons with Disabilities (WPRPD)

Overview: This policy framework aims to ensure the inclusion of persons with disabilities in all aspects of life, including digital accessibility.
Implications for Websites: Promotes the adoption of WCAG standards to make digital content accessible for people with disabilities.

United Kingdom

Equality Act 2010

Overview: A law that protects people from discrimination in various settings, including online.
Implications for Websites: Public sector websites must meet the WCAG 2.1 AA standard.

United States

Americans with Disabilities Act (ADA)

Overview: A federal law that prohibits discrimination against individuals with disabilities in all areas of public life, including websites and apps.
Implications for Websites: Although the ADA does not explicitly mention websites, courts have interpreted it to apply to online content, ensuring that websites must be accessible to all users.

Section 508 of the Rehabilitation Act

Overview: Requires federal agencies to make their electronic and information technology accessible to people with disabilities.
Implications for Websites: Sets forth standards for ensuring that electronic and information technology, including websites, are accessible to federal employees and the public.

Ensuring compliance with these laws and guidelines is crucial for creating accessible web content and avoiding legal issues. By adhering to these standards, you can create inclusive web experiences that cater to a diverse audience.

Covering All Aspects: Specific Use Cases for Wick-a11y

Wick-a11y can be integrated into various stages of the development lifecycle to ensure that accessibility is maintained throughout.

Daily Builds: Integrate wick-a11y into your CI/CD pipeline to catch accessibility issues early. This proactive approach helps maintain compliance and allows developers to fix issues as they arise, rather than after they have compounded over time.
Regression Testing: Ensure new changes in your code do not introduce new accessibility barriers. Wick-a11y can be used in regression testing to verify that previous functionality remains accessible even after updates. This ensures that enhancements or bug fixes do not inadvertently introduce new accessibility issues, maintaining the overall accessibility of your application.
Design Validation: Validate that design and content changes are accessible before they go live. With wick-a11y, you can test and validate the accessibility of new design elements and content changes during the development phase. This ensures that accessibility is considered throughout the design process, reducing the risk of issues being discovered too late.
User Story Acceptance: Automatically validate accessibility requirements for user stories. Incorporate wick-a11y into your acceptance criteria for user stories to ensure that new features meet accessibility standards. This helps to build accessibility into the development lifecycle, ensuring that each new feature or enhancement is accessible from the start.

By incorporating wick-a11y in these specific use cases, you can significantly enhance the accessibility of your web applications, ensuring a more inclusive experience for all users.

Arming Your Arsenal: How Wick-a11y Can Help Increase Accessibility on Your Page

Wick-a11y is designed to make your accessibility testing process easier, faster, and more comprehensive. By utilizing its powerful functionality, wick-a11y empowers developers and testers to identify and resolve accessibility issues with minimal effort. Here’s how the plugin enhances your accessibility testing:

Real-time Feedback: Instantly flags in the Cypress log a comprehensive list of accessibility violations sorted by severity and grouped by the type of violation, listing all DOM elements affected, and providing immediate feedback.

Visual Identification: Additionally, highlights DOM elements with violations directly on the page using color-coded severity levels for quick identification and resolution, matching the color code of the violations in the Cypress log.

Interactive Interaction: Hovering over a specific violation in the Cypress log highlights the affected DOM element, and clicking it displays detailed information in the browser console including what accessibility rules have been violated and how to fix the issue.

Also, hovering over a DOM element with a violation highlights it graphically and shows a tooltip with the violation information details.

Comprehensive Reports: Optionally generates detailed HTML reports that include not only a summary of the accessibility analysis, and a detailed list of all the violations and affected DOM elements, but also a screenshot of the violations on the web page to easily identify the issues graphically.

Hovering over each individual DOM element violation in the report provides details on how to solve the issue. Share these comprehensive reports with your development team to streamline fixes.

Highly Configurable: Customize your accessibility checks with multiple options, such as:
- Severity levels to analyze.
- Compliant rules to execute.
- Context or scope of the analysis (which specific elements to include or exclude).
- Whether to generate a detailed HTML report.
- Applying custom styles for each severity level.
- Whether to include iframes in the analysis.
- And many more.

For a full list of all supported configuration options, refer to the API Reference of the cy.checkAccessibility() custom command.

Effortless Integration: Integrates smoothly with three simple steps into your existing Cypress test suite with minimal configuration, allowing you to enhance accessibility testing without disrupting your workflow.

1) Install wick-a11y plugin:

npm install wick-a11y --save-dev

2) Register the plugin tasks in cypress.config.js:

const { defineConfig } = require("cypress");

// Import the accessibility tasks from wick-a11y plugin
const addAccessibilityTasks = require('wick-a11y/accessibility-tasks');

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // Add accessibility tasks
      addAccessibilityTasks(on);
    },

    // ... rest of the configuration
  },
});

3) Import the plugin in your test spec and use the custom command cy.checkAccessibility() to run the accessibility check in your test:

import 'wick-a11y'

it('should check accessibility of the page', { defaultCommandTimeout: 15000 }, () => {
  cy.visit('http://example.com');

  // Ensure all elements are visible for analysis
  cy.checkAccessibility();
});

And that's it!

❤️ With these basic three steps, you have all the amazing features of wick-a11y seamlessly integrated into your Cypress framework off-the-shelf, including the the interactive User Interface and the powerful HTML reports. ❤️

Knowing the Enemy: Limitations of Accessibility Automation

Wick-a11y is an incredible tool that can significantly enhance your accessibility testing process, but it’s essential to be aware of some limitations that affect not only the plugin but accessibility automation analysis in general:

Incomplete Coverage: While automated tools like wick-a11y, powered by axe-core® from Deque, are highly effective, they don’t catch every possible issue. Axe-core® claims that it can find on average 57% of WCAG issues automatically and provide accurate results without false positives, but manual testing is still necessary.
Complex Interactions: Certain complex interactions might need further inspection and manual validation. Examples include:
- Dynamic content loading: Content that changes in response to user interactions, such as expanding menus or infinite scroll lists.
- Custom widgets: Custom-built interactive elements like sliders, carousels, or drag-and-drop interfaces.
- Keyboard navigation: Ensuring smooth navigation and operability for users relying on keyboard functionality.
- Focus management: Correctly handling focus changes, especially in single-page applications (SPAs) or modal dialogues.
False Sense of Security: While automated tools provide significant benefits, they can create a false sense of security where testers may overly rely on them and neglect manual testing. Automated tools may:
- Miss Contextual Issues: Automated tests might not catch issues that require human judgment, such as contextual understanding of content and its importance.
- Overlook User Experience: Tools may not fully replicate the user experience, especially for users with disabilities who interact with websites in unique ways.
- Fail to Understand Complex Interactions: Automation may struggle with real-world user interactions, such as custom features and workflows that require deeper inspection.

Despite these limitations, using automated tools like wick-a11y can significantly improve the accessibility of your web pages. They help you identify and resolve many accessibility issues with little effort, putting your website in a much better place in terms of compliance and user experience. By leveraging the capabilities of wick-a11y, you can make substantial strides in ensuring your content is accessible to many more users.

ACT3: THE WICK RESOLUTION

The Final Showdown: How Wick-a11y Fills the Gap in Accessibility Testing

Wick-a11y fills a significant gap in the Cypress Accessibility ecosystem, vastly enhancing the workflow of testers and QA engineers. This open-source plugin offers an incredibly easy installation and configuration process, making it accessible to all skill levels.

Wick-a11y can be integrated into your CI/CD pipeline, helping to catch accessibility issues early in the development process. By incorporating accessibility checks into each build, you ensure that new code changes do not introduce new accessibility barriers. This proactive approach maintains compliance and allows developers to fix issues as they arise, significantly reducing the risk of accumulating technical debt.

Wick-a11y comes packed with off-the-shelf features like graphical visualization of accessibility violations and detailed, easy-to-interpret HTML reports. These capabilities not only streamline the identification and resolution of issues but also facilitate clear and effective communication between testers and developers. This swift feedback loop accelerates the overall issue resolution process, ensuring your web projects are both compliant and inclusive.

By adopting wick-a11y, your team can make significant progress in accessibility testing, ultimately creating a more user-friendly web experience for everyone. Embrace the future of accessibility testing with wick-a11y and elevate your websites and Cypress testing framework to unprecedented heights.

The Naming Secret: Why Wick-a11y?

A few people have asked me why I called the Cypress Accessibility plugin WICK-A11Y. In fact, there are multiple reasons why it had to be that name.

Those of you who have known me for a longer time know that I'm a fan of the John Wick saga. I even themed some of my Cypress blogs in that underground world.

Also, "Wick-ag" is how the WCAG standard is commonly pronounced. But in a more poetic way, Wick is also the thread in a candle that maintains the flame and the light. And that is ultimately the final purpose of this plugin—to help light up the web even if it is just a little bit more.

The A11y part is obvious because it stands for "accessibility," but who does not also want to have also an ally as powerful and cool as a cucumber, like John? 😎

Don't forget to leave a comment, give a thumbs up, or follow my Cypress blog if you found this new plugin and this post useful. Your feedback and support are always appreciated! ❤️🙌

Top comments (4)

Don Welsh • Aug 15

This is an awesome plugin for accessibility testing with Cypress. It is a must read!

Sebastian Clavijo Suero • Aug 19

Thank you! Glad you find it useful.

Ryley Johnson • Aug 19

Amazing work filling in the missing links! Great documentation as well. Every framework needs to offer accessibility plug-ins!

Sebastian Clavijo Suero • Aug 19

Thanks Ryley! Accessibility has not have the appropriated attention for too long.

DEV Community

WICK-A11Y Cypress Plugin: Your Unstoppable Ally for Smashing Accessibility Barriers, Cool as John Wick!

ACT 1: EXHIBIT YOUR TARGETS

ACT 2: THE BATTLE PLAN

Spotting Barriers: Why Accessibility in Digital Media and Websites is Necessary