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 1 | Column 2 | Column 3 |
|---|---|---|
| 1 | 2 | 3 |
| 4 | 5 | 6 |
Text Equivalents
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
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
- 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