Purpose of this Issue

The purpose of this issue is to identify keyboard/ARIA accessibility improvements that can be made in Grommet to better align the library with WCAG standards. Grommet does a great job of building in accessibility, but there are some areas for improvement.

What is accessibility?

Accessibility is the practice of making your websites usable by as many people as possible. Some users can navigate only via keyboard, or screen reader, etc. You might also think of accessibility as treating everyone the same, and giving them equal opportunities, no matter what their ability or circumstances.

Source: https://developer.mozilla.org/en-US/docs/Learn/Accessibility/What_is_accessibility

How were these improvements identified?

Grommet components were assessed for their keyboard navigability and success with Voiceover. Their behavior was compared side by side with the recommendations from WCAG. Typically, searching for [component] + wcag keyboard returns links to the appropriate section of w3 site.

For example, searching range "input wcag keyboard" returns this helpful resource as a top result: https://www.w3.org/TR/wai-aria-practices/examples/slider/slider-1.html

The behavior of the above slider example (via mouse, keyboard only, and screen reader) can be compared side by side with the Grommet component to identify any discrepancies. Additionally, there is often direct guidance for what the keyboard behavior should be.

Additionally, for some FormField label things, the WAVE chrome browser plugin was used. This identifies certain ARIA and color contrast errors.

Grommet Component Analysis Results

The following are the areas of improvement that need to be address and have tests written for.

FormField

• Providing a label on a FormField and on its contained Checkbox leads to an orphaned label on the formfield.

Meter

• Similar to Chart, screen reader users should be able to identify what's in the chart without seeing it.
• Currently, Voiceover doesn't have access to read chart text information; just read out as "image" with no content information
• Recommendation, some sort of aria attribute should explain the value.