Skip to content

Toggle: Update label semantics for accessibility

Based on this comment:

Something to consider is that "Dark mode" is present in both a span, and aria-label. If an ID was added to the span, then instead of aria-label the button could use aria-labelledby="spanID". In this way you reduce the chance that these won't match since there's only a single element acting as both the visual and functional name for the control. By adding the "sr-only" class to that span, it could be visually hidden, but still act as the accessible name so the toggle could be placed in other layouts and alignments as has been discussed.

From &6905 (comment 706448711)

Edited by Jarek Ostrowski