search

elixirlearners / compounds

A Phoenix UI Components Library | Brew Your Own Interfaces.
3 stars 0 forks source link

Make Components Comply to Accessibility Standards #36

Open calebgasser opened 1 year ago

calebgasser commented 1 year ago

Basically, do everything that radix is doing here. https://www.radix-ui.com/primitives/docs/overview/accessibility

cyanff commented 1 year ago

Also, use Microsoft's A11y testing extension to easily identify key points where we need to improve.

https://accessibilityinsights.io/

cyanff commented 1 year ago

Here's a list of the most crucial A11y features that we need for 1.0

Keyboard Navigation Action: Implement correct tabindex / focus traps across all components. Use JS Hooks for keyboard navigation (arrow keys).

Aria Attributes Action: Incorporate aria-label, aria-hidden, and role attributes where needed.

Semantic HTML Structure Action: Use semantic HTML elements where possible. (e.g., <header>, <nav>).

Alt Text for Images Action: Make sure all components have an :rest, :global attribute. This allow users of the component lib to pass in alt text and other DOM attributes.