line-height in paragraphs with very large text

Bootstrap provides a way to adjust the font size of a paragraph text so that it looks very large; e.g. the size and style of a heading without actually using a heading level HTML tag.

I don't want to use a real <H2> tag just to affect the visual presentation of this text because it is secondary, stand-alone text in the site footer, and doesn't have anything following or preceding it, and I don't want to affect the document outline.

<p class="h2">This is a very large stand-alone slogan text.</p>

example text

However, I'm getting warnings from accessibility checkers that state:

The line-height for paragraphs should be at least 1.5 times the font size.

The underlying success criteria on visual presentation from W3C is here:

https://www.w3.org/WAI/WCAG21/Understanding/visual-presentation.html

Line spacing (leading) is at least space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than the line spacing.

The issue here is that heading styles on this site have a line height of 1.2, which look good and have plenty of whitespace.

Therefore, I believe this is being flagged as a false positive.

Is there a recommended approach to avoid this being flagged with the line-height warning above? Should I switch to a <div> or another HTML5 tag? Thoughts?



Read more here: https://stackoverflow.com/questions/68462395/line-height-in-paragraphs-with-very-large-text

Content Attribution

This content was originally published by JamesWilson at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: