Last updated September 27, 2021
How to create accessible content for KnowledgeBase pages.
Page structure
When creating KnowledgeBase content, it is important to use headings to define the structure of your page. In the KnowledgeBase editor, heading levels can be set in the “Paragraph Format” menu. Learn more about document style guidelines for the KnowledgeBase
- There is a single heading level one. When creating a KnowledgeBase page, this will be your title.
- Headings two through four are hierarchical and structured like a page outline.
- Headings should be used to structure content, not for stylistic purposes. You can restyle your headings if needed.
Images and Videos
This is an accordion element with a series of buttons that open and close related content panels.
Images
Visual elements in your KnowledgeBase content, such as images and visualizations, need to include text descriptions of the content.
- All images must include alternative text. In the KnowledgeBase editor, you can add alternative text by selecting any image and then selecting “Alternative text.” Learn how to write effective alt text for images
- You can also add captions to images in the KnowledgeBase editor; however, these do not replace alt text. Captions will display visually beneath your image and can help provide connect the image to text on your page.
Review the KB image guidelines
Videos
When embedding videos in your KnowledgeBase content, there are several steps you can take to increase the accessibility of your videos.
- When adding a video to your KnowledgeBase page, do not select “Autoplay.” Disabling autoplay is important to ensure that videos do not play automatically when the page is loading, which can make the page inaccessible, especially for people using screen readers.
- Ensure that all of your videos have captions and that audio files have transcripts.
Learn more about accessible video and audio content
Links
It is important to write concise, descriptive link text. When adding links in the KnowledgeBase editor, there is a “text” field to enter the text that will be displayed as your link. Learn how to write meaningful link text
- Avoid using uninformative link phrases, such as “Click Here” or “Learn More”
- Avoid using full URLs as they are long and complex and do not inform the user about the destination of the link
- Avoid opening links in a new tab. In the KnowledgeBase editor, when adding a link there is a checkbox to open links in a new tab which should not be checked in most instances.
Using color
For all text and other elements in your KnowledgeBase content, ensure that your color scheme passes color contrast accessibility standards.
Use a color picker such as the ColorPick Eyedropper for Chrome and the WebAIM Color Contrast Checker to confirm that your color selections pass minimum color contrast ratio requirements.
Tables
When adding a table in KnowledgeBase content, there are a few steps to conveying your data accessibly:
- Mark up all column headers or row headers as table headers. You can select the table and add a header row from the table options. You can also indicate the scope of your header row or column in HTML using the scope attribute, for example:Header column name
- Header row name
- Use tables to convey information, and avoid using tables to create a page layout.
Get help with accessibility
Resources to get assistance with accessibility at UW–Madison.