Inaccessible Components

Inaccessible components show how to make websites more accessible by design and code. A set of components demonstrates the common accessibility and usability issues we can find on the web.

Understanding what these issues mean for users is crucial. This knowledge can help you to learn how to create more accessible components. It is important to know what to do, but also what not to do.

There are different ways to make components accessible. Especially when components have many variants and features. We show you one of the possible ways of fixing the problems.

There are also videos to explain the issues. We are working on creating more content and videos, so stay tuned for updates.

Check the following video that gives you an introduction to the project.

List of components

Here is a list of inaccessible components. Each of them has both inaccessible and more accessible versions, including code. There is also a description of their accessibility and usability issues and extra considerations:

• Accordion
• Breadcrumb
• Card
• Checkbox
• Form
• Modal
• Radio Group
• Tabs