Warning text

[govuk-design-system]

Use this issue to discuss the warning text component in the GOV.UK Design System.

Description

Use warning text to warn users about something they need to know, such as legal consequences of an action, or lack of action, that they might take.

[a184studio]

Does the icon sit inline with the first line if a paragraph is over two or more lines?

[dashouse]

@a184studio As the screen size will change, the amount of lines is somewhat of an unknown. Using the warning text component from the Design System the icon is vertically centred within it's container. Here's an example below:

If you have a very large amount of warning text, such as actual full paragraphs then I could see the benefit to overriding the default and aligning to the top of the container. However it might be better to revisit the amount of content to give a short warning and an accompanying paragraph below to explain the details.

[a184studio]

@dashouse / Dave This is what I'm looking at, three lines within the paragraph.


[dashouse]

@a184studio Thanks for the context, I think aligning to the first line in this case is fine. Although it doesn't make a huge amount of difference on large screens I imagine it would be 7 or 8 lines on mobile so there would be some benefit to see the icon in-line with the first line.

Generally I am wondering if this message constitutes a Warning, Inset text (https://design-system.service.gov.uk/components/inset-text/) may be a better fit?

p.s. I will create an issue to consider adding an align-top option to warning text

[a184studio]

@dashouse Thanks I'll take it back to my content regarding the (!), we I was looking for (i) information Icon. On the HTML options there is an option for adding the (i), i didn't see one for the Nunjucks.

— “I will create an issue to consider adding an align-top option to warning text” Great thanks, from a typographic point of view it makes more sense and it's doing a DropCap job. Those sit in the first line of a paragraph and then lead on to the information.

Thanks Dave

[a184studio]

@dashouse For a temporary hack I did this.

.govuk-warning-text__icon {
top: 33.3%;
}

[NickColley]

@a184studio thanks for sharing.

Dave has raised an issue for this here: alphagov/govuk-frontend#1352

Your hack will work fine for a prototype but if you are considering that for production I would recommend doing something like:

.app-warning-text--long {
  top: 33.3%;
}

<div class="govuk-warning-text app-warning-text--long">
 <!-- ... -->
</div>

See Extending and modifying components in production for more information.

[a184studio]

@NickColley God yeah, this is for a prototype only. But i have named it the way you have suggested.
I'll look out for an official version.

[edwardhorsford]

I'm considering using a link inside of warning text and note the text colour of the anchor isn't set to black - is this intentional?

What it looks like on my service:

[edwardhorsford]

A minor one: when used alongside radios, the warning icon is close but annoyingly not the same size as them. The text is also not quite in line with radio options.

Any thoughts on making the size consistent?

Manually fudged:

Manual fudge is visually the same size but actually a bit smaller because of perception of solid shapes.

[mgifford]

Is there any semantics in here for accessibility? Seems it's a very simple div/span with no easy way to alert screen reader users. The Canadian & USA gov design tools are both at least recommending use of headings.

Also, how do you differentiate errors, warnings, information and regular status updates?

https://designsystem.digital.gov/components/alert/
https://wet-boew.github.io/themes-dist/GCWeb/provisional-en.html#alert

[a184studio]

@mgifford Yeah Exactly that. (In reference to alignment, inline with first line.)

[timpaul]

Hi @mgifford, thanks for the feedback.

This component isn't intended to be used as an alert, but as a way of styling content on a page that draws attention to its warning nature.

For users of screen readers the component contains a text fallback that is read out before the content. This defaults to the word 'Warning', but can be overridden. The content is marked up using a <strong> tag to semantically emphasise its importance.

The component doesn't contain a header because that would imply that it is the header of whatever content follows it, and this isn't how the component is intended to be used.

We're in the process of developing a new component for alerts and notifications, and this will include markup to help users of assistive technology.

[36degrees]

This is an example of the warning text component used in context:

https://www.gov.uk/guidance/coronavirus-covid-19-mots-for-cars-vans-and-motorcycles-due-from-30-march-2020#get-unsafe-vehicles-repaired

[mgifford]

Ok, so in the example above @36degrees this is the HTML:

<div role="note" aria-label="Warning" class="application-notice help-notice">
<p>You can be fined up to £2,500, be banned from driving and get 3 penalty points for driving a vehicle in a dangerous condition.</p>
</div>

I don't think this is right either https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute

But it also isn't defined here in the pattern:
https://design-system.service.gov.uk/components/warning-text/

@timpaul I don't know what the answer is to this, but GDS is a leader in User Research? What have you found engaging with people with disabilities? Is <strong> sufficient for them?

You have less semantics than the Government of Canada or USA. That might be appropriate, but would be good if there was some evidence to back this up.

[36degrees]

Ok, so in the example above @36degrees this is the HTML:

<div role="note" aria-label="Warning" class="application-notice help-notice">
<p>You can be fined up to £2,500, be banned from driving and get 3 penalty points for driving a vehicle in a dangerous condition.</p>
</div>

I don't think this is right either https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute

But it also isn't defined here in the pattern:
https://design-system.service.gov.uk/components/warning-text/

Apologies, it looks like the page I linked to hasn't been fully migrated to the Design System, and so is using older markup. The intent was to show an example of the warning text component in context.

You have less semantics than the Government of Canada or USA. That might be appropriate, but would be good if there was some evidence to back this up.

The components have different semantics because they're designed to do different things.

The alerts component in the USWDS is designed (according to their own documentation) to '[keep] users informed of important and sometimes time-sensitive changes', and as far as I can see from the examples would be used e.g. at the top of the page to inform users that something has happened, perhaps as a result of an action they've taken.

It makes sense therefore that it uses the alert role, as this means that assistive technology can then notify the user about it.

The warning text component is designed to 'warn users about something important, such as legal consequences of an action, or lack of action, that they might take' – to emphasise important information within a wider piece of content. It's designed to be read in the context of that content, and it would be inappropriate to use the alert role for it.

In terms of user research, if there were issues with the warning text flagged during research we'd expect to hear about them through our support channels or via this GitHub issue (you can see a good example of this in action in the backlog issue for the task list pattern.

@a184studio the alignment of the warning text component was changed in alphagov/govuk-frontend#1578, which was released as part of GOV.UK Frontend v3.3.0.

[mgifford]

This is definitely useful, so thanks.

The USWDS only uses ARIA on the Error status messages. This would definitely be in conjunction with an interaction of some sort where this immediate response would be expected. So agreed that it's not the best for a warning, such as that which might occur at the top of the page.

It could be that there is a failing in HTML/ARIA to effectively highlight text that should be highlighted.

I do still think that having a heading in the warning is the best way to alert an assistive technology user for inline status messages, whether they are just informative, warnings or success indicators. I'm not sure that just a <strong> tag is an equivalent.

[mgifford]

Here's what the Australian government has done with this pattern https://designsystem.gov.au/components/page-alerts/rationale/

[36degrees]

Here's what the Australian government has done with this pattern https://designsystem.gov.au/components/page-alerts/rationale/

Just to be clear, alerts like those may look similar when viewed in isolation but are still doing a fundamentally different thing to the warning text component.

If you wanted to add a link to that to the backlog entry for alerts that'd be helpful as reference when we build out the alerts component.

[talk2frank]

Is there any reason a circle shape is used over a more recognisable 'attention' shape such as a triangle?

[querkmachine]

@talk2frank I think the answer is a very straightforward "because it always has been".

What is today the warning text component was originally the "legal text" style added in GOV.UK Elements—one of the precursors to the Design System—back in 2015, and despite various code refactoring since, it has remained visually unchanged that entire time.

I'd be interested in seeing how well a triangular design, akin to UK warning road signs, might work in user testing. I hypothesise there is a greater potential for users to read it as being an error rather than a warning, but I have little evidence to support that.¹

From a build standpoint, a circle has historically been easier to implement in CSS than a triangle. We could use clip-path for this today, that would also break the component's present appearance in forced/high contrast colour modes, so we would need to come up with a new alternative for that scenario.

Thanks for raising the question. It's get me thinking, now!

Footnotes

1. Windows uses a yellow ! triangle for warnings and a red × circle for errors. Apple's systems seems to use a yellow ! triangle for both. Android uses ! in a triangle for warnings or in a circle for errors, though only specifies that errors be red. ↩