Print and Digital Accessibility

Accessibility is a core value of the University of Texas at Arlington Libraries. The following should assist Libraries staff in implementing accessibility in print and digital marketing.

  • Font choice makes all the difference in the accessibility of your materials. Sans serif fonts, including Open Sans and Montserrat (the preferred fonts of UTA Libraries), are the easiest for most people to read. Serif, cursive, handwritten/ultra-stylized, and all caps fonts are harder to read and should be avoided or used sparingly.
  • Font size also matters—using at least 14 pt. font for documents and 16 pt. for posters helps to ensure that your text is readable without causing eye strain.
  • Left-justified text is the easiest for most English-language readers, as it ensures that the beginning of each line is visually consistent.
  • It is important to organize your information in a logical hierarchy. Using the Heading styles in the correct order (i.e. H1 followed by H2 then H3) is crucial to ensuring our users can easily navigate our content.
  • Avoid using color as the sole means of communicating important information to avoid excluding users who are colorblind. Including a symbol such as an asterisk along with the color provides a second layer of identification.
  • Avoid laying text on top of images or textured graphics to ensure readability.
  • Graphics must be mindful of color contrast to be read by those with low vision and/or colorblindness. You can either use UTA colors, or use WebAIM to ensure the colors you have selected will provide enough contrast.

Zag Interactive has some additional guidelines for making your print materials ADA accessible if you’d like further reading.

Videos

  • All videos should be captioned with captions uploaded to the social media interfaces when possible.
  • Captions should be transcribed and/or edited by a person (i.e. not auto-generated).
    • Instagram does not have a video captions feature built into its interface, so you will need burn your captions into your video before uploading it to the platform. You can do this with Premiere by uploading the captions into your video file, then adjusting the size and font to make sure the captions are legible on a mobile screen.
  • All videos should also feature audio narration of some kind – videos that are music or silence only are not accessible to blind or low vision users.

Images

  • All images should include alternative text, either in the platform’s alt text field or as an Image Description in the body of the post text.
    • An “alternative text” field used to exist on Facebook, but as of April 2022, this is not available from the post scheduler, so the Image Description in the body of the text has been suggested as a better alternative.
    • An “alternative text” field does exist on Instagram, but it is not optimized for screen readers, and so the Image Description in the body of the text has been suggested as a better alternative.
  • We recommend that digital imagery not have a lot of text – all text that appears in an image must appear in the alt text, and this can pose accessibility problems for those using screen readers; rather, we recommend using a photo or graphic with few words, then include the necessary information in your post text.
  • Just like in print, graphics must be mindful of color contrast to be read by those with low vision and/or colorblindness. You can either use UTA colors, or use WebAIM to ensure the colors you have selected will provide enough contrast.

Other

  • Hashtags should be written in camel case (example: #LibrariesOfInstagram) so screen readers can read them more easily.
  • Emojis should be used sparingly – screen readers will read these out loud (if they are coded properly – big if) every time they appear, so six hearts in a row will be read as “Heart. Heart. Heart. Heart. Heart. Heart.” This can be overwhelming and/or distracting.
  • Descriptive calls-to-action, such as “Check out the Libraries website” or “Visit the Digital Gallery” are really important to helping those using screen readers navigate your content. Conversely, “click here” or “read more” are both considered too generic because they don’t indicate where the link is going or what information the user can expect by following the link.

Resources

UTA’s Web Standards require that all web pages meet WCAG 2.0 AA Standards to make content accessible to a wide range of people with disabilities, including blindness and low vision, deafness and hearing loss, learning disabilities, limited movement, and photosensitivity.

Many accessibility techniques have already been included in the design of the web page templates provided by Marketing and Communications. Content editors, however, must be aware of these techniques as they’re creating and editing their content for web pages and blog posts. Some of the more common accessibility issues include:

  • Images should not contain text, or very little text, and a short text alternative (alt text) describing the image should be provided in your HTML code. This is a required field when uploading images in Drupal.
  • Captions should be provided for videos; transcriptions for audio files; documents should be scanned with optical character recognition and include text alternatives for images within documents.
  • Links should be understandable when read by themselves, for example, “Delivery services are available for faculty,” NOT “For faculty delivery services, click here.”
  • Links with the same text should link to the same content, for example, “Read the article” should NOT be used to link to several different articles.
  • Headings (h1, h2, etc.) should be used in proper order and semantically, meaning headings create an outline for a page with a hierarchy of content.

Resources

Step-By-Step

  1. Download the SiteImprove Chrome Extension. You can find this free extension by Googling “SiteImprove Chrome Extension.”
  2. Create your email in MailChimp. Once you are happy with the design and content, send a Test Email to yourself using the Test Email function.
  3. Open the Test Email. There should be a link at the bottom of the email that reads: View in browser. Click this link.
  4. Once you are on the browser-version of your email, select the SiteImprove Chrome Extension by clicking on the jigsaw piece in the top right corner of your window.
    1. The first time you do this, you will log in with your name, email, and other details. You shouldn’t ever have to do this again.
  5. SiteImprove will provide an analysis of your email on the left side of the screen. Make sure that AAA conformance is selected under the filter at the top before you start working through the Issues.
  6. Address any issues in MailChimp, then reanalyze as needed to ensure the updates resolve the problems.

Main Concerns

Alternative Text on Images

  • Alt Text ensures those who use screen readers can access your content. All images should have alt text, which can be added through the MailChimp interface.
  • Similarly, we try to avoid images that have a lot of text – all of this text will need to appear in the Alt Text, which is an imperfect way to communicate the information to those using screen readers. We recommend using an image with minimal text when possible.

Contrast

  • We want to ensure that the colors we use in our emails has enough contrast to be read by those with low vision and/or colorblindness. You can either use UTA colors, or use WebAIM to ensure the colors you have selected will provide enough contrast.

Hierarchies

  • It is important to organize your information in a logical hierarchy – not only for the visual representation of your content, but also for those who use screen readers. Using the Heading styles in the correct order (i.e. H1 followed by H2 then H3) is crucial to ensuring those using screen readers can easily navigate your content.

Links

  • Links should feature specific text that gives clear indication where the links are going. For example, “click here” or “read more” are both considered too generic because they don’t indicate where the link is going or what information the user can expect by following the link. Instead, consider saying, “Go to the Libraries Website” or “Follow Us on Facebook.”
  • We also want to be careful not to repeat link text in multiple locations for different link destinations. For example, if you are linking to different pages on the Libraries website, but use the text, “Go to the Libraries Website” for all of them, this does not provide clear indication for users where they are actually going by following the link(s). Instead, we suggest being even more specific: “Check out the ILL Page” or “Visit the OER LibGuide.” This will help all users, but especially those using screen readers or other assistive technologies, navigate your emails and easily access your content.