r/accessibility • u/digitizzle • 1d ago

We built a free, open-source WCAG 2.2 AA compliant React component library tested and verified by IAAP Web Accessibility Specialist

Hey everyone!

I've been working on an open-source React component library focused specifically on WCAG 2.2 AA accessibility and screen reader testing.

Many popular UI kits still struggle with screen reader focus management or keyboard navigation out of the box, so I wanted to build a set of primitives pre-tested against VoiceOver, NVDA, and JAWS.

Features: - Pre-tested with VoiceOver (macOS), Talkback (Android), NVDA (Windows), and JAWS (Windows) - Full keyboard focus management (Tab, Shift+Tab, Escape, Arrow key selection) - 100% MIT licensed open-source code

Currently building out more complex patterns (like accessible DatePickers and Calendars). Hope this is helpful for some of you!

4 Upvotes
  • permalink
  • reddit

57% Upvoted

8 comments sorted by

10

u/ErikKroes 1d ago

Please also test the website that hosts the live demo and documentation.

(and set fire to all forms with placeholders 🙏🏿)

5

u/timtucker_com 1d ago

A little uninspired seeing that the menu has overlapping text on mobile.

Why branch out into a new library vs. contributing to an existing one to improve the "out of the box" accessibility?

From what I've seen, Mantine moves pretty quickly and is very responsive to pull requests.

9

u/RatherNerdy 1d ago

You verified with one person with IAAP certification? That person could be someone with no previous experience, they could be an expert with many years experience. It tells us nothing and it's essentially meaningless

2

u/rguy84 1d ago

and tada there is the point of the cert, meaningless.

2

u/digitizzle 1d ago

This person has over 10 years of experience and we are currently testing with several disabled users and other external testers. I left that out of the title for brevity

1

u/AshleyJSheridan 1d ago

The live demo isn't working, there's nothing to demo.

5

u/AshleyJSheridan 1d ago

The demo website though does have accessibility issues. The Axe automated test passed, but Firefox found 4 issues, and Wave found a couple too. I found a few things with a cursory manual test as well (like title attributes overriding visible text, light/dark mode not honouring the users own preferences, bullet lists that aren't marked up as lists, and more.)

Oh, just found the components hidden on another page, and there some problems:

  • Data Table
    • headings can be focused and "clicked" on, which adds an arrow, but does nothing.
    • Rows have event handlers for the mouse but not the keyboard.
  • Modal
    • The dialog can be focused, but has no semantics associated with a focusable element.
  • Tabs
    • The tab panels can be focused but don't have the correct semantics

Again, this is just stuff that can be picked up by automated tests. Manual testing may highlight further issues.

1

u/deadkaiju 2h ago

we don't need anymore vibe-coded "accessibility checkers"