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鈥檚 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鈥檚 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鈥檚 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.
Full-width "banner" style images should also not be used, as they will often stop emails from properly resizing when on smaller screens. This can make text tiny, and require pinching and zooming to be able to read the text.
Colors
Adding color to an email can add style, but it鈥檚 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 to determine if your color contrast is great enough. This site uses hexadecimal values for colors, and you can use the 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 on non-link text. 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
Learn How to Bake the Best Cookies
Good:
Proper Link Text
You should avoid text such as 鈥渃lick here鈥 or showing full URLs. The text that is linked should be describing where the link will take the user.
Examples
Bad: for more information about how bears sleep.
Bad: Learn more about how bears sleep:
Good: Learn more about .
If you鈥檙e linking to a document, it鈥檚 a best practice to indicate the type of document in the link.
Learn more about .
Documents
The College has minimized 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鈥檝e 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鈥檝e been processed by optical character recognition (OCR) software, and have been human verified to be correctly recognized. 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鈥檛 select the text, your document is not accessible in any way.
Microsoft Excel
Microsoft PowerPoint
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.
Live videos can use automated captioning, but an on-demand version cannot be made available until human created/verified captions are included.
Important information cannot be solely included in the visuals of a video. If closing your eyes during the video would cause a loss of important information, the video will not meet accessibility requirements.
It鈥檚 important that before starting on any video project that these issues are 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.
Web Editors
The College鈥檚 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 on non-link text. 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鈥檚 important to make sure there is a high level of contrast between text and its background. Colors are predetermined by the 麻豆传媒 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 to determine if your color contrast is great enough. This site uses hexadecimal values for colors, and you can use the to figure out what your color's hexadecimal equivalent is.
Images
While imagery can be a visual addition to a webpage, it鈥檚 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鈥檚 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鈥檚 title as the heading one (and you should never add additional heading ones) but it鈥檚 important that any subsections be heading twos, any subsections within heading twos should utilize heading threes, etc. It鈥檚 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鈥檚 styling, so it鈥檚 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
Learn How to Bake the Best Cookies
Good:
Proper Link Text
You should avoid text such as 鈥渃lick here鈥 or showing full URLs. The text that is linked should be describing where the link will take the user.
Examples
Bad: for more information about how bears sleep.
Bad: Learn more about how bears sleep:
Good: Learn more about .
If you鈥檙e linking to a document, it鈥檚 a best practice to indicate the type of document in the link.
Learn more about .