Accessibility

Products that are accessible to all users are good for people, products, and business. All users should be empowered with access and the ability to have a pleasant experience.

Grommet follows the Web Content Accessibility Guidelines (WCAG). By following this style guide and utilizing Grommet, you will be well on your way to satisfying the WCAG recommendations.

Grommet will add the basic accessibility support automatically. For example, all our graphics are accessible and keyboard operable. The following sections will describe additional features that will allow your application to be even more accessible.

Custom title

Grommet components can be read by screen readers. The default textual description varies for each component. In general, this description is generic and lacks contextual information that help users to understand the surrounding data. Most Grommet components support a property called a11yTitle that enables callers to provide a better description.

Example:

Using a11yTitle for icons to explain their purpose.

<Status a11yTitle='Server Down'
  value='critical' />

For this example, will read "Server Down, Image" instead of "Critical, Image".

Language support

If the lang attribute is not explicitly set in the html element, Grommet will specify the lang attribute according to the user browser’s locale. In addition to the html element, lang attribute can be set on other elements like App.

Example

<App lang='en-US'>
  Testing
</App>

Skip Links

Grommet has skip links that make it easy to skip repetitive content. By default, Grommet skip links have two locations: Skip to Main Content and Skip to Footer. To set the "Skip to Main Content" link in Grommet, an attribute primary="true" needs to be added to a Box element. The "Skip to Footer" link works in a similar way by adding primary="true" to a Footer component. Custom skip links are possible by creating an instance of a SkipLinkAnchor.

Skip links will be automatically presented when pressing tab in a given page.

Example:

<App>
  <Box primary={true}>
    Main Content
  </Box>
  <Box>
    <SkipLinkAnchor label='Custom' />
    Custom skip link
  </Box>
  <Footer primary={true}>
    Application Footer
  </Footer>
</App>