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.
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 CSS to create space
Using blank heading or paragraphs for spacing can cause confusion, since text-reading software like screen readers might announce there's a new section or line, but not say what it's about since there's no text to announce. Instead, use CSS margins or padding classes to add more space if you're coding your own styles.
If you're using Drupal, you can also use the white space block in Layout Builder to add space accessibly.
Avoid inline style overrides
Adding a style override directly on an HTML element (like <p style="color: ...;">) could mean overriding an element's default browser or custom styles. This could affect the color contrast, especially for interactive elements like links and buttons that have states to consider (colors on hover, focus, active, inactive, etc.).
Some elements are also meant to have specific cursor types, font scaling, and responsive features. Inline styling can override those features as well, and make either the layout break or the user experience more confusing.
If you have a custom styling need, please reach out to webhelp@wwu.edu either for assistance or to verify the content's still accessible.
Remove deprecated styling elements
Some legacy HTML elements intended for styling purposes are deprecated, and no longer valid ways of styling HTML. If your sites or content contain the following HTML elements, these need replacing with more modern CSS techniques for layout and styling:
- <center>
- <big>
- <font>
- <spacer>
Pattern Examples
Sections
Accessible Example
This adds margin spacing to a paragraph directly, instead of creating space with empty paragraphs or headings. This can also be accomplished in Drupal using white space blocks.
/* 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
Creating space between bullets by making new list elements means the grouping of items is separated, and no longer related to each other by being part of the same list. Use CSS to space bullet items if needed.
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.