nhsuk / nhsuk-service-manual-community-backlog

This is a place for digital teams in the NHS to work together and develop the NHS digital service manual.
https://service-manual.nhs.uk/community-and-contribution
62 stars 5 forks source link

<b> or <strong> for bold #276

Open sarawilcox opened 4 years ago

sarawilcox commented 4 years ago

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"

sarawilcox commented 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):

Screenshot 2020-11-03 at 11 15 16

This uses <b>.

sarawilcox commented 4 years ago

On this page (https://www.nhs.uk/conditions/coronavirus-covid-19/symptoms/), we have this, which uses <b>

Screenshot 2020-10-29 at 16 51 59

sarawilcox commented 4 years ago

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.

sarawilcox commented 4 years ago

There is a Wagtail issue around this: https://github.com/wagtail/wagtail/issues/4665

mcheung-nhs commented 4 years ago

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:

sarawilcox commented 3 years ago

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.

mcheung-nhs commented 3 years ago

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!).

sarawilcox commented 3 years ago

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.

sarawilcox commented 3 years ago

@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.

mcheung-nhs commented 3 years ago

@sarawilcox - Agreed, I would say use <b> in this case.

sarawilcox commented 3 years ago

March Style Council meeting

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.)

Some comments made at the meeting in Teams chat

sarawilcox commented 3 years ago

https://support.siteimprove.com/hc/en-gb/articles/115002726312-Accessibility-Bold-vs-Strong-and-Italic-vs-Emphasis

sarawilcox commented 3 years ago

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.

Fenwick17 commented 3 years ago

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>

sarawilcox commented 2 years ago

Agreed at March 2021 Style Council that we will take this away for further investigation.

sarawilcox commented 1 year ago

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.

sarawilcox commented 1 year ago

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