What is a selected state in UX design?
A selected state is the persistent visual treatment applied to an element that has been chosen from a set of options, indicating it is the currently active or chosen item. Unlike hover state and active state which are transient responses to cursor position and press, a selected state persists after the user's interaction ends, until the user selects a different item. Selected states appear in navigation components where the current page is indicated, tab bars where the active tab is highlighted, list items where the currently viewed item is marked, and segmented controls where the active mode is shown.
How should selected states be visually differentiated?
Selected states must be visually distinct from both the default unselected state and the hover state, so that users can clearly distinguish between what is currently selected and what is simply being hovered over. A common approach is to use a filled background for the selected state, a border or underline for the hover state, and no additional treatment for the default state. The selected state should be the most visually prominent of the three, since it communicates permanent active status rather than transient interaction feedback. Color contrast requirements apply to selected state text and backgrounds.
How are selected states communicated to screen readers?
Screen readers must be informed of selected states through programmatic attributes rather than relying on visual treatment alone. In navigation components, the currently active page link should use aria-current="page". In tab components, the active tab uses aria-selected="true" while inactive tabs use aria-selected="false". In list components with single selection, the selected item uses aria-selected="true". In segmented controls or toggle button groups, the active button uses aria-pressed="true". These attributes ensure that screen reader users know which item is currently selected without needing to interpret visual styling.