The staff at Emerson works very hard to ensure our college is inclusive. One area in which we can all do better is being mindful of how we communicate online. There are guidelines that help ensure documents, emails, and webpages are accessible. Proper formatting and descriptive language help people with visual or motor impairments navigate content online using a screen-reader. If you're curious, here is an example of how screen-readers work.
To build accessible content online, please follow our guidelines.
Use formatting for headers
Headers allow a sighted person to scan text, gather some basic information at a glance, and perhaps skip to a specific section. Headers also make this same type of behavior possible with a screen reader. Without them, a screen reader would just read an entire text from beginning to end without any organization mechanism. The key is that your text doesn’t just look like a header but is actually coded as a header. If you simply adjust the font size and make things bold, this does not mean anything to a screen reader. It might look like a header to a sighted reader but it will be recognized as just regular text. In HTML code, a header tag looks something like this:
<h1>This is the header</h1>
To designate headers in a Google Document (for example), simply highlight the text and select an appropriate header from the drop-down menu in the Rich Content Editor:
Keep your headers in numerical order
Headers need to go in sequentially nested order starting with Header 1. For example, you shouldn't just skip from Header 1 to Header 4, even though Google Docs and Word will allow you to do this. Think of your headers as the outline of your content: they help organize how your concepts fit together.
H1 should only be used once. If your article or page has a title, it will automatically be tagged as H1 and the next title in your article should be H2. You can, however, have multiple H2s in your article.
You may be tempted to choose headers based on appearance. Don’t! Once you have the appropriate format selected, you can then play with the options to change the font size or make it bold, underlined, or italicized. Just make sure that the format of the text is Header and not Paragraph.
Include Alt Text for images
Images can provide helpful information to your audience. For those who cannot view the images, it’s important to provide some alternative text (or Alt Text) so that they do not miss important information.
For example, if I am making an event page about an upcoming discussion of Claude Monet's work and I'm including an image of his famous painting: "Stacks of Wheat," I will write something like, "A picture of Monet's 1891 painting Stacks of Wheat, depicting two stacks of wheat in autumn."
In Microsoft Word click on the image and then in the main menu, select Format > Picture:
In the side menu, click on Layout & Properties and select Alt Text. You will then be able to enter a title and a description for the image.
Note: In newer versions of Microsoft Word, after selecting the image click the Picture Format tab. In the Picture Format pane, click Alt Text to open the description box. It does not offer the option for a title.
In Google Docs you can enter Alt text by right-clicking on the image and selecting Alt text...
In many Rich Content Editors, you can enter Alt text by clicking on the image with your mouse and then clicking on the Image icon in the toolbar.
For additional information on how to write good Alt text, check out the Alternative Text section on the WebAIM website. If you are using an image for decorative purposes, you can include blank quotation marks (
"") in place of Alt text. This will tell the screen reader to skip over the image.
Image use in emails/text in pictures
Please be mindful of how you use images in emails and webpages. A picture of an event invitation, for example, is not accessible because screen readers don't have access to the text inside that picture.
A screen reader will not be able to read this information:
If you choose to write your invitation over an image, please reiterate all the information above or below the image in plain text, like this:
You are invited to a Picnic Celebration
Location: Southside Park, 555 Central Drive, San Francisco, CA
Date: Saturday, July 5th, 3PM
Please RSVP by June 20th to email@example.com
If you want to upload a beautifully formatted poster to a web page or attach it to an email without reiterating the text, please recreate that image in HTML. If you're emailing it you can make an HTML email through Mailchimp or Constant Contact.
For your reference, here's a general policy guide on sending mass emails.
Use descriptive language for hyperlinks
When a screen reader hits a hyperlink, it states that the text is a hyperlink and then reads the name of the link. It’s always best for the visible text of the hyperlink to be descriptive rather than the exact web address.
For example, if I wanted to reference ITG’s website, I would write it the following way: the Instructional Technology Group’s website (instead of http://www.emerson.edu/itg or "To get to the ITG Blog click here").
"Click here" is not helpful to someone using a screen-reader, and no user ever wants to listen to a screen-reader spelling out a URL to an article without knowing where that URL redirects to.
Also, if the link ever broke, your audience would have more contextual information to work off of should they need to find the website on their own. Check out WebAIM’s section on Links and Hypertext for additional information.
Another type of formatting option that you might use is the bulleted or numbered list. These options appear as follows in the Google Docs Rich Text Editor:
Please use these formats when it makes sense. Perhaps you weren’t thinking of your text as a list, but if you’re describing a series of steps or perhaps have a list of definitions or names, why not make it appear as a list? It’s going to make your text look more organized visually and will provide another way for a screen-reader to make sense of your text.
Go easy with colors and graphics
Color might not make a difference to a screen-reader but for someone with limited vision, color contrast is important. You are going to get the best contrast using black text on a white background. You should also avoid associating the color of text with meaning since your audience may be color blind. Finally, definitely stay away from any gifs or videos that may be seizure-inducing.
A quick note on PDFs
If you built an accessible Word document, don't let all your hard work go to waste when you export it as a PDF. You can save your document as an accessible PDF in Office.
If you plan to scan a document as a PDF and share it online, please be aware that that document will have to go through a remediation process. The first step is to scan it with Optical Character Recognition enabled. You will then have to properly tag the document in Adobe Acrobat and add the descriptive language.
A quick note on closed captions
Captions are text versions of the spoken word presented within multimedia. Captions allow the content of web audio and video to be accessible to those who do not have access to audio. Though captioning is primarily intended for those who cannot hear the audio, it has also been found to help those who may not be fluent in the language in which the audio is presented, those for whom the language spoken is not their primary language, etc.
If you upload your videos to Panopto, Panopto will generate automatic closed captions. They are not ADA compliant because their automatic captions are at about a 60% accuracy rate. You can go over them and fix them or contract a 3rd party to produce high quality closed captions. Here's a guide on generating and editing automatic captions in Panopto. Here's a guide on editing automatic closed captions in YouTube.
Interested in learning more about accessibility? Check out the following LinkedIn Learning resources: