Alternative Text (Alt Text)

Alternative Text (Alt text) is a textual alternative (non-visual) way to describe the meaning of an image. Please provide a brief (under 100 characters) description of all images.

The alternative text provides several services:

• Screen readers cannot analyze an image and determine what the image represents, instead, the screen reader uses alternative text to convey the image to the user.
• In cases where an image is not loaded into a web page, the alternate text is displayed instead. Some users choose not to display any images in the web browser and prefer to read the alternative text.
• Search engines use alternative text to assist in search results.

Best Practices

• The accepted practice for images varies depending on the use of the image. If an image is included in Canvas for educational purposes, a complete description of the image is required. Charts and graphs are examples of images that require a detailed explanation so that sight-impaired users can gain knowledge. Another example would be an image for an Art History course.
• If an image is for aesthetics only and does not contribute to the content of the page then the image can be more generally described.
• Avoid using "image of" or "picture of" within the alternate text. A screen reader will automatically say "image of" before reading the text.
• For images that also link, avoid using "click here" or "link to" in the alternative text. The screen reader will automatically say "link" before reading the description.

Examples of Alternative Text

• Descriptive alternative text, not the file name
  • A proper alt text image will include a description of the image:
  • <img alt="Ancient prehistoric cave art depicting a bison of the cave of Altamira.” src="https://miamioh..." />
  • The screen reader will read “Ancient prehistoric cave art depicting a bison of the cave of Altamira.” The description provided in this example provides knowledge to the sight impaired user.
• Aesthetic or Instructional Image?
  • If the image is simply decorative and does not have educational value, general alternate text is acceptable:
  • “Raphael Fresco School of Athens.”
  • If the image is related to a course and has educational value, a more descriptive alternative text is required:
  • “The image is about philosophers in the Greek era. Its overhead tondo-label, “Causarum Cognitio,” tells us what kind of philosophy, as it appears to echo Aristotle’s emphasis on wisdom.”
  • The subject matter expert should assist in determining the educational purpose of all images.

Color Contrast

Color is an important asset in the design of web content, enhancing its aesthetic appeal, its usability, and its accessibility. However, some people have difficulty perceiving color. People with partial sight may experience limited color vision, and many older users do not see color well. In addition, people using text-only, limited-color or monochrome displays and browsers will be unable to access information that is presented only in color.

Best Practices

• Avoid communicating information with color alone.
  
  • Use high levels of color contrast.
  • Most accessible colors against a white background:
    
    • Black (or white text on a black background)
    • Burnt Orange
    • Very Dark Gray
    • Medium to dark blue for links/hyperlinks
  • Users with partial vision benefit from text appearance such as size, color, bold, italics, and underline to draw the attention of the content.
  • Use headings to delineate the hierarchy and importance of text. Avoid using formatting styles such as bold, italics, and underline, alone as ways to delineate structure.

Fonts

Fonts are the style of typeface used to display text, numbers, characters and other "glyphs".

Best Practices

• Apply Sans Serif style fonts (e.g., Arial, Helvetica) with a 12 pt minimum font size.

Forms

Forms are commonly used to provide interaction on websites and in web applications. Examples of common forms include login, registration, comment, and purchasing.

Best Practices

• Provide instruction for the form (i.e. “* = required form field”).

Headings

Headings provide structure to your documents by describing topic and subtopic areas in an outline fashion.  Word processing documents (such as Word or Google Docs), web documents (such as HTML pages), and destination formats (such as PDF) all are more usable and navigable by assistive technology tools and those who use bookmark and Table of Contents when these document structures are in place.

Best Practice

• Use proper formatting, styles, and headings in a logical order. Avoid skipping headings or using headings inconsistently.

Links/Hyperlinks

Because many screen reader users use links to navigate the page, providing links without text hinders these users. Links should be descriptive of the content they're linking to, such as 'Class Schedule' rather than 'schedule.html' or 'click here'.

Best Practices

Follow these guidelines when adding links to web pages and documents:

• Link text should describe the destination.
  • Example: Learn more about Institutional Diversity at Miami.
• Avoid duplicate links on pages.  These links may have different descriptive text but take users to the same place.
• Avoid using generic descriptions such as “click here”, "online", "learn more", etc. These labels do not describe what the link represents a person with sight impairments. Students will NOT hear the link in the context of the sentence, usually, the links are read separately.
• Don't underline text unless it is a link/hyperlink.

Examples of Descriptive Link Text

Poor Usage Examples

• "Neil Danielson, in his paper ''Multimodal liquid chromatography of small molecules," http://pubs.rsc.org/en/Content/ArticleLanding/2013/AY/c3ay40302e#!divAbstract says Multimodal chromatography is a family of..."
• “Click here to access this week’s reading assignment.”
• Read more about biochemistry research at Miami online.

Good Usage Examples

• "Neil Danielson, in his paper ''Multimodal liquid chromatography of small molecules," says Multimodal chromatography is a family of..."
• Access this week's reading assignment.
• Read more about biochemistry research at Miami.

Lists

Ordered (sequential or numbered) and unordered (bulleted) lists present items or information in a sequence for the reader.  If your digital content includes lists, make sure they are made using actual list buttons or markup language for maximum accessibility.

Best Practices

• Use bulleted and numbered lists to break up the text.

Tables

Best Practices

• Tables <table> should be used to organize and display data, not for content/page layout.
• A caption tag <caption> should be at the top of the table. The caption is visible to everyone and should describe the purpose of the table.
• Column and row headers <th> provide a description of the table structure for sighted and screen reader users.
• Scope attributes (<th scope="col"> or <th scope="row">) in headers organize and further define table data by row/column for screen reader users.
• Avoid merging or splitting table cells, as doing so will cause screen readers to read the table columns and rows inaccurately. Special HTML codes are used for merged cells to allow the content to be read accurately by a screen reader.
• Table headers <th> should never be empty, but table data <td> can be empty.

When using websites, it is good to check them for accessibility to ensure the material can be viewed. WebAim WAVE is a free tool that can easily scan a page to tell you if it's accessible. The more RED errors you have on a page, the less likely you should use it. It is recommended for faculty to find resources that are the most accessible. If you are using applications in the class and would like to have them tested for accessibility you can also contact AccessMU@miamioh.edu

Animated GIFs may cause seizures if they flash more than 3 times per second. A recommendation is to use an alternative format to deliver the content.

If you are a Cascade user, University Communications and Marketing provides great resources on Website Accessibility.