Use style sheets (CSS) for spacing and styles

Applicable Role(s): Developer

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>&nbsp;</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.

 

Need Accessibility Help?

Contact Carly Gerard

Contact David Engebretson