Some might assume that visitors to any UAB web page can see all graphics and content. However, many users are visually impaired and use special programs to read text aloud. Also, those who are color-blind might have problems navigating your site if you rely on color to convey information. Other users are unable to use a mouse or may use a text-based web browser called Lynx, which has no pictures and uses the keyboard for navigation rather than a mouse. Accessible design helps those with disabilities – including students, faculty, and staff – understand and use web-based class materials more effectively as well.

The following list represents a comprehensive overview that each web page should be subject to prior to publication. This list is from the W3C guidelines for accessibility.

  • Provide a text equivalent for every non-text element.
  • Ensure that all information conveyed with color is also available without color.
  • Clearly identify changes in the natural language of a document's text and any text equivalents (e.g., captions).
  • Organize documents so they may be read without style sheets.
  • Ensure that equivalents for dynamic content are updated when the dynamic content changes.
  • Until user agents allow users to control flickering, avoid causing the screen to flicker.
  • Use the clearest and simplest language appropriate for a site's content.
  • Provide redundant text links for each active region of a server-side image map.
  • Provide client-side image maps instead of server-side image maps except where the regions cannot be defined with an available geometric shape.
  • For data tables, identify row and column headers.
  • For data tables that have two or more logical levels of row or column headers, use markup to associate data cells and header cells.
  • Title each frame to facilitate frame identification and navigation.
  • If, after best efforts, you cannot create an accessible page, provide a link to an alternative page that uses W3C technologies, is accessible, has equivalent information (or functionality), and is updated as often as the inaccessible (original) page.

Guidelines

Audio/Video Captions

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.

If you are doing your own captioning, do not rely 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.

Colors

To make sure the colors on your website are accessible, you can visit the WebAIM color contrast checker. The contrast checker allows you to input the colors on the page to tell you if the colors are an acceptable color contrast. You can use the Chrome extension, Eye Dropper, to pull the exact color from the document or web page.

Forms

When creating online forms you must have alt tags for each field in your form. These tags will allow screen readers to notify the user to both the presence of a user fillable field and to what data the field should contain. If you create forms in Adobe Acrobat Pro, you must take similar steps to identify each of the fields.

For more details, please visit the WebAIM page about "Creating Accessible Forms."

Headings

Heading mark up, H1 to H6, is wrapped around headings in a page to give the page structure. When headings are coded correctly, users of voice input, screen reader, 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:

  • All visual headings in web pages must have a heading structure applied using H1 to H6.
  • Headings must be used to describe a page’s structure and not used for visual effects.
  • Pages should only have one main heading, H1, which is the main title of the page and should be positioned at the start of unique page content.
  • Headings are like a contents overview of a page. Sub headings of the H1 must be coded as H2 and subheadings of an H2 must be coded as H3 etc.
  • Heading levels can’t be skipped i.e. you can’t jump from H1 to H3.
  • Headings should not be coded around content that is by itself, they should always be followed by associated content.
  • Headings should not be coded around form labels i.e. the text label “Search” that comes before an input field.
  • Heading structure should be consistent throughout the site.
  • Add in headings to break up large chunks of text.
  • Keep headings short and succinct and therefore easy to scan and understand.

Image Tags

To help visitors who use screen readers and other forms of aid to navigate your site, alternate or "alt" text should be used to explain the purpose of every image.

Your content editor (for Joomla, it's JCE) makes this field visible to you as you place the image in the content. For example, if you have placed a right-facing arrow to instruct users to click to visit the next page, the alt text should not say "arrow.png" — instead it should say "next page."

While there is no official length restriction on the length of alt text, we recommend using no more than 125 characters to describe an image. See W3C's accessibility guidelines for more information on using alt text.

Links

Links to web content form the backbone of websites. Those links can potentially be a barrier to accessibility.

Links should be truncated if possible to a meaningful URL. If a screen reader is reading out a string of characters the user will get frustrated, confused, and will waste time listening to each character as it is read.

Tables

When inserting data tables into your site you must designate row and column headers with the <th> tag in HTML or designate them with a content management system tag. Screen readers must be able to properly return the information to the user logically and meaningfully. In general, simple tables are much more accessible than complex ones.

For more details, please visit the WebAIM page about "Creating Accessible Tables."

Additional Resources

The list of external resources is meant to enhance your ability to offer accessible resources.

Accessibility Validators details resources that will check your website and return a list of accessibility issues. You must run your site through at least one of these validators before going live with your site.

The international DO-IT Center promotes the success of individuals with disabilities and the use of computer and networking technologies to increase their independence, productivity and participation in education and careers.

    • Accessibility Validators
      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 WAVE or WEBaim. Web accessibility evaluation tools are software programs or online services that help determine if a website meets accessibility guidelines. While web accessibility evaluation tools can significantly reduce the time and effort to evaluate websites, no tool can automatically determine the accessibility of web sites.
    • W3C Web Accessibility Initiative
    • WCAG Quick Reference