Announce state changes and errors

In our TELUS digital experiences, we configure carts, open and close modals, navigate with our global navigation, and submit forms. All of these interactions are required to provide feedback to our users, to announce their changes, their successes, or their failures to complete. Be sure to announce the state change to our customers, especially any error messages.


Usher the user through context changes

Usher the user through context changes

Visual indications of UI changes need a text-equivalent. 

Multisensory information ensures that people with different disabilities can perceive the change.

Design the user experience to leverage focus management and context reaffirmation as described in the keyboard accessibility related Focus order guide for dynamic content, especially if it occurs somewhere else on the screen. 

Using focus order and focus management helps identify content to the most users, while WAI-ARIA aria-live can announce to screen readers, it cannot identify change in states to as many assistive technologies as you can with focus order and focus management.

Always create a way for a customer to return back to their original place on the website or screen.

Visual indications of UI changes need a text-equivalent. 

Multisensory information ensures that people with different disabilities can perceive the change.

Design the user experience to leverage focus management and context reaffirmation as described in the keyboard accessibility related Focus order guide for dynamic content, especially if it occurs somewhere else on the screen. 

Using focus order and focus management helps identify content to the most users, while WAI-ARIA aria-live can announce to screen readers, it cannot identify change in states to as many assistive technologies as you can with focus order and focus management.

Always create a way for a customer to return back to their original place on the website or screen.


Tips for visual design and content

Tips for visual design and content

Remember to also design, build content, and code interstitial states when content is lagging, like loading screens or progress bars.

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 accessibility 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.

Remember to also design, build content, and code interstitial states when content is lagging, like loading screens or progress bars.

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 accessibility 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.


Error message specific

Error message specific

For error messages, ensure the users are aware the error message has appeared and know what they need to do to correct it.

When providing error messages use plain language. Avoid using jargon or error codes. Keep error messaging close to content so that it is easier to find, in context and provide a summary if possible. 

Review the Plain language for accessibility guide for a comprehensive guide on writing simple easy to understand content. 

For error messages, ensure the users are aware the error message has appeared and know what they need to do to correct it.

When providing error messages use plain language. Avoid using jargon or error codes. Keep error messaging close to content so that it is easier to find, in context and provide a summary if possible. 

Review the Plain language for accessibility guide for a comprehensive guide on writing simple easy to understand content. 


Keep it consistent

Keep it consistent

Consistency in format and identification is important for announcing states. Content should have a list of words for customer interactions so customers can easily recognize the announcements experience throughout the website.

Consistency in format and identification is important for announcing states. Content should have a list of words for customer interactions so customers can easily recognize the announcements experience throughout the website.


Explore more

Explore more