Digital Files, Websites & Applications

Follow the basic principles of Accessibility:

Note – If you follow these general rules, you accomplish about 80% of creating an accessible document!

  • Use header styles (paragraph, header 2, header 3, header 4) when creating subsections on a page
  • Provide alternative text (ALT text) for images and charts
  • Avoid communicating information with color alone
  • Use formatted lists (bulleted or numbered)
  • Use descriptive web links - avoid using the entire URL or “click here”

When Do I Need to Remediate?

  • When you have a student with a requested accommodation through Student Disability Services (MCSDS), provide ADA accommodations as directed in the letter from MCSDS and work with the Accommodations Coordinator for assistance sds@MiamiOH.edu.
  • Best practice - when you build a new course or add new materials, try to ensure that they’re accessible.
  • You can continue to use your existing materials without remediation, but you should develop a plan to remediate over time.

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.

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

  1. 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 the knowledge. Another example would be an image for an Art History course.
  2. 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.
  3. Avoid using "image of" or "picture of" within the alternate text. A screen reader will automatically say "image of" before reading the text.
  4. For images that are also links, 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

1. 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.

2. 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.

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 to a person with sight impairments. Students will NOT hear the link in the context of the sentence, usually the links are read separately.
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.
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.
Good Usage Example
Column Heading 1
Column Heading 2
Column Heading 3
Row Heading 1
Table data
Table data
Row Heading 2
Table data
Table data
Row Heading 3
Table data
Table data
Row Heading 4
Table data
Table data

Text & Formatting
Best Practices
Users with partial vision benefit from text appearance such as size, color, bold, italics, and underline to draw 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.
Screen readers will not read font size, color, or style, but screen magnifiers show users the importance of the text.
Don't underline text unless it is a link/hyperlink.
Use bulleted and numbered lists to break up text.
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
Websites & Applications
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.

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