General Guidelines for Accessible Content Design

Below, you will find general guidelines intended to support faculty and staff as they develop accessible content for students. These guidelines are not intended to be comprehensive and faculty/staff are encouraged to contact the appropriate offices on your campus (e.g., Services for Student with Disabilities, instructional designers, etc.) for additional information.

 

Documents

It might not be immediately obvious what makes a document inaccessible, but there are certain elements that should be updated to meet accessibility needs. Here are some things to remember when creating or editing your documents:

  • Ensure that your sections have appropriate headers. 
  • Refrain from highlighting or identifying information by using color fonts or backgrounds.  These may be difficult for students who may have visual disabilities.
  • Set a proper reading order for your tables. 
  • PDFs should not be scanned images or pictures. A screen reader will not be able to properly read a scanned document. 
  • Web links should be descriptive.
  • Use the bullets tool to create a list.

 

Images

Images must include alternative text (known as “alt text”) which will allow a screen reader software to give a verbal description. The alternative text should give descriptive verbiage of the image, not simply name the object. For students with blindness or low vision, a descriptive image link gives the user the ability to identify the correlation between the image and content being delivered.  For example, the following image shows a salad.

Salad

What sort of alt text could be applied? Using the word “salad” would not giving the user the idea of what type of salad and what is included in it.  An acceptable alt text would be “chicken salad with corn, avocado, and drizzled dressing.” This is more descriptive because it provides detailed information of what type of salad it is.

In general, content editors should also avoid using images as links. If an image functions as a link, the image must have alt text that conveys the location and purpose of the link. 

The WebAim page on alt text goes into more detail on the topic and provides some best practices when creating alt text.

 

Videos

Captions, transcripts, and audio descriptions of video content are required by law* when institutions of higher education:

  • publish videos on public-facing websites
  • receive a request for accommodation from students, faculty, staff and/or the general public to facilitate equitable use of a video resource**
  • receive a request for accommodation of a webcast of a live/real time open meeting or of training/informational video productions which support the institution of higher education's mission

*Basis in law: Title II of the Americans with Disabilities Act, governmental organizations must ensure “effective communication” with citizens; Section 504, all federal entities — and organizations that receive federal funding — must make accommodations for equal access; Open Meetings Act, Texas Government Code, Chapter 551 and Texas Administrative Code (1 TAC §213.32).

**For students registered with Disability Services, timely accommodations must be made for both required and optional video resources, to provide individuals with an equitable educational experience.

 

Web Design

Much like online courses, websites should adhere to accessibility best practices so its visitors can effectively access and navigate its pages. When designing a webpage, users are encouraged to apply many of the same principles found on this page. Examples include: 

  • Appropriate user of color
  • Descriptive web links
  • Alt text for images
  • Captioned videos
  • Audio transcripts

Users are encouraged to review the W3 introduction to accessibility webpage (and its associated links) on making websites accessible to learn more.

 

Web Links

When including web links in a course or document, it is important to ensure that the links are descriptive. This will help students who use screen readers or other adaptive technology for a disability understand what the link is and where it will take them. Avoid simply pasting the link in the document as this is difficult for adaptive software for a student with disability to identify.

Designing Links

Design links so that they are descriptive and give the user an idea of where they will go if they click on it. Users should not have to guess where a link will take them. When designing a link, avoid using phrases like “here” or “Click here.” The “here” does not tell the user where they are going. Instead, be as descriptive as possible. 

Example:
Not recommended:    Click here
Recommended:     UT System website

In the above “Not recommended” example, “Click here” doesn’t tell the user much about the link. In the “Recommended” example, the user is told that the link will take them to the UT System website. This is preferable as it not only gives users an idea of where a link will take them but also gives them the information necessary to decide if they even need to visit the site.

In addition, if you are including a link that does not allow the user to return to the original web link by clicking the browser’s back button, it is highly recommended that you provide an alert stating they are leaving the host website. One method would be to add the word “External” in the link so that users are made aware that clicking it will take them off the host site.

 

Links with Color

Giving links a different color from the surrounding text is common on the web. Color differences help sighted users, especially users with cognitive impairments. However, color differences alone are not enough for accessibility.

In general, pages should have some non-color way of identifying links. This concern applies most to links that appear alongside or within blocks of text. Links that appear in menus, for example, are clear enough because of their place in a layout.

The easiest way to provide non-color link indicators is by underlining links. The underline should always be persistent, not solely on hover. For example, UT System website is not fully accessible. While it is descriptive, it strictly uses color (in this case, the color blue) to signify that it is a link. A better example would be UT System website. In this example, there is an underline beneath the text as well as color to signify that it is a link.

 

Adjacent Links

Pages should not present more than one link to the same destination next to each other. One common design pattern is for an image, a heading, and a word like “More” to each link to the same destination. Assistive technology users may find navigating through several links a bad experience. Instead, provide one link. Either select one element to be the link or wrap all elements within one link.