A11y-focused
Component
Libraries

  • to not reinvent the wheel
    (aka lower development effort)
  • to profit from a11y best practices
  • to improve an existing (non-SI) project

Why?

  • incomplete
  • weird to style (CSS element selectors)
  • strange abstraction level

Reach UI

<Menu>
  <MenuButton>
    Actions <span aria-hidden>▾</span>
  </MenuButton>
  <MenuList>
    <MenuItem onSelect={() => alert("Download")}>Download</MenuItem>
    <MenuLink
      as="a"
      href="https://reach.tech/workshops"
    >Attend a Workshop</MenuLink>
  </MenuList>
</Menu>
  • very complete
  • requires styled-components and polished
  • too opinionated, closer to a full-blown UI component library

grommet

  • fairly complete
  • no outside dependencies (aside from React)
  • nice abstraction level 😍
    • wraps components mainly to provide props or do "transformations"
    • supports React hooks (and more)
    • unstyled by default

Reakit

Understanding and choosing libraries based on their abstraction level can make a lot of sense!

Eye opener for me

Thanks.

Feedback? Questions?

A11y-focused Component Libraries

By Sebastian Herrmann

Made with Slides.com

A11y-focused Component Libraries

Results from my research about accessibility-focused component libraries for React.

  • 1,007

More from Sebastian Herrmann