Open sarawilcox opened 4 years ago
Some examples from NHS.UK. These are mostly to help users spot the words but not to give them special importance.
Select More, then select Messages.
If you take allopurinol:
In this case, we're using <strong>
.
Or in medicines side effects like this (from https://www.nhs.uk/medicines/adalimumab/#how-to-cope-with-side-effects):
This uses <b>
.
On this page (https://www.nhs.uk/conditions/coronavirus-covid-19/symptoms/), we have this, which uses <b>
It looks like our Wagtail CMS only gives us the option to use <b>
. As content designers, there may be times when we want to use <b>
purely for presentation (which we should probably avoid as someone who can't see bold won't get the same experience). And there may be times when we want to emphasise some bold text using <strong>
but it looks like we can't do that in Wagtail.
There is a Wagtail issue around this: https://github.com/wagtail/wagtail/issues/4665
We may also need to consider the use of the <mark>
tag when wanting to highlight text for a particular purpose.
For example, it may be used in search results to mark or highlight the search term.
Further info on usage can be found here:
Hi @mcheung-nhs, I wonder if you can help? We've recommended using bold in technical instructions, like this: "Use bold in technical instructions to tell users which element (for example, a text input or button) to select. For example: Select More, then select Messages."
Someone has asked on Twitter: "Where you recommend using bold to tell users which element to select, do you have insight on how AT users experience this or how it should be mapped to them? Should the bolded text match the associated element's accessible name? I'm thinking it should..."
What do you think?
@oliviathornton, for info.
It looks as though the <strong>
and <b>
(as well as other text level semantic elements such as <em>
and <i>
) are not exposed to assistive technology in any accessibility APIs so they won't do anything with them (see https://www.brucelawson.co.uk/2018/screenreader-support-for-text-level-semantics/ for more info and also the Accessibility API Mappings 1.0).
Therefore, I would recommend using <strong>
and <b>
as per their semantics - importance versus visual appearance but from a screen reader or assistive technology point of view, there is no difference (for now!).
I suggest that we take this to February Style Council and, if approved, we'd need to get a ticket made for changing this in Wagtail.
In some instances, we seem to use bold currently where we should be using headings. To discuss at Style Council too.
@mcheung-nhs and @OliviaThornton, In the following example, do you see the bold indicating importance <strong>
or a purely visual device <b>
? I'm thinking the latter.
For example: Select More, then select Messages.
Note, the style guide allows us to use bold for technical instructions, but otherwise it says:
Do not use bold to emphasise text. To emphasise words or phrases, you can:
- front-load sentences
- use headings
- use bullets
We do see a lot of people using bold where they should be using headings.
@sarawilcox - Agreed, I would say use <b>
in this case.
We proposed some changes to our use of bold at the March Style Council meeting – see PowerPoint slides for details. There were several comments and concerns.
People didn’t know how we use <b>
or <strong>
in Wagtail where the only options are bold or italic. Most content designers do not have a choice in how they mark up content but are limited by their CMS.
People said that the guidance proposed should be stricter (avoid “avoid”) and should say that people must follow it. The GOV.UK style guide is clearer about not using bold.
There was some disagreement about what <b>
and <strong>
do. In some browsers <b>
can mean italics, while <strong>
has a more defined action. They have different meanings.
Agreed Sara will take the comments away and review this further with Michael Cheung. (@mcheung-nhs, for info.)
I'm unsure how bold/strong markup works for us, since we use Wagtail and the only way to create text is within a Richtext field, where the only options for changing the text style are Bold or Italic, in the tools panel above the text box? Also, I thought the bold intro heading was now redundant and no longer used? There is no option to make the first paragraph in a page "Lead" text in Wagtail.
I find this confusing too. Is there a visual difference between bold and strong? how many content designers (as users of this content) have the choice? and why do we say not to do something and then say how we should do it?
We use several CMSes in the Campaigns team and have direct control over the HTML source in some of them.
I've seen bold used for field labels sometimes. Is this misuse of bold? Is our standard format to have roman text for form questions/field labels?
I was told a long time ago that <strong>
should be used rather than <b>
, for accessibility reasons. I always used to code content as <strong>
.
I wonder whether you might add "inset text" as a component to use (for when something is important) as well as the ones listed?
We work from the perspective that if something needs to be made visually distinct, then it carries importance anyway, so should be <strong>
either way.
We also use bold quite often on bullet point lists where the lists or individual bullets are long. An example being (under related illnesses)on NHS website schizophrenia page
We don't specially say not to use italics in the style guide. It would be good to address this too.
GOV.UK says: Do not use italics. Use ‘single quotation marks’ if referring to a document, scheme or initiative.
I generally just tend to avoid using <b>
or <i>
where possible, and just look to see if we can use <strong>
if extra importance is actually needed.
In the rare occasion bold is being used purely for a stylisitic reason then I tend to favour <span class="nhsuk-u-font-weight-bold">
though that is bascially the same as <b>
Agreed at March 2021 Style Council that we will take this away for further investigation.
Bold and italics aren’t read by screen readers. Summary: The take away here is: if you’re relying on emphasis to convey meaning you’re on dangerous ground, as some users won’t know it’s there.
We approved some guidance on bold, italics and underlining at June 2023 Style Council meeting. https://github.com/nhsuk/nhsuk-service-manual-community-backlog/issues/463#issuecomment-1621663576
What
It would be helpful to be clear how we should mark up bold text, when and why.
Are we correct to say: "Mark up bold text using with
<strong>
, not with<b>
, for accessibility"?Why
We want to be sure that we are using bold appropriately and that we are not disadvantaging users who cannot see bold text.
So far
From @mcheung-nhs "If the text is being emphasised or is regarded as important, then it’s recommended to use
<strong>
as semantically this is the correct tag to use. With the<b>
tag there is no semantics involved so is purely visual. Also, I’ve read that some screen readers may change the tone of the voice for content within the<strong>
tag to differentiate it from the rest of the text, whereby using<b>
would not. However I’ve not actually tested it with VoiceOver/JAWS/NVDA so could not confirm that. There’s a good explanation here of the differences: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b"