Accessibility foundation that balances design and usability

Web accessibility (a11y) is a quality standard that improves the experience for everyone, not just for people with specific disabilities, but also for keyboard users and users with temporary injuries or one-handed operation.

We organize the main points of component design so that anyone can operate it intuitively.

Three essential requirements for modal dialog design

Modals are the part where accessibility violations occur most often. You must ensure that the following three requirements are met.

1. Focus Trap: While open, Tab key movement is confined to the modal, preventing focus from leaking to elements behind it.
2. Escape key operation: Closes immediately by pressing the ESC key, and after closing, returns focus to the “original button that opened the modal”.
3. Appropriate WAI-ARIA attributes:
   • Granting role="dialog" and aria-modal="true"
   • Explicit aria-labelledby pointing to the title

Three major anti-patterns that are often overlooked

• Anti-pattern 1: Attach click event to <div> or <span>
  • Problem: Cannot be operated using the keyboard (Enter/Space), and does not appear as a button to screen readers.
  • Solution: Use native <button> tag and style with CSS.
• Anti-pattern 2: Use placeholders as labels
  • Problem: It disappears when you start typing, impairing visibility and cognitive load.
  • Solved: Prepare a <label> that is always displayed and associate it with the id of the input using htmlFor.
• Anti-pattern 3: Insufficient contrast ratio
  • Problem: Difficult to read when the contrast ratio is less than 4.5:1, such as light gray text.
  • Resolved: Fixed color palette that meets WCAG 2.1 AA standards.

Reduce man-hours with Headless UI library

Implementing accessibility from scratch on your own is extremely time-consuming. The modern standard is to use “highly accessible UI primitives without styles” such as Radix UI and React Aria, and apply only styling with Tailwind CSS, etc.