red-hat-design-system icon indicating copy to clipboard operation
red-hat-design-system copied to clipboard

Published 20 hours ago • verified publisher icon RedHat-UX

Investigate best practices for labeling field custom element

Open nikkimk opened this issue 1 year ago • 2 comments

Description

We discovered accessibility issues with making rh-range a form-associated custom element, so we are reviewing other design systems' web components to determine which methods are accessible.

Field custom elements need to be able to do the following:

  • have a simple text label
  • have a visually hidden label
  • have a label that includes HTML

In order to be accessible they must also:

  • have a machine-readable label associated with them
  • prevent screen readers from reading the label text twice

The accessibility will be tested at a minimum via:

  • axe DevTools
  • VoiceOver + Safari
  • VoiceOver + Chrome
  • VoiceOver + Firefox
  • NVDA + Firefox
  • JAWS + Chrome

nikkimk avatar Apr 06 '23 20:04 nikkimk