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 having links that open in a new tab.
- When adding a link in the KnowledgeBase editor, there is a checkbox to open links in a new tab, which should not be checked in most instances. Links opening in a new tab can be disorienting for people with low vision or who are navigating via screen reader, especially when there is no warning.
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 only when needed to present data. Avoid using tables to create a page layout.
The Center for User Experience
At the Center for User Experience, we are committed to working with you to make digital spaces more accessible, usable and inclusive for all students, faculty and staff at UW–Madison. We help the university follow its Digital Accessibility Policy by offering free evaluation and consultation services to all UW–Madison community members.
Get in touch
- Meet with us: Book a quick chat with one of our team members to ask any questions you have.
- Start a project with us: We support accessible design and development. Fill out our Let’s Connect form to begin working with us on your project or to request an accessibility evaluation.
- Email us: Not sure if you’re ready to meet? Email us to start talking and figure out what to do next.