Creating Accessible Knowledge Base Articles

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."

Screenshot of Paragraph Format drop-down menu to select heading level.

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.

Screenshot of Alt Text field.

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.

Screenshot showing list buttons.

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

  1. Type a good descriptive text.
  2. Highlight the descriptive text you wrote.
  3. Click the "Link" button in the WYSISYG editor.
  4. Paste the URL in the URL field. You can also edit the Display text in the Display Text field.

Screenshot of the hyperlink prompt window.

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 the Office of Distance Learning 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 the Office of Distance Learning for instructions on captioning media.

Print Article