Accessible CSS

Cascading Style Sheets (CSS) customize the look of HTML elements, such as changing the colour of text, positioning an element at a specific location on a page, or creating decorative elements like borders. When implementing these styles with multiple lines of customization, accessibility should always be a top priority. 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 screens of various devices, including phones, tablets, and laptops. Units such as %, em, and rem are considered responsive, while non-responsive units of measurement include mm , cm , in , px , and pt. When using non-responsive units, elements remain the same size across devices, which can cause layout issues with the content. For this reason, responsive units are recommended as they enable 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 test these concepts to understand responsive design, visit the MDN Web Docs website.

Reusability of Code

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 in that visual cohesion and appropriate tagging of elements enable the content to be easily interpreted.

Standardize repetitions within the CSS rather than using exceptional styles within your HTML, otherwise, the HTML code can become bulky. Notice the cluttered versus cleaned HTML highlighted in the two versions below.

HTML (Cluttered):

<div style="padding: 2.5em; margin: 0.9em 0 0.9em 0; font-family: "Montserrat", sans-serif; font-size: 1em; text-align: center; colour: darkgrey;">
  <h2> An inspiring example of departmental collaboration at </h2>
  <div style="padding: 2.5em; margin: 0.9em 0 0.9em 0; font-family: "Montserrat",
  sans-serif; font-size: 1em; text-align: center; colour: black;">
    <h2> Concordia </h2>
  </div>
</div>

HTML (Clean):

<div class="textbox outer">
  <h2> An inspiring example of departmental collaboration at </h2>
  <div class="textbox inner">
    <h2> Concordia </h2>
  </div>
</div>

To keep your code organized and maintain readability, aim to group repeating properties in a class while setting unique properties in their own IDs. A class is infinitely repeatable, while an ID can only be present once within a page. Classes help standardize your code, ensuring that all instances of a particular element are consistent throughout the website or document, which also prevents clutter in the HTML. You can have two different classes with the CSS colour: black;. For example:

  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;
}

  HTML:

<div class="textbox outer">
  <h2> An inspiring example of departmental collaboration at </h2>
  <div class="textbox inner">
    <h2> Concordia </h2>
  </div>
</div>

Observe the relationship between the CSS and HTML code above. Notice how the textbox class selector in the CSS is used in two div elements in the HTML. Additionally, styling unique to a specific element can be written into the second class, for instance, the colour. Note that each element attribute can have more than two classes (for example, the first div element in the HTML has the classes textbox and outer).

Colour Contrast

Certain colour combinations can make it challenging to interpret text; text and background colours should be distinct enough to be easily distinguished. 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.)