When it comes to accessibility, the Marketing and Communications (M&C) and the Information Technology Services (ITS) departments strive to meet at least AA compliance from the Web Content Accessibility Guidelines, or WCAG. Throughout this document, we have included links, when appropriate, of the WCAG guideline for further reading, if you so wish.
What is accessibility and why is it important? Derek Featherstone, a well-known speaker on the subject of accessibility, talks about accessibility in this video available on LinkedIn Learning: What is Accessibility? Another great video from Derek Featherstone is: Views of Accessibility.
Content owners must adhere to these policies when it comes to accessibility of their website:
- UT System-Wide Policy: IT0126
- UTIA Accessibility Plan (updated 11/2022)
- UTIA Accessibility Procedures
“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.” Tim Berners-Lee
UTIA strives to use universal design with the web redesign. Universal design is the concept of designing for everyone – people with & without disabilities, no matter their age. It is easier to design for accessibility from the very beginning, rather than as an afterthought.
“Accessible design is good design.” Steve Ballmer
Please read on for tips and best practices to ensure that your website meets the accessibility guidelines.
General Tips for Your Content and Accessibility
Tips to help you think through your content:
- CMS Tools: We are using WordPress as our new content management system, or CMS.
- Link Descriptive Text: How can content owners help visitors that use screen readers understand the context of a hyperlink?
- Image Alt Texts: How can we ensure that our visitors with vision issues know what an image contains?
- Color: How can we make the use of colors on a webpage easier for our visitors to see the content?
- External Links: How can we let our visitors know that a link is an external link, a PDF, a Word document or an Excel spreadsheet?
We want to assist content owners in ensuring that their content is accessible to everyone that visits the website by creating boundaries within the UTIA CMS. These boundaries are designed to assist content owners from inadvertently violating an accessibility guideline and ensuring that the website content meet the standards for accessibility.
Link Descriptive Text
WCAG 2.4.2: For visitors that have vision problems, from color blindness to being totally blind, the use of screen readers is important when they visit websites. To make it easier for these visitors, please refrain from using “click here”, “read more” or “learn more” only in the descriptive text for links. You want the visitor to understand the context of the hyperlink.
Image Alt Text
WCAG 1.1.1: In the alt text for photos, use a meaningful and descriptive alt text for all graphics and images. Also, do not use the file name of an image as the alt text, as it is not descriptive enough. The alt text is read by screen readers and search engines and can also been seen if one hovers their cursor over an image.
To learn about best practices regarding alt text, please see WebAIM’s Alternative Text.
WCAG 1.4.3: Departments and content owners are encouraged to use the combination of slate gray and white for background/text colors. Our CMS will not allow content owners to use any other color scheme for the background and text colors. Using this color combination ensures that your content meets the accessibility guidelines set forth by the Web Content Accessibility Guidelines.
The “UT Orange” used with white or slate gray does not meet the color contrast ratio guidelines. In fact, the “UT Orange” should only be used as an accent color on webpages. Content owners are encouraged to use the other colors found in the Style Guide as accent colors for decorative elements and button outlines – but not as a text or background color. The color choices that are available for text, background and accent colors have been a part of the branding from the M&C team. The team has placed boundaries to ensure that the color palette can only be used as accent colors.
To ensure that your color contrast meets the guidelines, please use the WebAIM Color Contrast Checker to check the contrast ratio.
WCAG 1.4.1: Do not use color as the only visual means of conveying information, such as a red asterisk for a required field in a form or using only colors in a bar or pie chart.
WCAG 2.4.9: With WordPress, we will let our visitors know if a link they are clicking on is an external, which would open the link up in a new tab, or a PDF document, Word document or an Excel spreadsheet. A small icon will be used and it will be automatically applied to each link in the website. This enables our visitors to predict what clicking on a link will do.
The use of PDFs on websites adds difficulties for our visitors:
- PDFs are usually hard to read on mobile devices
- PDFs are usually not created from an original accessible document
- Scanned documents are not accessible due to the lack of selectable text and tagging
We encourage that information that would be found in a PDF be placed on a webpage. Having this information on a webpage is easier to maintain, if any corrections needs to be made. If you MUST have a PDF available for download, PDF documents must follow the WCAG 2.1 AA standards for digital accessibility.
To learn about making an accessible PDF, visit Developing Accessible Documents from UTK.
- WCAG 1.4.5: Departments are encouraged not to use text in graphics. If you must have text in graphics, the text in its entirety must be included in the alt text for that image.
- WCAG 1.4.6: If you must use text in graphics, please use the WebAIM Color Contrast Checker to check the contrast ratio.
- Please do not use orange text or backgrounds in graphics
WCAG 1.2.1: All podcasts that are placed on your department’s website should have a transcript below the podcast itself, embedded on the same webpage as the corresponding podcast. The recommended service for podcasts is Anchor, which is used by the M&C department and offers free hosting of your content and allows for uploading to other platforms such as: Apple Podcasts, Stitcher, PodBean, etc.
WCAG 1.2.2: All videos are to have synchronized captions embedded into the video. Please do not totally depend on the auto-generated captions generated by YouTube – it is not 100% accurate, as YouTube uses artificial intelligence (AI) to generate the captions. Additionally, the transcript should be housed on the same page as the video itself, or the transcript should be used to edit the auto-generated captions generated by YouTube. To learn how to edit captions generated by YouTube, please visit UTK OIT’s Quick Reference on Captioning Videos on YouTube
Third Party Add-Ons/Plugins
All third-party “add-ons” (timelines, hotspot applications, etc.) should be checked by UTIA-ITS to ensure that the service provided is accessible to our website visitors. Additionally, CampusPress fully checks all plug-ins to ensure that they are safe for their users to use.
List of Vetted Third Party Add-Ons/Plugins
Additional Videos to Watch Regarding Accessibility:
Note: All of these are on LinkedIn Learning – you will need to sign in with your UTK NetID and password in order to watch these videos.
- Overview of Voice Recognition Software
- Overview of Screen Magnifiers
- Overview of Screen Readers
- Overview of Hardware Assistive Technology
- Vision Issues
- Hearing Issues
- Mobility & Dexterity Issues
- Cognitive Issues
Below are videos of people actually using screen readers to navigate websites and images and alt text:
Screen readers reading a site:
- https://www.youtube.com/watch?v=pQO4S1t2uiA ( using JAWS)
- https://www.youtube.com/watch?v=dEbl5jvLKGQ ( using JAWS)
- https://www.youtube.com/watch?v=4Op6fNhYwrY (using NVDA)
- https://www.youtube.com/watch?v=CNNDdU64-zY (using NVDA)
Images & Alt Text:
- The A11y Project’s Web Accessibility Checklist
- Anchor (used for podcasts)
- Formidable Forms (used for forms)
- Join Campus Communicators listserv
- Join Web Developer listserv
- LinkedIn Learning (videos on Accessibility)
- Office of Civil Rights Video Series on Digital Accessibility – great video series on digital access.
- Sutori (interactive timeline)
- UTK’s Captioning Videos on YouTube
- UTK’s Developing Accessible Documents training
- UTK’s Website Accessibility Checklist
- WAVE Web Accessibility Tool
- Web Accessibility Toolkit
- WebAIM’s Alternative Text (Alt Text)
- WebAIM’s Auditory Disabilities
- WebAIM’s Cognitive Disabilities
- WebAIM Color Contrast Checker
- WebAIM’s Creating Accessible Documents with Microsoft Word
- WebAIM’s Defining PDF Accessibility
- WebAIM’s Evaluating Cognitive Accessibility
- WebAIM’s Motor Disabilities
- WebAIM’s PowerPoint Accessibility
- WebAIM’s Quick Reference – Testing Web Content for Accessibility
- WebAIM’s Quick Reference – Web Accessibility Principles
- WebAIM’s Seizure Disorders
- WebAIM’s Visual Disabilities
- WebAIM’s Web Accessibility for Designers Checklist
- Web Content Accessibility Guidelines (WCAG)
- WPDrawAttention (hotspots)
Accessibility Learning Path
Below are current blocks used in the UTIA theme that has some accessibility tips with it, or follow the Accessibility Learning Path: