Skip to content

Counter

Considerations for designers and developers

  • Counter text should be clear and concise.
  • If you're using Counter on a colored or dark background, make sure that it has enough contrast against the background.
  • Include counters in the reading order so screen readers can access it.
  • Counters aren't interactive, so they don't have to be in the keyboard focus (tab) order.
  • You can use ScreenReaderOnly component for screen readers to announce counter value along with some accompanying text. Refer to the example for more details.
  • Avoid using aria-label and aria-labelledby attributes on non-interactive text, that is, on span and div elements without an interactive role.

Other recommendations

See more accessibility recommendations in the common Accessibility guide.

Released under the MIT License.

Released under the MIT License.