Use style sheets (CSS) for spacing and styles
Overview
HTML is good at providing semantics, and CSS for providing styles to web pages. Making sure styling is maintained in CSS and not HTML is important for assistive tech to parse content correctly, and to not announce content that is really just a stylistic placeholder.
On the opposite side, meaningful content like images conveyed through CSS need a way to be interpreted correctly so users know the content exists.
Best Practices
Avoid images of text to achieve a certain visual presentation where possible. CSS can recreate a lot of visual styling like uppercase, drop caps, or apply certain shapes to elements without affecting the semantics of the page.
If an image defined through CSS contains meaningful info, either:
- Make sure the image is part of the content itself, rather than injected through CSS, or
- Provide a text alternative on the page for the image injected through CSS.
Use margins or padding to create space, rather than creating space using blank heading or paragraphs (see the Sections pattern example).
When possible, use relative units to style, like percents, ems, or rems. Pixels are absolute units, which make it harder to fit content on a range of devices, or for users to adjust text spacing and font if needed.
Pattern Examples
Sections
The first example shows an empty <h4> that creates Space between the two visible headings. This adds the empty heading to page's table of contents–when users navigate to it, they will know it's a section title but not know what it is for.
Inaccessible Example
<h4> Example Heading </h4> <p> ... </p> <h4> </h4> <h4> Another Heading </h4>
Example Heading
...
Another Heading
Accessible Example
/* CSS */ .double-margin --bottom { margin-bottom: 2rem; } /* whatever spacing */ ... <h4> Example Heading </h4> <p class="double- margin--bottom"> ... </p> <h4> Another Heading </h4>
Example Heading
...
Another Heading
Lists
Instead of:
<ul> <li>This is the first item in the first list</li> </ul> <ul> <li>This is the first item in the second list</li> </ul> <ul> <li>This is the first item in the third list</li> </ul>
- This is the first item in list one
- This is the first item in list two
- This is the first item in list three
This is 3 lists of one item.
Do this:
/* CSS */ .spaced li { margin-bottom: 2rem; } /* whatever spacing */ <ul class="spaced"> <li>This item is first</li> <li>This item is second</li> <li>But they are all in the same list</li> </ul>
- This item is first
- This item is second
- But they are all in the same list
This is one list of 3 items.
Font Styling
Instead of:
<h2>MAKE WAVES.</h2>
MAKE WAVES.
Do this:
/* CSS */ .uppercase { text-transform: uppercase; } <h2 class="uppercase"> Make Waves. </h2>
Make Waves.
The text is also visually uppercase, but semantically still regular text.