5 minutes to read | Last updated September 27, 2021
How to create accessible content for KnowledgeBase pages.
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
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
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
For all text and other elements in your KnowledgeBase content, ensure that your color scheme passes color contrast accessibility standards.
When adding a table in KnowledgeBase content, there are a few steps to conveying your data accessibly.
- Markup 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:
<th scope="col">Header column name</th>
<th scope="row">Header row name</th>
- Use tables to convey information, and avoid using tables to create a page layout.
WebAIM: Creating Accessible Tables
Get help with accessibility
Resources to get assistance with accessibility at UW-Madison.