Website Accessibility

UCM continually works towards making Miami's website meet accessibility standards as outlined in Web Content Accessibility Guidelines (WCAG) 2.0. These standards are part of the Web Accessibility Initiative (WAI), a working group of World Wide Web Consortium. Section 508 of Rehabilitation Act outlines many of these requirements, and all website editors and publishers should be familiar with them.

What does UCM do to make sure Miami's web content is accessible?

UCM partners with the Office of Accessible Technology and uses a tool, AMP owned by LevelAccess, to validate our templates, functionality, and pages ensuring the following questions are answered:

  • Is all the content/code properly formatted?
  • Can all the content on the page be read by a screen reader?
  • Can the content be accessed when using only a keyboard, no mouse?
  • Are any images missing Alternate Text?

Within the Miami templates, we provide skip links so visitors can tab directly to the important parts of the page (e.g. skip to the body content).

We also check the color scheme of our sites for compatibility with various types of colorblindness (high contrast is key!).

If any content is identified as inaccessible, UCM will request the content creator fix it, providing a recommended solution. If the content creator will not fix the issue(s) then UCM may take that content off of the website.

What should YOU do to make sure your web content is accessible?

Use this checklist as a reference when reviewing your pages to help ensure that all of the types of accessibility issues have been addressed.

Use Headings within the content

  • Format and organize your content using headings instead of bolding and/or italicizing paragraphs. 
  • Use headings in descending order (beginning with Heading 2) to keep your content hierarchically organized.
  • Each Page Title is already a Heading 1, managed by the templates, and there should only be one Heading 1 in the content.
  • Avoid using Headings 4-6 when possible as most people using assistive technology will search for Headings 1, 2, and 3.

Example of headings in descending order:

This is a Heading 2

This is a Heading 3

This is a Heading 4

This is a Heading 5
This is a Heading 6

Add alternate text to images

Fill in the alternate (alt) text field for EVERY image inserted into your web pages. Alternate text is a short description of the scene within the image. Avoid phrases like "logo," "image of," "photo." 

The alt text is read out loud by a screen reader and shows up if images have been disabled in a browser. For further explanation on how to write effective alt text, see WebAIMS's article on Alternative Text.

Text as part of a Graphic/Image

Any text that is part of the image file must be included in the alternate text. Make sure that the text (on your image, and therefore in the alt text) is no more than 125 characters long.

The text must be legible on all devices. You must check your graphics on mobile, has the font size become too small to read? If so, create a mobile version of your image.

Any text on the graphic must also pass color contrast requirements. You can download the free app Color Contrast Analyzer to easily test if your color combinations meet AA contrast standards. Note: the foreground color is the color of the text, the background color is the color behind the text. Use the eydropper button to click on the text or background to identify the exact colors.

Provide a longer text alternative for infographics

For images that are "information-dense" (such as diagrams, maps, and flowcharts), we recommend using HTML to render the information instead of using the image file. However, if that is not possible, you will still have to provide a text alternative. We recommend that this description resides on the same page, with a link before the infographic to the text alternative (e.g., "text alternative for web accessibility infographic"). Before the text alternative, include a heading for it, such as "Text Alternative." (If the text alternative is on the same page, then the link will be a jump link; otherwise, it will link out to the page on which the text alternative resides.) 

If the text for a complex graphic is completely explained in the body test, then the image can be marked as decorative.

Closed-caption ALL videos

Video that is embedded within a Cascade web page must be captioned. Although you can use the software of your choice, we recommend YouTube. (If you are not sure what file format to use, see Supported YouTube file formats.) YouTube supports the ability to upload a transcript, which it can read and try to sync for auto-captioning.

However, please be aware that while automatic captions can be used as a starting point, they often prove wildly inaccurate and thus, should not relied upon as the sole resource for the captions. Editing is required.

Keep in mind that some video will also require audio description if much of the content is not conveyed through the spoken word. 

Use descriptive link labels

Never use phrases where the only text within is link is something like:

  • "Click here"
  • "Learn more"
  • "See all"
  • "Read more"

Instead try, "Visit Miami's Office of Liberal Education" or "website guidelines" or "faculty and staff directory"

If you are linking to a file instead of a web page, add the file type and size at the end of the link (e.g., Health Insurance Application Form (PDF 102KB)).

If a person is using a screen reader and reading all of the links on a page, they will only hear "Click here", "Learn more", etc. and will get no description or context to help them understand the purpose or destination of the link.

Ensure all documents are accessible

Documents come in many formats such as PDFs, Word Docs, and Excel spreadsheets. Depending upon what format you use or export to may cause problems for people using mobile devices and assistive technology. Visit the AccessMU site to learn how to create accessible documents.

Following these guidelines will not only make your content accessible to ALL of your audiences but will also help improve your search engine rankings.

You and your fellow web editors can use the WAVE Toolbar, a free testing tool to make sure that your content is meeting the needs of every site visitor.