Component Library

The screen reader announces line breaks <br> or empty paragraph <p> tags as blank lines, which can be confusing when there are fill-in-the-blank questions. With the use of <br> breaks or empty <p> paragraphs announcing blank, it is difficult to determine whether the "blank" indicates a fill-in-the-blank user field, while the blanks appear to be used to create visual spacing instead of CSS.

Set line spacing using CSS, rather than adding empty line breaks <br> or paragraph <p> tags for visual style. Consider;

• In the stylesheet; p.tall {line-height:150%}
• In content; <p class="tall"> Lorem ipsum </p>

Ensure;

• Width is no more than 80 characters or glyphs (40 if CJK).
• Text is not justified (aligned to both the left and the right margins).
• 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.
• If extra space is desired, use CSS properties like margin to create the effect:

https://developer.mozilla.org/en-US/docs/Web/CSS/line-height