Accessibility basics to implement today
This guide provides practical steps to improve digital accessibility at VCU by focusing on actions you and your team can take immediately! These basic fundamentals pertain to Canvas course content, web content (i.e. webpages), and electronic documents as well.
Creating digital content for VCU? Awesome! You're responsible for making it accessible. By following basic accessibility practices, we ensure our content is logical, predictable, usable, and understandable for everyone. Let's make it happen!
Headers
- Use headers to structure page content logically.
- Web content (i.e. webpages) must all start with a H1 top level header.
- Canvas course content begins with H2 as the title and H1 is already established.
- Hence, H1 is typically reserved for the page title.
- Avoid using headers for styling purposes.
- Headers are crucial for assistive technology users, as well as every user trying to understand your content.
- Verify header usage using UDOIT in Canvas and/or Siteimprove for web content.
Color Contrast
- Ensure sufficient color contrast for readability
- Adhere to WCAG guidelines:
- Minimum 4.5:1 contrast ratio for normal text
- Minimum 3:1 contrast ratio for large text (18pt or 14pt bold)
- Use online color contrast checkers (e.g., WebAim's Color Contrast Checker, Siege Media color contrast ratio)
- Be aware that fixed themes may control text color and size
- Be aware that link color must also be color contrast compliant with the background color
- Use UDOIT in Canvas to check color contrast
Alt-Text on Images
- Provide descriptive alternative (alt) text for all images
- Alt-text explains the image's purpose and meaning to users of assistive technology
- Refrain from adding text on images that is not machine readable
- Text on images must be provided in the alt description or added in the text body
- Decorative images do not need alt tags but indicate the image is decorative
- Do not use images larger than 1MB as this decreases load time
Alt-Text on Multimedia
- Include alt-text for multimedia (video, audio) to describe its content
- Allows users to understand the multimedia without engaging with it fully
- This is important to always include so that users can choose to interact or bypass content as they wish
Captions and Transcripts
- Always provide captions for videos with audio
- Include easily accessible transcripts near videos (e.g., below)
- Machine generated/auto captions need to be checked for accuracy
- Refrain from auto playing media that lasts more than 5 seconds
- Users must be able to stop auto playing
Simplify/Summarize
- Allows readers to quickly grasp key points
- Prevents readers from being overwhelmed by details
- Improves overall understanding
- Use the guidelines developed from WCAG Technique G86 to summarize text
- Use this Readability Checker to find the readability of your text
Use of PDFs
- PDFs need to be made accessible with header structure, titles, tagging
- Use Adobe Acrobat Pro to remediate PDFs and to check for accessibility
- PDFs need logical reading order
- Refrain from using scanned PDFs. In Canvas, use the UDOIT tool to convert scanned PDFs to a more accessible format
- Do not handwrite content onto PDFs and then upload scans as this cannot be easily converted to a more accessible format
- Do not store unused PDFs in the media library in the Canvas LMS or T4 CMS
- In Canvas, use TidyUP to delete unused files in Canvas courses which will enhance the accessibility score
Auto-Playing Video and Audio
- Avoid auto-playing media for more than 5 seconds.
- Disable auto-playing sound.
- Provide users with the ability to pause, stop, and restart media.
- Be mindful of users with vestibular disabilities who may be affected by motion.
- In other words, refrain from using blinking or flashing text.
Use of Meaningful Links
- Do not use links such as "click here," "read more," or "learn more"
- Link text needs to be descriptive to inform the user the destination of the link
- Do not use URLs as the link text (e.g. instead of using https://admissions.vcu.edu, Use Learn more about VCU Admissions)
- Do not use the same link text on a page that has different destination URLs. If the destination is different, the link text must be different