Accessible Web Content

Organize content using headings to help clarify the content of a page. Headings should function as an outline of the text.

Headings range from level 1 to 6. They should be used in a logical sequence, meaning heading numbers should not be skipped or used out of order.

Heading 1 should be used only for page titles, and it is automatically applied by Modern Campus CMS. Web editors only use Heading 2 or lower within web page content.

For each heading, select the correct option based on its number, not its visual style.

Testing Tip: Write the page headings as an outline, noting where you would nest sections and subsections. Do your heading numbers match your outline?

Example of Corrected Heading Structure

Formatting

• Pasting pre-formatted text can cause problems in the code.
• To create emphasis, use either bold or italics.
• Avoid underlining text on websites, as underlines can make regular text appear to be a link.
• Use the tools in Modern Campus CMS to add formatting such as bold, italics, bulleted lists, or numbered lists.
• Avoid using all caps, which can be difficult for visitors and assistive technology to parse. Use all caps for acronyms only, such as UHCL.

Adding Text to Digital Content

• Use brief, clear language that still makes sense out of context. Links should give visitors a clear idea about where they will go.
• Avoid general phrases, such as "click here" or "learn more," without including additional information in the link text.
• Also, avoid using direct URLs as link text, and avoid using identical text for links to different destinations.
• Do not include text in the link "title" field.

Testing Tip

Write out a list of all the links on your page, using only the linked text. Are the links clear and understandable out of context? Do any repeat?

Examples of Corrected Links

Include Alt Text to All Images

Use the "Alternative description" field within the Insert/Edit Image tool in Modern Campus CMS to add alternative text describing the image. Screen readers and other assistive technologies read these descriptions aloud. Typically, descriptions should be brief.

Example: For the image in this section below, the alternative description reads "UHCL students at work in a biology lab."

Avoid Images With Text In Them

If an image with text is unavoidable, be sure all visible text from the image is included in the "Alternative Description" field or is included in text elsewhere on the page. Whether the webpage is read visually or aloud, visitors should receive the same information.

Graphs and Diagrams

For graphs and diagrams, include a description that explains the meaning of the image. If the description is long, it can be included in the page's main text, with only a brief summary in the image's "Alternative description" field.

"Decorative" Images

For purely decorative icons or images, an alternative description may not be necessary. If you're not sure, reach out to your web coordinator.

Text Alternative and Captions

All videos and other multimedia require a text alternative. For videos, include closed captioning. For audio, include a transcript.

YouTube creates automated captions for all videos, which you can also edit by hand or replace with your own captioning.

Accessible Video and Multimedia Resources

• Adding custom captions in YouTube

Tables Usage

Table layouts should only be used for data tables (tabular data), which can include schedules, logs, fee structures, and other organized information. Tables should not be used for desired layout or to create a certain "look" to your page.

Table Requirements

• Keep data tables as simple as possible. Each cell should contain a single piece of information.
• If a page has multiple tables, use a separate table snippet for each.
• Tables should always have either a heading or caption to indicate what they are about.
• Every table should also have table heading cells, either as column headings, row headings, or both.
• If your table has a cell with no data, leave it entirely empty. Avoid using hyphens or other visual signifiers that the cell has no data.

Accessible Table Resources

• W3.org Web Accessibility Tutorial: Tables Concepts
• WebAIM Creating Accessible Tables: Data Tables

Digital Accessibility Compliance

Before uploading a document to the website, check it for accessibility. You may need to work with the creator of the file to make corrections.

Like accessible websites, accessible documents and files typically need clear and/or labeled headings, links, images, and tables.

UHCL's Accessibility Support Team at the UHCL Accessibility Support Center offers regular training on creating various types of accessible documents.

Accessible File Resources

• Checking Microsoft files for accessibility (Microsoft)
• Creating accessible documents and PDFs (University of Minnesota)
• Creating accessible PDFs in Adobe Acrobat (Adobe)
• Creating accessible Word documents (UHCL Accessibility Support Team)
• Creating accessible PowerPoint presentations (Microsoft)

Plain language makes it easier for all users to read and understand web content. Plain language may be especially helpful to English language learners, people with certain disabilities, and others.

How to Write in Plain Language