Accessibility Guide: UConn Knowledge Base
- Lily Cox (Deactivated)
Because we are a public-facing and all-inclusive service, we must ensure that the content of our Knowledge Base is accessible for all users. Many of our users require assistive technology, such as screen readers. To ensure that our knowledge base is accessible for people using assistive technology, we need to follow the guidelines below.
In this article:
Alternate Text
What is Alternate Text?
Alternate text, or alt text, is a textual description of an image. Alt text is applicable when inserting pictures into an article. It is text that describes what knowledge or functionality the reader is supposed to gain from the inserted image. Alt text is only helpful when it fully describes the form and function of the image and is not redundant.
Good alternative text provides the information conveyed in an image, including all text seen in the image and relevant details. It can be difficult to choose where to focus the description, so here are a few rules of thumb:
If an image is meaningful, it must have alternate text. Not providing alternate text means that users who cannot see the image will miss information.
Focus on form and function. Form or context often tells us what aspects of the image are most important. Similarly, function can tell us how to describe the image. A magnifying glass icon that serves as a search button should be described as a search button.
If stuck formulating alternate text, consider how to you might describe the image to someone over the phone.
All inserted pictures in the knowledge base are required to have alt text.
For Images With Explanatory Text Above Them
For images that have their purpose adequately described above it, we use null alt text so that assistive technology will skip over the image. We do not add a descriptive alt tag in this case because that would be redundant. Null alt text can be indicated as alt="".
EXAMPLE:
Make the text font Arial and the font size 12.
Make sure bold is selected and make sure that your highlight color is yellow.
Alt= “”
For Images Without Explanatory Text Above Them
Use a descriptive alt tag when you place an image into your article and have not adequately described above it what the user is supposed to gain from the image. A descriptive alt tag should describe the purpose of the image or what knowledge the user is supposed to gain from the image.
Inserting Alt Text
Once your picture has been inserted into your article,
Left-click on the picture.
Select Properties.
Enter your alt text.
Click Save.
Click Update or Publish in the bottom right corner of the screen (depending on which phase of article editing you are in).
Click Edit to re-enter the editing window. Make sure that your alt text is present.
Call Outs in Screenshots
A call out in a screenshot is any shape used to delineate a specific section of the screenshot that you want a user to focus on. Callouts should be mentioned in the explanatory text above when appropriate. When using multiple callouts in a single image, it is imperative that the callouts be differentiated based on shape and not color (for those users that are color vision impaired).
EXAMPLE: You can search for macros (rectangle) or you can browse through the macros using the left-side list of macros (curly brace).
Tables
To make tables as accessible as possible, set the top row as a "Heading Row" and/or the first column as a "Heading Column."
Setting these cells as heading cells allows assistive technology like screen readers to associate data cells with their appropriate header cells. This is necessary for screen reader users to understand the relationship between data cells and header cells. Avoid images of tables, as none of the accessibility information will be available to users.
Table view must also be set to Responsive. This allows the table's text to reflow, making it accessible for users who may zoom in to view text. It is also helpful for mobile users.
Avoid using merged cells in the body of your table. While screen readers are capable of correctly interpreting merged cells for column headers, they are unable to correctly interpret merged table data cells.
Meaningful Link Text
Avoid writing "Click Here" and similar phrases for links. Instead, have the link text describe the link destination. In addition to being more accessible, it helps with your Google search rankings. For example, “For more information about our admissions process click here...” should be written as “For more information about our admissions process...“
Layout Tables and Columns
Instead of using a layout table for information, consider using the Columns macro. When screen reader users encounter a table with data cells coded using <td>, they expect to also hear information about table headers (<th>). Layout tables do not have table headers. Typically, in HTML, a layout table can be assigned the role="presentation" so that screen readers will read the content of layout tables as text, rather than as a table; this is not possible through Confluence. Because this is not a function Confluence supports, it is better to use the Columns macro to visually style the page. When using the Columns macro, you will be asked to input the column width in pixels or in percentages. Use percentages so that the column content will be responsive. Add additional columns by inserting additional macros below the initial macro.
Color Contrast
Making text high enough contrast against its background is vital for users who are colorblind or who may have low vision. These users may not be able to distinguish text if it is too similar in brightness to its background. One good tool to check for color contrast is the Colour Contrast Analyser. To download Colour Contrast Analyser, click the Download button and choose CCA-Setup-3.0.1.exe. Text should meet a ratio of 4.5:1 between the foreground and background colors. This will cause the WCAG 2.1 results heading 1.4.3 Contrast (Minimum) (AA) to have green checkmarks. If the results show a red X, then the contrast is not high enough and you need to adjust the text or the background's color.
Color Dependence
If you choose to color-code information, be sure to indicate the color-code's purpose through text or images. For example, instead of coding all incorrect table data cells as red, we could code them as red and add an X to each incorrect cell. This is vital for people who are blind, have low vision, or are colorblind. Users without full vision capabilities may not be able to distinguish color-based information, so it must be supplemented with text or images.