Accessible CSS

Best CSS Accessibility Practices in

Pressbooks

A Cascading Style Sheets (CSS) customizes the look of HTML elements, such as changing the colour of text, positioning an element at a specific place on a page, or creating decorative elements such as borders. When implementing these styles with more than one line of customization, accessibility should always be kept in mind. Although it is possible to write CSS directly into the HTML, writing the CSS into a separate file keeps the HTML page tidy and adheres to good design practices. Some of these practices include:

Responsive Units

A responsive website has elements that adjust to the screen of different devices such as phones, tablets, and laptops. Units such as %, em, and rem are used to implement accessible design in CSS.

For example:

  HTML:
<div class="parent">
  Hello,
    <div class="child">
      World.
    </div>
</div>
  CSS:
.parent {
  font-size: 10px;
}

.child {
  font-size: 0.5em;
}

Above, the child div is nested in the parent div. With font-size: 0.5em;, it will assume a size half or equivalent to 5 pixels. If the value of the parent element is changed, the child will adjust to assume a value half of the parent’s.

To understand by testing out response design, visit the MDN Web Docs website.

Reusability of Code

Some elements have the same properties. For example, you can have two different classes with the CSS colour: black;. While it is acceptable to repeat them individually, code can become bulky. Standardize these repetitions within the CSS rather than using exceptional styles within your HTML.

To keep your code organized and maintain readability, aim to group these properties in a class while setting unique properties in their own IDs. Such groupings help to standardize your code, ensuring that all instances of that element are the same throughout the website or document. Standardization enables your code to be easily interpreted by different developers who may interact with your Pressbook to either edit directly or re-use it within the context of open education.

Organized code also impacts the readers of your book. Visual cohesion and appropriate tagging of elements enable the content to be easily interpreted both with and without accessibility technology.

For example:

  HTML:
<div class="textbox outer">
  <h2> An inspiring example of departmental collaboration at </h2>
  <div class="textbox inner">
    <h2> Concordia </h2>
  </div>
</div>
  CSS:
.textbox {
  padding: 2.5em;
  margin: 0.9em 0 0.9em 0;
  font-family: "Montserrat", sans-serif;
  font-size: 1em;
  text-align: center;
}

.outer {
  colour: darkgrey;
}

.inner {
  colour: black;
}

Observe how the textbox class can be reused in two divs to apply the same elements instead of cluttering the HTML. Note that each element attribute can have more than two classes (the outer div has the classes textbox and outer). In other words, styling unique to a specific element can be written into the second class, for instance, the colour.

Colour Contrast

Certain colour combinations make it difficult to interpret text; text and background colours should be different enough to be told apart comfortably. For example, a light blue text on a white background generates a poor contrast ratio, making the words difficult to read.

Colour contrast is rated on a numerical ratio that translates to WCAG 2.0 letter grades; to follow best accessibility practices, we recommend following AA level standards.

Tools for verifying colour contrasts include the WAVE Web Accessibility Evaluation Tools, Adobe Colour Tool, the WebAIM Contrast Checker, and the Accessible Web WCAG Color Contrast Checker.

This is bad
colour contrast.

Contrast Ratio:
1.36 : 1
DOES NOT meet
WCAG Standards
This is good
colour contrast.

Contrast Ratio:
8.57 : 1
DOES meet
WCAG Standards

Line Height

Lines of text displayed too closely may make it challenging to distinguish rows of words. You can solve this by implementing the line-height property in the parent container of your text. The property increases the space between lines of words and takes a value of any size units (e.g. px, em, %, etc.)

This text has a line-height property set to 18px. Notice how the space between each line of text is small and makes it difficult to read.

DOES NOT follow accessibility practices

This text has a line-height property set to 30px. Notice how the space between each line of text is large and makes it easier to read.

DOES follow good accessibility practices
Considering modifying the default theme beyond the theme options provided as part of your Pressbooks project with Concordia University Library? If so, please include your intentions to customize the Cascading Style Sheets (CSS) in the project plan for your Open Textbook or Open Guidebook. We additionally recommend preparing a design plan [link].

License

Icon for the Creative Commons Attribution 4.0 International License

Guide to Pressbooks at Concordia University (DRAFT) Copyright © by Rachel Harris; Sana Ahmad; Rahil Kakkad; Zo Kopyna; Chhayhee Sok; Asifur Rahman; Lena Palacios; and Ariel Harlap is licensed under a Creative Commons Attribution 4.0 International License, except where otherwise noted.

Share This Book