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