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
- 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 should describe where they will take users and should make sense out of context.
- Try to make the hyperlink the title of the new page and work into a sentence!
Example: check out the WebAIM website to learn more about accessible design.
- DON’T just copy and paste the link into the page.
- Use an ordered list <ol> like numbers when there is a sequence or steps for the list list items.
- Step 1
- Step 1A
- Step 2
- Step 2A
- Step 2B
- Step 3
- Step 3A
- Step 3B
- Step 3C
- Step 4
- 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.
- Example of nested ul.
- 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 should be used for function (data) only.
- Not just for aesthetics (presentation).
Example of data table:
Example of presentation table:
|Digital Accessibility at Rice University||
- 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:
Example of chart with data table:
Example: Infographic for Disability Visibility
Also see: W3C Image Concepts Tutorial