DEV Community

Cover image for Can you create an accessible React component?
stereobooster
stereobooster

Posted on • Edited on

Can you create an accessible React component?

Let's try a fun experiment. In the first post, we talked about how to create React accessible component, in the second one how to test it, in the third one I propose you to try to write accessible component yourself. (Strictly speaking, it doesn't have to be React, but I won't be able to review it otherwise)

We will try to write accessible tabs component. There is WAI-ARIA Authoring Practices 1.1. recommendations.

I created a starter repository with Cypress tests according to recommendations. I tried my best with those test, but they may need some adjustments - it is hard to do test first approach with e2e tests, it works smoothly only for unit tests. There is Travis CI which will run tests.

Tabs component is pretty similar to the accordion component, about which we talked in the first post, so you can use the first example as inspiration. This can be a nice learning experience. I learned thing or two while I created and fixed bugs in the code for the first post.

Top comments (3)

Collapse
 
sjsyrek profile image
Steven Syrek
Collapse
 
georgecoldham profile image
George

Bit late I know, but why not WAI-ARIA 1.2

Collapse
 
stereobooster profile image
stereobooster

I missed there is a later version