Exploring icons in the notification banner component

Looking at use of icons or other visual indicators (such as consistent content) to make the difference between the notification banner variants clearer

What

Explore feasibility of using icons or other indicators (e.g. content) in notification banners.

Why

Icons were suggested to improve the visual difference between the notification banner variants. Whilst not a Web Content Accessibility Guidelines (WCAG) fail, it can make it harder for users to see the difference between the banners by using colour alone.

An accessibility review also highlighted that we should try and apply consistency to how different types of banner are announced to screen readers.

How

Make suggestions and provide examples of different notification banners with icons.

Icons on smaller screens should still allow for the user to get the information they need efficiently and have relevance to the content.

A record of the design process and an explanation on the decisions made was added to the GOV.UK Design System GitHub backlog.

This fed into wider work on the component. The notification banner component summary of release.

Colour