Multiple important warning styles

[feedmypixel]

Duplicate important messages

We have multiple ways of displaying error warnings. They could do with discussion on the relevant hackpad pages and design review from @hmrc/designers then duplicates can be marked as deprecated and removed

.important-notice

component-library

.indent-warning

component-library

.highlight--*

[component-library](http://hmrc.github.io/assets-frontend/component-library/section-notification.html#kssref-notification-highlight]

[pietrodesiato]

Is there an easy way of importing the component library elements into the hackpad for discussion? Happy to use screenshots but just wondering if there's a better and more reliable way.

[rpowis]

@pietrodesiato Each hackpad has the link back to the component that the discussion should be around.

If it's a case of showing alternatives then screenshots would be the only way as hackpad doesn't render markup.

[gavinwye]

Summarising comments from Slack

View the original messages

Kieran Wyatt

Hi all. I’ve started as a content designer for HMRC in Newcastle. Got a quick query I’d value your feedback on…
I’m looking at a prototype for a page on the TaxCalc redesign. On the page will be an alert notice - see attached image.
Our developer needs an alt tag that will be read by screen readers for the black circle with the white exclamation point.
Is there a standard alt tag or descriptor for such a symbol? “Important notice”? “Warning! Warning!” etc

Phil Sherry
@kieran.wyatt This is the component library that is used in the service:
http://hmrc.github.io/assets-frontend/section-icons.html#kssref-icons-exclamation
This is the one probably used in the prototype:
https://govuk-elements.herokuapp.com/icons-images/
govuk-elements.herokuapp.com
Icons and images — GOV.UK elements (15kB)
You’ll notice neither use an

Steven Proctor
There isn't a standard, although there should be.
I've seen icons with alt text that says "Important", "Help" and others.
The version in elements says "Warning" in a visuallyhidden span instead of using an image like @philip.sherry says. The one in assets frontend doesn't have a visuallyhidden span, but the tick icon has an aria label of "tick".
The fact that the icon is there should be announced to a screen reader, otherwise they would not know it was there and it does carry important info.
Because it's only supposed to be used for legal text I'd be tempted to use "Important legal notice" or "Legal notice". (edited)