KB Quality Control Checklist (accessibility demo)

This document contains requirements and tips for writing, editing, and standardizing documents on KB.

Titles and headings

  • Titles and headings should be in proper order for screen readers.
    • Title and heading formats should not be chosen based on aesthetics.

Subheading in Titles and headings

  • Heading 1 = Title. So, start section titles with Heading 2. The next subsection is Heading 3 and so on.
  • Do not repeat the title in the body of the document.
  • Title should accurately reflect the content.

Also see: Rice KB, Headings and Semantic Structure

Text

  • Left-align text to improve readability.
    ↕<br> (read as "blank" by screen reader)
  • Avoid multiple empty paragraphs and line breaks.
    ↕<p></p> (read as "blank" by screen reader)

Also see: Rice Digital Accessibility, Readable Text

Links

Lists

  • Use an ordered list <ol> like numbers when there is a sequence or steps for the list list items.
  1. Step 1
    1. Step 1A
  2. Step 2
    1. Step 2A
    2. Step 2B
  3. Step 3
    1. Step 3A
    2. Step 3B
    3. Step 3C
  4. Step 4
    1. Step 4A
  • Use and unordered list <ul> when it is a general list with no sequence or steps.
  • Use the Increase Indent button in the KB tools to create a sublist item and make sure all items are properly nested.
    • Example of nested ul.

Color 

  • When using color, the contrast ratio between the text and background should be at least 4.5:1. 
  • Obtaining color contrast ratio:
    • Hover over the color in the KB color picker to obtain the hex code.
    • Type in the hex code into the WebAIM Color Contrast Checker to calculate the contrast ratio.
  • Helpful colors
    • Blue (typically used for important points): 3300CC
    • Red (for warnings): CC0000

Tables

  • Tables should be used for function (data) only.
    • Not just for aesthetics (presentation).

Example of data table:

Table
First Name
Last Name
Email
John Williams jw115@rice.edu
Liz Brigman liz@rice.edu

Example of presentation table:

Digital Accessibility table
Digital Accessibility at Rice University

""

 

Alternative text

  • Alternative text descriptions (alt text) for figures should properly explain the contents of the image or diagram. 
    • Think about what the image conveys visually and try to replicate the information in text.
    • Do not start with “image/picture/graphic of”
      • A screen reader will tell the user what type of content it is automatically.
  • If the image is decorative, use “” as the alt text.
    • A screen reader will skip over these images. 
  • Delete title attributes associated with alt text in HTML. Titles often create redundancy.

Example of simple image with alt text:

Lovett hall image

Example of chart with data table:

Common WCAG failures where color contrast is most common. See following table for full data.

Example: Infographic for Disability Visibility

Also see: W3C Image Concepts Tutorial




Keywords:a11y   Doc ID:111830
Owner:Amanda B.Group:Rice University
Created:2021-06-21 15:07 CSTUpdated:2022-11-05 13:50 CST
Sites:Rice University
Feedback:  0   0