Accessibility in LibraryAware Emails

Reaching readers includes creating materials that are accessible to everyone. Check out these tips for ways to design your emails with accessibility in mind.

Individuals with vision impairment often use screen readers to view email content. Plain text emails don’t have any images, embedded links or rich-text formatting. They’re often faster and easier to read with screen readers.

Emails created in and sent through LibraryAware can be viewed in plain text by subscribers by simply changing their email preferences to plain text as outlined below. This is also a great way to test how your email will look in plain text. Just send an email to yourself and follow these steps. 

Some of your subscribers may have images disabled by default, so we recommend not relying on an image-only email.

To view emails in plain text:

  • Outlook: The steps vary with different versions of Outlook. You’ll find them here.
  • Gmail: Open the email and click Reply. At the bottom right corner, click the down arrow (to the right of the trash can icon) and choose “Plain text mode.” 

  • Yahoo Mail: Click Reply and then click on the “...” button at the bottom of the email. From the menu, click the text format icon and confirm that you want to change to plain text. 

Here are some design tips that will help make your emails more accessible:

  • Include captions under photos using a text box. Keep the description short but meaningful. Ask yourself, if you only had the text and not the photo, would the caption still make sense? To help screen reader devices, keep the text in a line; don’t wrap it around the photo.

  • Want to add a caption that won’t take away from your email design? Here’s a trick. After adding the caption, change the text color to the exact color of the background. To make sure it’s a perfect match, you can use a color picker extension or add-on in your browser to grab the hex code (or hexadecimal format) of the background color. Copy and paste that code into the box next to the hashtag symbol in the text color tool. This is particularly helpful when using a graphic that has text as part of the image; a caption below the image written in the same color as the text box background won’t appear to sighted individuals but screen readers will be able to pick it up.

  • Think high contrast when choosing colors for your text and backgrounds. Test out color combinations with an online contrast analyzer like Contrast Checker

  • Make your call-to-action buttons big enough to tap easily on a mobile device and keep the area around the button clear to reduce the chance that the wrong button will be tapped. 

  • Keep your text at 14 points or larger.

  • Use Alt-Text effectively. In LibraryAware, you can edit an image to add alt text. Here are a few tips for writing alt-text from the American Federation for the Blind.
    • Describe the function of the image. Especially if the image is a link, "Search the Card Catalog" is much more useful than "Photo of a collection of books and other reading materials scattered on a library table."
    • Brief is better. Remember, syllables are time.
    • Put the most essential information first. If it is necessary to use a number of words, use "Acme Logo: Sun rising over white sand dunes" rather than "Sun rising over white sand dunes: Acme Logo."
    • Meaningless graphics need not have meaningful text. If a graphic is being used as a spacer, to push other graphics into position, don't label the thing "Green spacer." Instead, put a space between the quotes of the alt-text so users don't have their train of thought disrupted by such irrelevant information. Use this "non-text" judiciously, though. If you can't think of something to say about an image, that doesn't mean it's meaningless.
    • Maintain the alt-text. If your image map is rearranged so that the last item is now "Contact Us," don't forget to move the alt-text, too. Otherwise, that image will still be labeled as "Site Map" and users will be lost.
    • Alt-text reflects your professionalism just as much as your choice of images. Spell words correctly.

Consider your color blind subscribers:

  • Use fewer colors to minimize confusion for those with color blindness. A color palette of 2-3 colors is best.

  • Use different textures or patterns, instead of color, to show contrast between elements of your design. 

  • Again, make sure to use clearly contrasting colors in your items, so that they can be easily distinguished from one another. In addition to testing your color combinations in an online contrast analyzer like Contrast Checker, try checking an online color blindness simulator like Coblis.

Feedback and Knowledge Base