Accessible CSS

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.

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.)