Web Accessibility Tips

The Accessible University site has some examples of the things below, and it can help you begin to see accessibility issues in the site.

Headings

  • DO use the correct order of heading rank
  • DON'T use heading styles unless the text actually "heads up" content
  • DON'T use heading styles if you just like the look of them

Headings Example

Example is from WAI Headings page.

  • Space Teddy <page title> <Heading 1>
    • Cotton Fur <Heading 2>
    • Sapphire Eyes <Heading 2>
    • Synthetic Felt Paws <Heading 2>

Tables and Columns

What to Google: "How do mark I headers in <insert CMS or LMS here>?"

  • Use tables if you have data to share
  • Keep them simple, with one column header
  • Ask yourself: can I use columns instead?

Simple Data Table

A data table with only one row of headers. These are called the column headers.

Column 1Column 2Column 3
123
456

Text Equivalents

Person typing on a computer

What to Google: "How do I add alt text in <insert CMS or LMS here>?"

  • Most tools allow you to add alt text for images
  • Not all tools allow you to mark images as decorative

Color Use

London subway map with lines noted only with color London Subway Map with no color - impossible to discern which line to take

Images from WebAIM

  • Make sure no information is conveyed using color alone
  • Example: "required fields in red"

Color Contrast

  • Check text and background
  • Check buttons and links that change colors
  • Need 4.5:1 ratio for regular text
  • Use Colour Contrast Analyser or web checker, such as WAVE*
    • *WAVE only works on text with a background color, not a background image

Text in Images

Image with text over it showing the color contrast issues and difficulty when Zooming

Your Access to the City text in image

  • Avoid placing all text in an image
  • Issues presented:
    • Color contrast changes across image
    • Gives trouble to screen reader users and those who zoom

Links

What to Google: "How do I change link text in <insert CMS or LMS here>?"

  • Make link text descriptive
  • "Read more about accessibility" not "Read more"
  • Keep the underlines!

Multimedia

  • Videos need captions and audio description
  • Audio (such as a podcast) needs a text transcript
  • If you're posting videos on your site in a media player, make sure the media player is keyboard accessible and allows for captions.

Keyboard Usage

When tab through a page or a plug-in, the following should happen:

  • A visible box, border, and/or highlight should show which element is active
  • All interactive elements, such as buttons, links, accordions, slideshows, etc. are reachable and usable via the keyboard
  • All interactive elements are in the correct order

Navigation Menus

Tab through your navigation to see if it's usable.

  • Note how many times you hit the Tab key. Is it too many?
  • Menu items are reached in the correct order
  • Submenu items in flyouts can be reached using the Tab key

Skip Navigation

  • Should be visible when you tab to it
  • Has focus indicator
  • Has good color contrast

Forms and Labels

  • Make sure form labels are associated with the field
    • Tip: Click on the label. If the cursor jumps to the field, the label and field are correctly associated.
  • Any valuable information, such as format requirement, is put in label
  • Form fields are the correct type
    • Example: radio buttons are used when one choice needs to be selected