Skip to main content

Error Communication

When something goes wrong in your application, there usually is an error message or an error page. For some users that is not enough. It needs to be clear to every user what happened and if there are actions for the user to do.

General best practices​

Don't only use colors or icons in your message to signal that something went wrong. Also make use of the different voice-over tools to tell users with visual impairments. This can be done using live announcers like in Angular or with aria-live. The aria-live attribute indicates that an element will be updated and describes the types of updates to the assistive technologies.

Empty state​

Whenever the user goes to a page without content, or there is no content left after applying filters, the user should be informed. In the case of a filter, the user should be informed to apply a different filter, also using announcers for visually impaired users.

User Error​

Whenever the user enters invalid information in a form, the user should be notified. It should be clear what the mistake was, where it was made, and it is communicated also using voice-over tools.

Application Errors​

The information about the error should be communicated in text and via announcers. The user should also be informed about the next steps to take, for example, to contact support or to come back later in case of an outage.

Resources​