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.

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

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.

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

Examples of Corrected Heading Structure

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

• 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

Use the "Alternative Description" field on images 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, 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.

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.

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

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

• 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.
• Table layouts should only be used for data tables (tabluar 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.

Accessible Table Resources

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

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