Accessible Website Content

Organize content using headings to help clarify the content of a page. Proper heading structure allows screen reader users to navigate the document efficiently and 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.

• One Heading 1 (H1) for the main document title. This is the title that displays at the top of the web page.
• Use Heading 2 (H2) for main sections
• Use Heading 3 (H3) for subsections under H2
• Do not skip levels (e.g., H2 followed by H4)
• Keep headings descriptive and meaningful

For each heading, use 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
• Avoid underlining text on websites, as underlines can make regular text appear to be a link
• Use the tools built into the editing platform 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
• Each link on a page should have unique, descriptive text so users can understand where it goes without relying on surrounding content. If multiple links use the same text, such as "Register," screen readers cannot tell them apart, making navigation confusing and inaccessible.

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 Proper Descriptive Link Text

• Correct link text examples:
  • Accounting Program Overview
  • Register for Sculpting 101
• Incorrect link text examples:
  • Click Here
  • Register

Include Alt Text to All Images

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

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

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