Considerations for designers & 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.