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.

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)

Links

• 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.
  Example: https://www.amazon.com/Inclusive-Design-Digital-World-Accessibility-ebook/dp/B082ZKXBVZ/ref=sr_1_22?dchild=1&keywords=accessible+design&qid=1624323202&sr=8-22

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 only be used to as a functional way to display complex data.
• Not just for aesthetics (presentation).

Example of data table:

Example of an unnecessary data table:

This information could be easily understood without the table format:

John Williams, jw@rice.edu

Liz Brigman, lb@rice.edu

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:

Alt text: Lovett Hall

Example of chart with data table:

Alt text: 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