All sentences should be inside <p> (or the relevant semantic elements)

I’m going to add a few points that came out of a recent developer review, before three of our services are sent for an external accessibility audit.

Inset text and Panel components

We’re currently using the govukInsetText() and govukPanel() macros and we’ve been flagged during a developer review for putting text inside <div> tags.

All three services were caught out by this.

The non-semantic HTML is the recommended usage on the GOV.UK Design System examples shown here:

https://design-system.service.gov.uk/components/inset-text/ https://design-system.service.gov.uk/components/panel/

You can see in these screenshots:

Since other service teams may copy from the examples and make the same mistakes as us, I’d prefer it if the examples included semantic HTML by default! 😊

Suggested change:

Before

{{ params.html | safe if params.html else params.text }}

After

{% if params.html %}{{ params.html | safe }}{% else %}<p>{{ params.text }}</p>{% endif %}

But other macros might be affected too.

It’s been raised before in https://github.com/alphagov/govuk-design-system/issues/822

Thanks

[adamliptrot-oc]

WHATWG deem the<p> element as only one way of markup up a paragraph. Semantically it seems not to have any impact. There could be styling implications of course. https://html.spec.whatwg.org/multipage/dom.html#paragraph

[NickColley]

Thanks @adamliptrot-oc, that’s good context, I’ve had a chat about this with some people on the team…

We’re going to close this for now as we want to avoid breaking changes unless it’s necessary, but we’re happy to revisit this again if we become aware of any real-world issues caused by the lack of <p> tags.