Digital Accessibility Basics
There are several Web Content Accessibility Guidelines (WCAG) that should be incorporated into your daily communications with students, staff, and the community.
Please review the guidelines below and integrate them in your day-to-day workflow.
Who is responsible?
All MCC employees must comply with Web Content Accessibility Guidelines (WCAG) 2.1 AA.
Tools for Accessibility
Accessibility checking tools built in to Outlook, Microsoft Apps, color contrast checkers, etc. Learn more about the tools you can use below.
Digital Accessibility Best Practices
POUR Principles
WCAG 2.1 AA use the POUR principles to organize the guidelines. The principles are the foundation of web accessibility and mean content must be:
Perceivable: Users must be able to access content in ways they can perceive.
Operable: Users must be able to navigate content several different ways based on their abilities.
Understandable: Users must be able to easily understand content and how to use it.
Robust: Content must work reliable across different browsers, devices and assistive technologies.
The Basics
Alternative Text
Use text to describe an image to a person using a screen reader.
Learn more about Alternative Text Accessibility.
Captions for Videos
Provide accurate closed captions for pre-recorded and live videos.
Learn more about Video and Audio Accessibility.
Color
Use color thoughtfully and do not use it as the only means to convey meaning.
Examples of appropriate color use:
Make sure that a hyperlink is not just blue but is also underlined. This allows someone who is colorblind to recognize a hyperlink from the underline rather than the color.
When using infographics and diagrams, ensure the elements are labeled AND color-coded rather than just color-coded.
When creating a form, mark required fields as such with text AND a color rather than just a color.
Color Contrast
Ensure the text color and background color are a 4.5:1 ratio.
Microsoft products, Canvas and other commonly used apps have accessibility checkers built in, and they will check for appropriate color contrast within the system.
Examples of appropriate color contrast:
Choose a light text on a dark background or a dark text with a light background. For people with a form of colorblindness, color combinations like yellow text on a blue background or green text on a red background can be difficult to see.
Tools:
UDOIT Accessibility Checker for Canvas
Lists
Format lists using numbers, letters, or bullets to make them easy to read and navigate.
Do not add a dash, number or other icon manually before each item. Instead use the bullet point, number or letter functions within the application. This is important to ensure a screen reader can properly navigate the list.
Links
Use descriptive titles for link text rather than a long URL.
Long URL strings will be read aloud completely to a person using a screen reader and it may be difficult for the person to decipher where the link is going to take them.
Avoid using "click here" or "read more" as these phrases do not explain where the link is going to go.
Example of proper links and use in a sentence:
Learn more about the Web Content Accessibility Guidelines 2.1 AA
If you're interested in learning about the exceptions to WCAG 2.1 AA, visit the Americans With Disabilities WCAG Fast Facts Sheet
Tables
Create accessible tables with clear headers and structure.
Properly formatted tables can be easily read by assistive technology and assist all users with understanding the relationship between data points.
Many platforms we use daily will flag inaccessible tables in their built-in accessibility checkers.
Tools:
UDOIT Accessibility Checker for Canvas
Headings
Add headings to documents to improve readability and navigation.
Headings make content easier to access by breaking up long sections and creating a clear structure. They aren’t just bigger or bolder text—headings are built into the code so assistive technology can identify and navigate them.