• Clear, concise content
• Alt text
• Captions
• Heading structure
• Other structural elements
• Color representation
• Color contrast
• Link text
• Flashing elements
• iframes
• Site validation

The following list is an overview of checks that each webpage should be subject to prior to publication.

Write clear, concise content

Use the clearest and simplest language appropriate for a site's content. Create a descriptive, concise page title. Write in short, clear sentences and keep your paragraphs brief. Avoid unnecessarily complex words, phrases, and jargon. Use bullet lists to break up sentences that are long lists of items. 

Provide alt text for images, graphics, and charts

Alt text is a short description of no more than 125 characters describing the content of an image. For example, instead of alt text reading "students," provide details: "Students throwing frisbees on the UAB Campus Green."  Your content editor (for Joomla, it's JCE) makes this field visible to you as you place the image in the content. Visitors using screen reader programs will hear the alt text read aloud.

If you cannot summarize the content of the image in 125 characters and the content is not supplied in the text of an article, you will need to supply a text equivalent. This is often the case with infographics, org charts, and other information-heavy images. Provide a link to the information written as web text on a separate page. Remember to update the text equivalent page whenever the original content is updated.

Please note that text should be used within/as an image for decoration only, or when the information cannot be presented with text alone.

If the image is purely decorative (for example, the image of a faculty member on their faculty bio page), use the empty alt text attribute, alt="". Learn more about decorative images.

Provide video captions and audio transcripts

Video and audio content can enhance your site, but they can also be challenging for people with disabilities. All audio or video web content must be presented with either captions or a transcript. The UAB Disability Support Services office recommends Automatic Sync Technologies to caption your multimedia. Go to the Commitment to Captioning page to learn more about some of the university's efforts to ensure universal access to communication.

If you are captioning your own videos, do not rely solely on automatic captioning. 

There are two types of video captioning available in Canvas: machine and professional. Machine captioning is around 80% accurate and can be edited to increase accuracy. Please note that machine captioning does not meet the needs of students who are approved for video captioning as a DSS accommodation. 

Professional captioning is more accurate and can be requested via the UAB Disability Support Services request form. Professional captioning is strongly recommended by DSS for all course videos and is the required method of captioning when a student in the course is approved for captioning as an academic accommodation.

Remember to update both captions and transcripts if the original material is changed.

Structure your content with headings

Headings (H1 to H6) give structure to the content on your page. When headings are coded correctly, users of voice input, screen readers, refreshable braille display, and other browser technologies benefit by being able to use voice and keyboard commands to navigate between headings. This makes pages more scannable and less restrictive for users as they don’t have to navigate content linearly, which can be very time consuming. Some search engines also use headings to index pages.

These tips will help you utilize headings effectively in your sites:

• Headings should represent sections of a page's content structure and not be used merely for visual effects. Headings should be consistent throughout the site.
• Headings should not be coded around content that is by itself, they should always be followed by associated content.
• Headings should not be used on form labels such as the text label “Search” that comes before an input field.
• Use headings to break up large chunks of text.
• Keep headings short and succinct and thus easy to scan and understand.
• For all visual headings in web pages, you must apply a heading structure using H1 through H6:
  • Pages should only have one main heading, H1, which is the main title of the page and should be positioned at or near the top. 
  • Sub headings of the H1 must be coded as H2, subheadings of an H2 must be coded as H3, etc.
  • Multiple H2, H3, etc., can be used as needed.
  • Heading levels can’t be skipped, i.e., do not jump from H1 to H3.

Use lists, tables, aria landmarks, and other structural elements

Lists

Use the built-in list formats in your content editor to create ordered (numbered) and unordered (bulleted) lists instead of typing a number or using a graphic. This helps users of screen readers understand your content. 

• W3C Bullet List Tutorial

Tables

It is best to avoid using a table unless absolutely necessary as they are often difficult to read on mobile devices and by screen readers. Tables should never be used merely as page design elements or for general page structure. If used, tables must be coded fully with proper semantic HTML information.

• W3C Tables Tutorial
• WebAIM Creating Accessible Tables
• 18f.gov Table Examples

Paragraphs

Make sure that all of your paragraphs are marked with the paragraph tag: <p>. This will help users aided by a screen reader know where one paragraph ends and a new one begins.

Aria Landmarks and Other Semantic Page Structure Elements

If you are coding a page yourself, mark up different regions of pages (headers, footers, content, etc.) so that they can be properly identified by web browsers and assistive technologies.

• W3C Page Regions Tutorial
• WebAIM Semantic Structure

Do not use color or other visual characteristics to communicate information

Have you used instructions like "click the image on the right?" Have you signified important information by putting it in red text or bold text (or both)? Have you used color to indicate which fields on a form are required? Using only visual descriptions in your text makes it difficult or impossible for people with certain disabilities to understand that the specific information is important. 

Possible solutions:

• "Click the image on the right" — Instead, supply the link in the text.
• "Required fields are in green" — Instead, use "* indicates a required field." As the asterisk itself is in the text, a screen reader will read it out loud and a color-blind person will see it.
• Using red text to make content stand out — Do not use colored text for this purpose. Instead, use a heading or some other element in the text to call attention to the content you want to emphasize (such as starting a paragraph with "Important:"). 

Use sufficient color contrast in graphics and text

When using colors to provide visual interest, there must be sufficient color contrast between the foreground and background. 

Give links unique and descriptive text

Visitors using screen reader may not read through an entire page to find what they are looking for. They simply move from link to link. If your link text does not make sense, the visitor will have a negative experience with your site. 

Avoid language like "link" or "click here" or "read more." This gives your visitor no useful information. Also avoid using the actual URL in the text as the screen reader will read every character in the URL (imagine being read the information on a page and having to listen to https://www.uab.edu/news/research/item/11574-likely-molecular-mechanisms-of-sars-cov-2-pathogenesis-are-revealed-by-network-biology before you can move to the next link).

Link techniques:

• Make the link text meaningful. Instead of, "for more information about how to apply, click here" (with click here being the linked text), link the phrase "Learn more about how to apply."
• If you must include a URL, include a shortened version. Instead of "Read the full article at https://www.uab.edu/news/research/item/11574-likely-molecular-mechanisms-of-sars-cov-2," link "read the full article at uab.edu/news."
• Advanced users can use aria labels to make link text more accessible.

Avoid flashing or flickering content

Flickering or flashing content can trigger seizures. The W3C Web Content Accessibility Guidelines 2.0 provide general and specific guidelines for you to follow. If you choose to use content in this manner, it should not flash more than three times in any one-second period.

Give titles to iframes

When a screen reader encounters an iframe, it is helpful to have a title in place to describe its purpose.

Validate your site

Once you are finished designing your website, it is important to validate the site for accessibility issues. Web accessibility evaluation tools are software programs or online services that help determine if a website meets accessibility guidelines. There are a variety of validators available for free. One of the more popular sites is WebAIM's WAVE web accessibility evaluation tool. These tools are software programs or online services that help determine if a website meets accessibility guidelines. 

Important: While web accessibility evaluation tools can significantly reduce the time and effort to evaluate websites, no tool can automatically and fully determine a site's accessibility.