Many of our most common communication mediums have very easy steps to make sure that your content is accessible. When creating any digital content it’s very important to remember that some members of your audience may be accessing your content through the use of a screen reader, which reads your content to the user. Others may be unable to use a mouse, and may be utilizing the keyboard to work through your content. You can make your content accessible to assistive technologies and methods such as these by following some basic steps.
Best Practices by Medium
Emails
Email is a medium where people may be utilizing screen readers to read the content to the person.
Images
While imagery can be a visual addition to an email, it’s important to make sure that images are only used for decorative effect, and do not contain important information. Alternative text ("alt" text) must be provided for any images. If the image is not a link, it should be descriptive of what is in the image. If the image is used as a link, the alternative text should describe where the person will be taken by following the link.
Alternative text is a few word description that is useful to those that cannot see the image, but there are many types of visual impairments where users will not be accessing the alternative text, so informational content should not be placed in images. If you would like to include an image of an event’s flyer, that is OK as long as all of the text in the image is also repeated in the email body as text.
Animated gifs should not be used. If one must be used, it can animate no longer than five seconds. This means it must be set to animate for five seconds or less, and it must be set to not repeat.
Colors
Adding color to an email can add style, but it’s important to make sure there is a high level of contrast between text and its background. Putting black text on a gray background would cause issues for those with certain visual impairments. You can use WebAIM's color contrast checker tool to determine if your color contrast is great enough. This site uses hexadecimal values for colors, and you can use the w3schools' color converter to figure out what your color's hexadecimal equivalent is.
Text
Larger fonts should be used in email to accommodate visually impaired users. Text should be 14 points or higher.
Text should be kept as concise and as easy to read as possible. Large amounts of text can make your content much harder to comprehend.
Do not utilize underlining. Underlining is automatically applied to any links in your content, so adding underlining to regular text can be confusing to users.
Links
Repeated Link Text
It's important that you do not use the same link text for multiple links/buttons that take the user to different places.
Examples
Bad:
Learn How to Make Baskets
Sign Up Now
Learn How to Bake the Best Cookies
Sign Up Now
Good:
Learn How to Bake the Best Cookies
Proper Link Text
You should avoid text such as “click here” or showing full URLs. The text that is linked should be describing where the link will take the user.
Examples
Bad: Click here for more information about how bears sleep.
Bad: Learn more about how bears sleep: http://www.example.com
Good: Learn more about how bears sleep.
If you’re linking to a document, it’s a best practice to indicate the type of document in the link.
Learn more about how bears sleep [pdf].
Documents
The College is moving to minimize use on the website of documents such as PDFs, Word documents, etc., but in cases where the College deems them necessary, documents from Microsoft Office and the Adobe Suite can be made much more accessible by properly following a number of techniques. Properly utilizing headings, and making sure to not include text heavy images, will go a long way. We’ve included a number of resources below to make sure your documents can be accessed by everyone.
Adobe PDF
Please note that scanned documents are not accessible unless they’ve been processed by optical character recognition (OCR) software. A scan of a book or article just puts a large image into the PDF and someone with visual impairments will not be able to access the content.
PDFs can be created from many programs, and a quick test to make sure that your PDF has at least basic accessibility is to try to highlight the text by clicking and dragging over text with your mouse. If you can’t select the text, your document is not accessible in any way.
- WebAIM's PDF Accessibility: Converting Documents to PDF
- Creating Accessible PDF Documents in Adobe Acrobat X
- Creating Accessible PDF Documents in Adobe Acrobat XI
- PDF Conversion in Microsoft Word 2007/2010 Documents
- Adobe Help Create and verify PDF Accessibility (Acrobat Pro DC)
- W3C PDF Techniques for WCAG 2.0
Microsoft Excel
Microsoft PowerPoint
- WebAIM’s PowerPoint Accessibility
- Creating Accessible Microsoft PowerPoint 2011 Presentations (Mac)
- Creating Accessible Microsoft PowerPoint 2013 Presentations (Windows)
- Creating Accessible Microsoft PowerPoint 2007/2010 Presentations
Microsoft Word
Videos
All videos from the College (both public and instructional) must include accurate closed captioning. This allows those with certain impairments to still receive the audio content that they would otherwise miss. It’s important that before starting on any video project that this is factored in to the timing and production of the video.
Please contact the office you work with to post your video content, Jeff Hing in Communications or Service Desk at Information Technology Services, to work through how to best get your video captioned.
The College is currently undertaking steps to develop a workflow for instructional video content to meet accessibility guidelines as well as address the remediation of legacy content.
Web Editors
The College’s website content management systems (CMS) are setup to automate many accessibility enhancements, and the College is always undertaking steps to improve on those methods to reach WCAG 2.1 AA standards.
Even with the processes in place in the CMS, there are things website editors need to do within their own content to make sure their pages are accessible.
General Text
Text should be kept as concise and as easy to read as possible. Large amounts of text can make your content much harder to comprehend.
Do not utilize underlining. Underlining is automatically applied to any links in your content, so adding underlining to regular text can be confusing to users.
Using all capital letters should not be used for sentences or paragraphs. This can make text harder to read for some users.
Colors
It’s important to make sure there is a high level of contrast between text and its background. Colors are predetermined by the Pomona College website stylesheet, so we've already made sure that all of the default text, buttons, etc. use enough contrast. It is possible, though, that you could have an image that has a small amount of text in it. If your image has black text on a gray background it would cause issues for those with certain visual impairments. You can use WebAIM's color contrast checker tool to determine if your color contrast is great enough. This site uses hexadecimal values for colors, and you can use the w3schools' color converter to figure out what your color's hexadecimal equivalent is.
Images
While imagery can be a visual addition to a webpage, it’s important to make sure that images are only used for decorative effect, and do not contain important information. Alternative text ("alt" text) must be provided for any images. If the image is not a link, it should be descriptive of what is in the image. If the image is used as a link, the alternative text should describe where the person will be taken by following the link.
Alternative text is a few word description that is useful to those that cannot see the image, but there are many types of visual impairments where users will not be accessing the alternative text, so informational content should not be placed in images. If you would like to include an image of an event’s flyer, that is OK as long as all of the text in the image is also repeated in the email body as text.
Animated gifs should not be used. If one must be used, it can animate no longer than five seconds. This means it must be set to animate for five seconds or less, and it must be set to not repeat.
Headings
Websites utilize headings to indicate sections within a page. There are six headings that webpages utilize, heading one through six, with heading one being the overarching heading, and the other headings indicating subsections of the main heading.
Our CMSs are setup to use the page’s title as the heading one (and you should never add additional heading ones) but it’s important that any subsections be heading twos, any subsections within heading twos should utilize heading threes, etc. It’s very important that headings be used in proper hierarchy. Below outlines headings with tabs just to illustrate the hierarchy, but on the actual website you would not see the headings indented.
Example
Heading 1
Heading 2
Heading 3
Heading 3
Heading 4
Heading 2
Heading 2
Heading automatically will use the College’s styling, so it’s important to not try to indicate your own headings by utilizing the bold button in the editor. The headings will automatically be the correct size/boldness.
Links
Repeated Link Text
It's important that you do not use the same link text a single page for multiple links/buttons that take the user to different places.
Examples
Bad:
Learn How to Make Baskets
Sign Up Now
Learn How to Bake the Best Cookies
Sign Up Now
Good:
Learn How to Bake the Best Cookies
Proper Link Text
You should avoid text such as “click here” or showing full URLs. The text that is linked should be describing where the link will take the user.
Examples
Bad: Click here for more information about how bears sleep.
Bad: Learn more about how bears sleep: http://www.example.com
Good: Learn more about how bears sleep.
If you’re linking to a document, it’s a best practice to indicate the type of document in the link.
Learn more about how bears sleep [pdf].