Accessibility

The right approach on how to fix common accessibility issues in your Vactory Project

In this document, we will explore common accessibility issues and how to address them using best practices.

When you run yarn workspace YOUR_WORKSPACE lint, you may encounter the following errors. Each error has a specific directive, such as jsx-a11y/click-events-have-key-events or jsx-a11y/no-static-element-interactions. Let's examine each error and how to fix them one by one:

jsx-a11y/click-events-have-key-events

Enforce a clickable non-interactive element has at least one keyboard event listener

❌ Fail

<div onClick={() => setVideoVisible(true)}>Some text</div>

✅ Succeed

<div
    onClick={() => setVideoVisible(true)}
    onKeyDown={(e) => e.key === "Enter" && setVideoVisible(true)}
    role="button"
    tabIndex={0}
>
    Some text
</div>

As shown above, we have made the following additions:

  • onKeyDown : This allows the user to interact with the element using the keyboard, specifically when they press the Enter key.
  • role="button" : This assigns the element the role of a button, enabling it to be included in the tab order.
  • tabIndex={0} : This makes the element focusable and navigable using the keyboard.

jsx-a11y/no-redundant-roles

Some HTML elements have native semantics that are implemented by the browser. This includes default/implicit ARIA roles. Setting an ARIA role that matches its default/implicit role is redundant since it is already set by the browser.

❌ Fail

<ul role="list">...</ul>

✅ Succeed

<ul>...</ul>
Apply patchesReact-Toastify