Overview

---

Accessibility is about making sure that everyone can use and access your website or application, regardless of their abilities or disabilities. This includes users who are blind or have low vision, users who are deaf or hard of hearing, users with mobility impairments, and users with cognitive or neurological disabilities.

Ensuring that your components are accessible is not only the right thing to do but also a legal requirement in many countries. By making your components accessible, you are opening up your website or application to a much wider audience and providing a better user experience for everyone.

Accessibility is not just about following a set of rules or guidelines, but also about understanding and empathizing with users who may have different needs and abilities than your own. As such, accessibility should be considered at every stage of the design and development process, from the initial planning stages to the final testing and validation.

Standards and Guidelines

---

Rewind-UI follows the Web Content Accessibility Guidelines (WCAG) issued by the World Wide Web Consortium (W3C) to ensure that our components are accessible to all users. The WCAG provides a set of guidelines and success criteria for web accessibility, covering a wide range of accessibility issues.

The WCAG is organized into four main principles: perceivable, operable, understandable, and robust. Each principle has a set of guidelines and success criteria that provide specific guidance on how to ensure that your components are accessible.

Keyboard Navigation

---

Keyboard navigation is an important aspect of accessibility, as it allows users who cannot use a mouse or touch screen to interact with your components. To ensure that our components are accessible to all users, we follow a number of best practices for keyboard navigation:

• All interactive elements can be accessed and activated using the keyboard alone, without requiring the use of a mouse or touch screen.
• The tab order of elements follows a logical and intuitive sequence, ensuring that users can navigate through the components in a meaningful way.
• All interactive elements have a visible focus state, indicating which element is currently focused and can be activated with the keyboard.
• Keyboard shortcuts, where applicable, are clearly documented and do not conflict with common browser or operating system shortcuts.

On the last section of each component documentation a list of all implemented keyboard interactions is provided.

ARIA and Semantic HTML

---

The Accessible Rich Internet Applications (ARIA) specification provides a set of attributes that can be used to enhance the accessibility of web content. These attributes can be used to provide additional information about the purpose and structure of your components, making them easier to navigate and use for users who rely on assistive technologies such as screen readers.

However, we believe that the best way to ensure accessibility is through the use of semantic HTML. By using semantic HTML, we ensure that our components have a clear and structured hierarchy, making it easier for users and assistive technologies to understand the purpose and function of each element.

We use HTML5 and the latest semantic tags to ensure that our components are both accessible and well-structured. This includes using headings, lists, and other semantic tags to provide context and structure to our components.

On the last section of each component documentation a link of the ARIA example is provided.