abstract: Design systems are a popular way for teams to flavor their design and development workflow. However, an often-missing ingredient in many design systems is a focus on accessibility best practices — especially when component libraries are involved. In this talk, we’ll take a look at how you can mix some commonly-used components with the ingredients of accessibility. Pair this with best practices guidance in your documentation, and you’ll have the recipe for a delectably inclusive design system.
<span class="root"> <!-- "root" forces the inline-block display to easy styling--> <span class="icon icon-email" aria-hidden="true"></span> <!-- hides the icon from screen readers --> <span class="visuallyHidden">email</span> <!-- remove the visual representation from the UI but visible to screen readers--> </span>
aria-hidden="true"attribute to the top span
Font-awesomeis built with Accessibility in mind!
aria-describedby(parred with the error label id)