Communicate the current state

We often design visuals to show if an element is selected or not, if it is disabled, read-only, or active, or to show if a navigation element is the current one selected. Multisensory information ensures that people with different disabilities can perceive the state.


Identifying the state

Identifying the state

Identify any elements that change states on your website or app:

  • Form fields like checkboxes, radio buttons, buttons, input fields, all have built-in feedback to show states like current, selected, default, hover over, focused, pressed, and whether they are disabled or read-only
  • Use native HTML or Native app components where possible. Otherwise, leverage how they identify the current states of the elements to customers for all accessibility user experiences to inform the custom experiences

Visual indicators need to work in High Contrast Themes. If you use an <svg> or <image> the content writer and developer can add in the appropriate alternative text option to make the “current” notifier available to screen readers as well.

Identify any elements that change states on your website or app:

  • Form fields like checkboxes, radio buttons, buttons, input fields, all have built-in feedback to show states like current, selected, default, hover over, focused, pressed, and whether they are disabled or read-only
  • Use native HTML or Native app components where possible. Otherwise, leverage how they identify the current states of the elements to customers for all accessibility user experiences to inform the custom experiences

Visual indicators need to work in High Contrast Themes. If you use an <svg> or <image> the content writer and developer can add in the appropriate alternative text option to make the “current” notifier available to screen readers as well.


Match the programmatic state and visual state

Match the programmatic state and visual state

Make sure the state and function of the element in question has a visual state that matches the programmatic state.

Example: A read-only state is not the same as a disabled state.

For the visual design, review the Colour Cues guide, Colour contrast introduction guide, and the Designing for colour blindness guide, and the Plain language for asccessibility Guide.

Always be sure the state change meets colour contrast and/or colour cues requirements, otherwise customers with colour blindness or vision difference may miss important content.

Make sure the state and function of the element in question has a visual state that matches the programmatic state.

Example: A read-only state is not the same as a disabled state.

For the visual design, review the Colour Cues guide, Colour contrast introduction guide, and the Designing for colour blindness guide, and the Plain language for asccessibility Guide.

Always be sure the state change meets colour contrast and/or colour cues requirements, otherwise customers with colour blindness or vision difference may miss important content.


Explore more

Explore more