Home > Make It Accessible

Make It Accessible

Accessibility

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:

“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:

  1. CMS Tools: We are using WordPress as our new content management system, or CMS. 
  2. Link Descriptive Text: How can content owners help visitors that use screen readers understand the context of a hyperlink?
  3. Image Alt Texts: How can we ensure that our visitors with vision issues know what an image contains?
  4. Color: How can we make the use of colors on a webpage easier for our visitors to see the content?
  5. 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?

CMS Tools

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. This is a great article by Daniel Göransson on Alt-texts: The Ultimate Guide. Arizona State has created an Alt Text Generator where one can upload a photo and the generator will provide alt text of the image.

Color

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. 

External Links

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.

PDFs

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.

Graphics

  • 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

Podcasts

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.

Videos

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.

Screen Readers

Below are videos of people actually using screen readers to navigate websites and images and alt text:

Screen readers reading a site:

Images & Alt Text: 

Resources

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:

WordPress Blocks

Kadence Blocks

UTIA Custom Blocks

  • UTIA WP Guide
  • 2640 Morgan Circle Drive
  • Knoxville, TN 37996
  • P: 865-974-6545