Web Accessibility for Content Contributors

Read this Knowledge Base article for easy steps to make sure you are making more accessible websites. Do your part to ensure all users can access content on St. Thomas webpages. 

In this article, we'll address 6 areas of accessibility commonly encountered by content contributors:

1. Headings
2. Hyperlinks
3. Video captions
4. Bullets and numbered lists
5. Color and contrast
6. Image alt-text

Headings

Heading tags are a way of creating an outline of your page. They make a page more readable and navigatable. Users using a screen reader can use the headings to navigate the web page. We don't want to use heading tags because they are "pretty" but instead for informational purposes. Without proper heading structure, there is no easy way to navigate the page, as it reads as one long section. Think of it like a document outline, if you strip out the rest of the content on your page besides the headings, does the page still make sense?

• Heading 1 (h1) - Page Title, only one h1 per page.
• Heading 2 (h2) - Sub-sections of your page
• Heading 3 (h3) - Sections under an h2
• Headings 4 (h4) - Sections under an h3

Headings in T4:

To add a heading in a T4 rich text editor, select Formats, then Formats in the drop down, hover over Headings and select the appropriate heading. When you hit enter, your text will return to a regular paragraph.

Headings in OneStThomas:

In the OneStThomas rich text editor, select Formats then the level of heading you need. When you hit enter, your text will return to a regular paragraph.

Headings in Cascade:

In Cascade, most headings are built in to modules in heading fields. Otherwise, you can add a heading by selecting Formats then Headings and then select your heading. When you hit enter, your text will return to a regular paragraph.

Hyperlinks

Hyperlink text is the highlighted (often blue and underlined) text that indicates to the user a clickable link (to another webpage, a document, or email address). Hyperlinks are helpful tools to direct your website visitors to helpful information, or to indicate when you want them to take an action (ex. click to request more information). 

In general:

• Link text should be descriptive and unique (where is the link going to or what is the user doing by clicking the link) or example Office of Study Abroad or Apply for Dean's Scholarship. Never surprise your visitor with what happens when they click the link.
• Do not present the full URL (except for email addresses) or use generic terms like Link or Click Here.
• Link text should be concise, the highlighted text should not be more than a few words long, you don't want the hyperlink text to go over two lines of text, as that will look like two separate hyperlinks. 

Video Captions

Videos posted on University of St. Thomas website are required to have captioning.

• YouTube has automatic captioning. Please note these are done by a learning algorithm, so the quality varies. If you utilize automatic captioning, you will need to review and edit your captions to ensure they are accurate. 
• This Closed Captioning article provides information on what, why and how to address captioning in videos. 

Bullets and Numbered Lists

Bullets and numbered lists are a way of organizing information and avoiding "walls of text" on your website. It is important to use the built in bulleted and numbered lists built into the rich text editor. Do not create lists by manually inserting characters, numbers or images in front of list items (ex. - item1, * item 2).

• Bulleted lists are for non-sequential information (i.e. ingredients in a recipe)
• Numbered lists are for sequential information (i.e. steps in a recipe)

Color and contrast

For the most part, color and contrast is set at a system level.  

• Never use color alone to show emphasis (in this case, the text is bold and purple)
• Make sure your colors have strong contrasts between them 

Image Alt-text

Alternative text, or “alt text” describes the content of images, graphs and charts. It should be added to every image that conveys meaning on a website. 

Alt text should answer this question: What is the content conveyed by the image?

The content of the image is not simply a description of the surface features of the image or graphic. Instead, describe what additional content the graphic contains. What information do you want the reader to gain from looking at the image? What is the main idea being expressed by the graphic? Write in simple, precise language, and keep the explanation brief. Typically no more than a few words are necessary, though rarely a short sentence or two may be appropriate. (Tip: Don't start your alt-text with "Image of" or "Picture of" this is not necessary information.)

Where possible, avoid images of text. Text can be hard to view if a user needs to zoom in significantly. If using an image of text, make sure your alt-text accurately depicts the text or include everything written on the image in the text of the website.