Govspeak styling doesn't match semantics

[selfthinker]

Some Govspeak elements don't look like what they are.

Headings

Level 1 headings

H1s are generally styled like paragraphs, so don't look like headings at all.
That's intentionally done because, as the code comment says:

Markdown is expected to be styled within a document with a H1 title
thus H1's are not expected and are discouraged by bare styling

Level 4-6 headings

Something similar is happening with H4s, H5s and H6s.
They all look like H3s (except H5s and H6s don't have a top margin) for similar reasons:

H4, H5 and H6 are discouraged and thus styled the same

Why it's a problem

While H1 and H4-H6 are indeed discouraged, publishers do use them.
And when they get used, they show a visible heading structure that is different from the actual heading structure.
And that is a fail of the WCAG success criterion 1.3.1 (Info and Relationships).

This means that screen reader users and users who change styles (and search engines) will get a different experience than other users.
It also means the heading structure could be confusing for people who can see the visuals.

That could be solved by changing the styles to match the semantics (in this repo).
If you wanted to re-introduce some kind of styling that still discourages publishers from using those heading levels, it would need to be done differently.
Or this could be solved (at least for future occurrences) on the publisher side by not allowing those heading levels in the content when a page gets published.
While styling it wouldn't fix that part of the problem, it at least makes the problem visible and seeing users would get the same information.

Italics

Text emphasized with em (or *italics* and _italics_ in Govspeak) doesn't show any styling at all.
That is also intentional for similar reasons as italics are discouraged.
But because publishers do use them, they are in the code, just not visibly styled.

This is technically also a WCAG 1.3.1 fail, although it has hardly any practical implications as most (or all?) screen readers don't read italics/em differently.
This would still affect users who change styles, but is not likely to have a significant impact.

[jon-kirwan]

Hi @selfthinker - could you please provide an example URL?

[selfthinker]

You can use the Govspeak Converter to see the problem.
Add the following Govspeak:

# Heading 1

Some text with *italics*.

## Heading 2

### Heading 3

#### Heading 4

#### Heading 5

###### Heading 6

And the result is this:

Examples of H1s not looking like H1s

• Field Safety Notice - 02 to 06 October 2017 - Lots of field safety notices are like this.
• CLOSED: Furthest from the Labour Market - project in Greater Birmingham and Solihull LEP (OC12S19P1493) - There are lots of these types around as well.
• The Shipments of Radioactive Substances (EU Exit) Regulations 2018 - Someone seems to have noticed the issue and tried to fix it, unsuccessfully.

Examples of H4-H6 looking like H3

• Countries call for action to finance nature recovery ahead of COP15 - In this page you cannot see the difference between "Lord Zac Goldsmith, International Environment Minister, said:" and "Carlos Manuel Rodriguez, CEO at the Global Environment Facility, said:". They look like the same heading level (so can also easily be missed in 2i), but the first is an H3 and the second an H6.
• New £65 million package for 5G trials - The H4 at the top is misused as bold text. What follows are nearly only sections headed by an H5 and sometimes by an H6. Search for "Rural Connected Communities Projects". That heading is an H6 followed by multiple H5s without text in between (probably at least partly misused as bold again). That heading structure is not clear at all from looking at the page visually.
• About us - Government Property Agency - That page uses a couple of H6s instead of H3s and it's visually the same.
• Nuclear Decommissioning Authority: Draft Strategy - HTML Publications are a bit different as H2s and H3s are bigger than on other pages. That means H4s look different from H3s. But H5s and H6s still look like H4s. The headings below "Critical enablers" are a good example of that as it's one H4, one H5 and H6 in short distance to each other, all looking exactly the same.

## Examples of emphasised text

I couldn't find any examples so far. But I've seen them.

[selfthinker]

I managed to find examples of emphasised text as well now:

• Replacement Appendix D to Department of the Environment: circular 09/95
• Chapter 16: Government Procurement (web version) - I wonder if these were supposed to be bold or headings.
• Rating Manual section 2: valuation principles - That's got a massive amount of (non-visual) italics.

It's best to make them visible to easily see them on the page, rather than trawling through the source code. I use a userstyle for that.