Adding Accessibility Information to the Component Page

Oct 13, 2025 by thesweetdesigns.com 92 views

Introduction

As part of our ongoing efforts to ensure the Design System site is accessible to all users, we need to assess the CheckBox component's compliance with the Web Content Accessibility Guidelines (WCAG) 2.2. This documentation outlines the process for assessing the applicable WCAG rules, creating a pull request to add accessibility information to the component page, and identifying areas for improvement.

Assessing WCAG Rules

The first step is to identify which WCAG rules are applicable to the CheckBox component. The WCAG 2.2 guidelines provide a comprehensive set of rules for ensuring web content is accessible to users with disabilities. We will assess the following rules:

1.1.1: Non-text Content - All non-text content must be accompanied by a text alternative that conveys the same information.
1.4.1: Punctuation Conventions - When punctuation is used to indicate a pause or separation, it must be used consistently.
2.1.1: Keyboard - All functionality of the component must be accessible through a keyboard.
2.4.3: Focus Order - The component must follow a logical tab order.
3.2.1: On Input - When the user interacts with the component, the component must not change the context in a way that would be difficult for a user to recover from.
4.1.1: Parsing - The component must be parseable by a screen reader.

WCAG Compliance Status

After assessing the applicable WCAG rules, we will determine the compliance status of the CheckBox component. The component will be classified as:

Passing: The component meets all applicable WCAG rules.
Failing: The component does not meet one or more applicable WCAG rules.

Adding Accessibility Information to the Component Page

Once we have determined the compliance status of the CheckBox component, we will create a pull request to add accessibility information to the component page. The pull request will include the following information:

WCAG Compliance Status: A summary of the component's compliance status with the applicable WCAG rules.
Applicable WCAG Rules: A list of the applicable WCAG rules and their corresponding status (passing or failing).
Recommendations for Improvement: A list of recommendations for improving the component's accessibility.

Creating Issues for Non-Compliant Rules

If the CheckBox component does not meet one or more applicable WCAG rules, we will create issues in the relevant repository (grommet, grommet-theme-hpe, etc.) for each non-compliant rule. The issues will be tagged with the 'bug' label and will include the following information:

Rule Number: The number of the applicable WCAG rule.
Rule Description: A brief description of the applicable WCAG rule.
Component Impact: A description of how the component's accessibility is impacted by the non-compliance.
Recommendations for Improvement: A list of recommendations for improving the component's accessibility.

Example of a Completed Pull Request

The following is an example of a completed pull request for the CheckBox component:

**CheckBox Component**
=====================

**WCAG Compliance Status**
-------------------------

The CheckBox component meets all applicable WCAG rules.

**Applicable WCAG Rules**
-------------------------

* **1.1.1**: Non-text Content - The component meets this rule.
* **1.4.1**: Punctuation Conventions - The component meets this rule.
* **2.1.1**: Keyboard - The component meets this rule.
* **2.4.3**: Focus Order - The component meets this rule.
* **3.2.1**: On Input - The component meets this rule.
* **4.1.1**: Parsing - The component meets this rule.

**Recommendations for Improvement**
--------------------------------------

None.

**Issues for Non-Compliant Rules**
-------------------------------

None.

Conclusion

Q&A

Q: What is WCAG and why is it important?

A: WCAG stands for Web Content Accessibility Guidelines, which are a set of guidelines for making web content more accessible to people with disabilities. WCAG is important because it helps ensure that web content is usable by everyone, regardless of their abilities.

Q: What are the different levels of WCAG compliance?

A: There are three levels of WCAG compliance: A, AA, and AAA. Level A is the most basic level of compliance, while Level AAA is the most stringent. Our goal is to achieve Level AA compliance for all components in the Design System.

Q: How do I determine which WCAG rules are applicable to a component?

A: To determine which WCAG rules are applicable to a component, you can use the WCAG 2.2 guidelines as a reference. You can also use tools such as the WAVE Web Accessibility Evaluation Tool or the Lighthouse accessibility audit to help identify potential accessibility issues.

Q: What is the difference between a "passing" and "failing" WCAG rule?

A: A "passing" WCAG rule means that the component meets the requirements of the rule, while a "failing" WCAG rule means that the component does not meet the requirements of the rule.

Q: How do I create a pull request to add accessibility information to a component page?

A: To create a pull request to add accessibility information to a component page, you will need to follow these steps:

Determine which WCAG rules are applicable to the component.
Assess the component's compliance with the applicable WCAG rules.
Create a pull request with the following information:
- WCAG compliance status
- Applicable WCAG rules
- Recommendations for improvement

Q: What is the purpose of creating issues for non-compliant rules?

A: The purpose of creating issues for non-compliant rules is to identify areas for improvement and to track progress towards achieving Level AA compliance.

Q: How do I tag an issue with the 'bug' label?

A: To tag an issue with the 'bug' label, you can use the following syntax: #bug. This will assign the issue the 'bug' label and make it easier to track progress.

Q: What is the deadline for creating a pull request and issues for non-compliant rules?

A: The deadline for creating a pull request and issues for non-compliant rules is the end of the first week of the sprint.

Q: How do I ensure that the component page is up-to-date with the latest accessibility information?

A: To ensure that the component page is up-to-date with the latest accessibility information, you can follow these steps:

Regularly review the component's compliance with the applicable WCAG rules.
Update the component page with the latest accessibility information.
Create a pull request to reflect any changes to the component page.

Q: What is the role of the Design System team in ensuring accessibility?

A: The Design System team plays a crucial role in ensuring accessibility by:

Developing and maintaining accessible components.
Providing guidance and support for developers and designers.
Conducting regular accessibility audits and assessments.

Q: How can I get involved in ensuring accessibility in the Design System?

A: To get involved in ensuring accessibility in the Design System, you can:

Participate in accessibility audits and assessments.
Contribute to the development of accessible components.
Provide feedback and suggestions for improving accessibility.

Conclusion

In conclusion, ensuring accessibility in the Design System is a team effort that requires the involvement of everyone. By following the guidelines and best practices outlined in this documentation, we can create a more accessible and inclusive design system that benefits everyone.