Accessibility

For developers

Semantic markup

Using an ordered list (<ol>) provides semantic meaning and proper structure. Screen readers announce the total count and position of each item.

Screen readers

• Add aria-label to the <ol> to provide context (e.g., aria-label="Energy efficiency ratings").
• Mark the selected rating with aria-current="true" so screen readers announce it as the current value.
• The ordered list inherently conveys the hierarchy — no additional ARIA is needed for the order itself.