State names
It can be difficult to ensure that naming conventions are used consistently, and even giving things appropriate and easily understood names can be a challenge. When designing interfaces we want to use the same words for each state (e.g. active, selected). HTML and CSS conventions provide a set, solid standard and make for a good shared language.
Below you can find a guide to the names of different UI states.
States
Name | Description | CSS selector | Notes |
|---|---|---|---|
| Focus | An element has keyboard focus. | :focus | Links, buttons, and inputs can receive a focus state. Navigation items, accordions, and tabs can too, usually because they're links or buttons. Note that other elements can be made to receive focus using tabindex, but since they're not interactive elements this should be avoided (and without additional ARIA code are a fail under WCAG). |
| Focus Within | An element which contains an element that has keyboard focus. | :focus-within | Any element that contains links, buttons, or inputs can receive a focus-within state. |
| Hover | An element is being hovered over. | :hover | Links can receive a hover state. Buttons and form controls can too, and are often styled in this state. Note that most other elements can receive hover too (e.g. table rows, list items), but unless they are interactive elements applying hover styles should be done carefully. |
| Active | A link or button is being used (i.e. on mousedown, before mouseup). | :active | Links and buttons can receive an active state. Form controls can too, but are seldom styled in this state. Note that an active link or button also has focus state. |
| Disabled | A form control or link cannot be interacted with. | [disabled] (for form controls) or aria-disabled="true" (for links) | Form controls (buttons, text field, selects, etc.) can be disabled. They don't receive focus, but do receive hover and active states. Note that a elements (links) can be disabled using aria-disabled="true" or made inert by omitting the href attribute. |
| Pressed | A button is marked as 'pressed'. | [aria-pressed="true"] | Only buttons can receive this state, via aria-pressed="true". This is one way of doing a toggle switch. |
| Checked | An option is selected in a radio or checkbox group. | :checked | Only radios and checkboxes can receive this state. |
| Current | A nav item is the current one, or a step is the current one in a process. | aria-current="page|step" | Only links or text elements can receive this state, via aria-current="page|step". |
| Selected | A piece of widget is "selected" (e.g. a tab is selected in a tab group). | aria-selected="true" | Buttons or links can receive this state, via aria-selected="true". |
Common confusions
Tabs
We visually highlight one tab in a set of tabs. It's clearest to say that the tab is selected. Saying it's 'active' could be confused with the active state of a link or button. Saying it's current is okay, but doesn't match the functionality.
Navigation items
We visually highlight one item in a navigation set. It's clearest to say that the item is the current item. Saying it's 'active' could be confused with the active state of the link when it's clicked on.
Button group
We visually highlight the chosen button in a button group. It's clearest to say that the chosen button is pressed since we'll use a button with aria-pressed="true".
Toggle button or switch
A toggle button has on and off states. In its 'on' state:
- If the function is to change the UI of a page, it's clearest to say that the toggle is pressed since we'll use a button with
aria-pressed="true". - If the function is to make a selection, it's clearest to say that the toggle is checked since we'll use checkbox with a checked state.
Ideally, we should use toggles for changing the UI and checkboxes for making a selection.
Disabled elements
Form controls can be disabled using the disabled attribute, and links can be disabled using aria-disabled="true".
More complex components like menu items and tabs will either be buttons or links, so can be disabled using one of these two approaches.