Basic Accessibility Checklist

• Accessibility Tools

  There are many tools used to check accessibility both for webpages and documents submitted into the content management system.

  WordPress & Sitecore Users:

  • Siteimprove is the evaluation tool for WordPress web sites, It is used for review and scoring of web pages and documents.
    (Report will be set up after an initial training for WordPress users only.) 
  • To start receiving a Siteimprove weekly reports, evaluate digital assets, or review ADA-compliance web strategy, please connect with your unit’s marketing communicator.

  • Siteimprove Extension for Chrome. (Page checker)

  • WAVE Introduction Chrome, Firefox, and Edge browser extensions and Sitecore CMS are the tools used for spot checking The Hub web pages.
     It shows Aria labels, Alt Text, and link information for on-page content.

  • WAVE Extensions for Chrome, Firefox, and Edge. (Page checker) 

  Digital Documents

  • WebAIM Contrast Checker - Compare color contrast on digital projects to see if combinations pass ADA color compliance.
  • Built-in Accessibility Checkers - Microsoft applications have a built-in accessibility checker to assist in ADA compliance. It is not perfect but will fix some of the common issues with being read by screen-readers.

  Writing Tools

  • Free AI Title Generator
    Place in OpenGraph: Title Section

  • Free AI Meta Description Generator
    Place in OpenGraph: Description Section

  • Free AI Image Alt Text Generator
    Place in Image: Alt Text Section

  More details on resources and tools is available on Resources: Intro to Creating Accessible Digital Content.

• Alternative Text for Images

  All images require Alternative (Alt) Text or text equivalent. When adding an image to a webpage you will be prompted to add Alt Text or an image description. This field is located below the callout text used to add an image.

  Alt Text is a short phrase used to identify images on web pages and social media. Longer descriptions are used for artwork and images that display text. Adding text to an image is part of making a page accessible to users who use assistive devices, screen readers, and non-graphical web browsers. These devices will read or display the Alt Text in place of an image. It is important if an image displays the information required to fully understand the web page.

  Writing Good Alt Text

  The appropriate text is determined by the context of the image (and the accompanying content). The text should be relevant to the image and not repetitive of the content.

  

  Alt Text Walking Man Example:

  1. Okay Alt Text: “Man on escalator”
  2. Better Alt Text: “Man walking on an escalator”
  3. Best Alt Text: “Man wearing backpack walking down escalator” 

  Image and Alt Text Tips:

  • Describe the image as specifically as possible, while keeping it (relatively) short. (125 characters max.)
  • Use purposeful keywords that are relevant to the page
  • Don’t include “image of,” “picture of,” etc. in your alt text
  • Don’t over describe the contents in the image
  • Don’t use images as text, or overlay text on images
  • Any text within an image has to be repeated in the Alt text

  More details on Images is available on Fixing Accessibility Issues.

• Forms

  Form Best Practices:

  • Provide instructions to help users understand how to complete the form and individual form controls. (in addition to the form field)
  • Label your fields well to be as obvious as possible
  • Don’t pre-populate text
  • Divide long forms into multiple smaller forms use logical steps or stages of related content and inform users about their progress
  • Ask for only what is necessary
  • Submissions should generate and email or a redirection to a web page that informs the user the process is complete

  More details on Forms is available on Fixing Accessibility Issues.

• Section Headings, Page Title & Page Description

  Metadata refers to the Section Headings, Page Title, and Page Description

  Section Headings

  Heading style formats are H1-H5. The H1 is the on-page banner title so use H2-H5 in sequential order to format each Content Block. Headings should be short, descriptive, and relevant to the content below it.

  Heading Tips:

  • Don’t skip levels or use styles for visual aesthetic
  • Create a content structure, outline and highlight important information

  More details on Page Titles and Section Headings is available on Fixing Accessibility Issues. 

  Sitecore Users:

  • Add Page Titles - a short (under 80 characters), unique and descriptive of the page content. Content Details–Page Metadata.
  • Add Title and Description - a short (under 180 characters), and accurately summarize the actions and content of the web page. Content Details–OpenGraph.

• Images and Documents

  Uploading Content Files

  • Use descriptive names for images and document, include the extension. i.e. (.jpg) (.pdf) (.txt)
  • Optimize images and document for the web
  • Content can’t be larger than 20 MB, for regular and compressed files. i.e. (.zip)

  Images

  • All Images require Alt Text or caption
  • Don’t use images of text
  • JPGs are for images, PNGs are for graphics
  • Crop image to size before uploading to the CMS
  • Optimized images for the web

  More details on Images is available on Fixing Accessibility Issues.

  Documents

  When creating a document that will be uploaded into the CMS run an Accessibility check first. Microsoft applications have built-in accessibility checkers to assist, it is not perfect but will fix some of the common issues with being read by screen-readers.

  • Check for accessibility (with the program it was created with)
  • Documents should be in PDF format when possible
  • Large documents need to be optimized for web
  • Heavily designed documents that can't be made accessible need a text equivalent

  More details on remediating Documents is available on IT Accessibility Documents.

  Sitecore Users:

  Image Alt Text, and Document title, and description text can be added on upload or by selecting the item after uploading to the CMS.

  • Select the Item from the Media Library
  • Add Alt Text: Content Details–Image
  • Add a Title and Description: Content Details–Information

• Link Text

  Link text should be short and descriptive, relevant to where the user is being directed. Avoid using sentences or multiple calls to action as links. The OpenGraph Title or Page Metadata title of the destination page is a good option. 

  Links need to be understood out of context.

  Link Tips:

  • Text should describe where a link is going too 
  • Avoid using: Click Here, Visit, full URLs or multiple Read Mores, as link titles
  • Have consistent link text for links going to the same place
  • Alternative Text can be added if the destination is not clear

  More details on Links and User Controls is available on Fixing Accessibility Issues.

• Remediation Strategy

  Inventory webpages, images, and documents on both WordPress and Sitecore websites. Determine what content is frequently used, level of importance, and remediation difficulty.

  Website Strategy

  • Remove or delete outdated content
  • Archive or unpublish pages that doesn't need to be visible or searchable
  • Combine similar or low content pages 

  Document Strategy

  • Remove or delete outdated and orphaned content 
  • Archive, set to private or unpublish documents that don’t need to be visible or searchable
  • Start remediation with frequently used webpages, forms, Instructions and vital information documents
  • Concentrate efforts on document created after April 2024 and work backwards

  For additional support and strategy tips, reach out to your areas Marketing Communicator or email lrosado@uchc.edu.

• Tables

  To make tables accessible, provide a table title and description as on-page content or within the tables Accessibility properties summary section.

  Table Tips:

  • Use clear and related titles in the Header Rows and Columns
  • Don’t use a table to format content
  • Add a Table Description

  More details about creating Data Tables is available on Fixing Accessibility Issues.

  Sitecore Users:

  • Add a description or summary of the tables contents
  • Use Table Properties>Accessibility Summary

• Videos Featured on Website

  The best practice for videos is to send viewers to YouTube or the source to view a video or video playlist.

  To meet accessibility standards for videos that are embedded, or displayed on the website videos must:

  • Be Identified as a video and have a description
  • Contain an Alt Text video title
  • Have proofread captions
  • Link to a text transcript (If the video is providing information)

  More details and a full list of requirements are available on Media and Multimedia.