Headings
Headings: Why
Screen Readers use structure to navigate information on a page. Just as you skim a document looking for the section you need, headings allow a screen reader user to more quickly identify the section of text they are wanting to read. Headings also help ensure your content is ordered logically. The "Subject" of the article is H1. There should only be a single H1 on a page. In the body of the article, begin at H2 and continue from there. Heading levels apply to the entire line of text.
Headings: How
Use the "Paragraph Format" drop-down menu to assign a heading level. Regular paragraph text should be "normal."
Images
Image Alt Text: Why
Screen Reader users can't see graphics like pictures, graphs, and maps. Each graphic needs to be described with words. Content creators are in the best position to understand the intent of the image and are therefore the best source for the description of that image.
Image Alt Text: How
When you click on the "Image" button, a window will open, prompting you to give the URL of an image or upload an image. Complete the "Alternative Text" field by describing the image.
Description Best Practices
-
Descriptions should be short (125 characters or less) and yet explain why the graphic is included in the document. If it is described in detail in the text, the alt text should reference the main text.
-
If an image needs more than 125 characters to describe it, create a stand-alone page containing the image description and use the "Long Description" field (found in the advanced tab) to link to the long image description.
-
Avoid using “A picture of” in your description. Just succinctly describe the image.
-
In a knowledge base, images should not be added for decorative purposes. If it doesn't add to the content, don't add it to the article.
Lists
Lists: Why
Screen Readers will identify lists when they are created using the bullets and numbering buttons in the WYSIWYG editor. Don't use dashes and asterisks to make text look like a list, it won't be correctly identified as a list to screen reader users.
There are two types of lists
Lists: How
Use the Insert/Remove list buttons in the WYSIWYG editor.
-
When the order doesn't matter, use Bullet Lists.
-
When order or ranking is important, use Numbered Lists.
Descriptive Hyperlinks
Hyperlinks: Why
Descriptive hyperlinks ensure that all users know where they will go if they click a link. Screen Readers alert users when text is a hyperlink. If the text of the hyperlink is “click here” the user must listen to the surrounding text to know where the link will take them. A good hyperlink should explain the destination without relying on the surrounding text.
Hyperlinks: How
- Type a good descriptive text.
- Highlight the descriptive text you wrote.
- Click the "Link" button in the WYSISYG editor.
- Paste the URL in the URL field. You can also edit the Display text in the Display Text field.
Here is an example of a descriptive hyperlink: If you need assistance contact the IT Help Desk.
Tables
Tables: Why
A properly formatted table allows non-mouse users and screen reader users to navigate the data in the correct order.
Tables: How
Tables should only be used to compare data, not for formatting text. If you need to use a table, contact Distributed Education for detailed instructions.
Color and Contrast
Color/Contrast: Why
For people with low vision or color blindness, the background and the text need to have sufficient contrast. Color contrast should meet WCAG 2.0 AA standards. Also, you should not use color alone to convey meaning. Add size, shape, location or duplicate meaning with text.
Color/Contrast: How
Black and white always have the greatest contrast. If you choose to use the "Font Color" or "Background Color" buttons on the WYSISYG editor, check the contrast with a third party contrast checker. Several people on campus use Paciello Group's Color Contrast Analyser.
Caption Video Content
Caption Video Content: Why
Users with hearing impairments need captions to access the material. Captions also benefit non-native English speakers and users who are in an environment where they can't play the audio out loud.
Caption Video Content: How
When linking to audio and video materials, make sure items are accurately (99%) captioned (video) or transcribed (audio).
Contact Distributed Education for instructions on captioning media.