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 documents, 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 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.
Types of Digital Documents
When selecting electronic texts to include in your course, keep in mind that some formats are more accessible than others:
HTML pages, or texts contained directly on web pages, tend to be the most accessible kind of electronic document. Here’s an example of an accessible HTML page. Helpful indicators like headings and alt text are built into HTML, making these great alternatives to scanned documents when available. Headings are essential for those using screen readers, since they allow the user to make sense of where they are in a document and navigate accordingly.
HTML pages also have searchable text, meaning text you can highlight or search for. Screen readers function by reading searchable text; they can't read a document without it.
Hint: This guide is an HTML page!
Microsoft Word doc/docx files and other digitally-created documents (files from Pages, Open Office, Google Docs, etc.) are searchable and allow for easy designation of headings, placing them among the more accessible choices.
Check out this guide to adding headings to Word docs, including a video demo at the bottom.
PDFs, or Portable Document Files, can be more or less accessible depending on the document. Born-digital PDFs such as those typically found in library databases tend to be accessible. Scanned PDFs are the least accessible type of electronic text, because they often have contrast issues, illegible fonts, crooked or curved pages, or contain handwriting that can’t be converted to searchable text. Any PDFs you use should be clear and easily readable.
Tips for Improving PDF Accessibility
- The best time to make a PDF accessible is during its creation. See this guide to creating high quality scans.
- 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, be sure to scan it with Optical Character Recognition (OCR) turned on so the text will be searchable. Searchable text can be copied, pasted, selected, etc. To check if a PDF (or any electronic text) has searchable text, try clicking and dragging your mouse across a sentence. If you can select the text, it's searchable. If you can't, the PDF is only an image, and screen reader programs won't be able to read it.
- See Using the Ally tool in Canvas for some quick steps to OCR an existing high-quality scanned document. If Ally can't create an OCRed version, you can also run and correct OCR in Adobe Acrobat Pro DC.
- Always check if the library has a digital version of a document before scanning it. Versions of documents that are created digitally and available in the library tend to be more accessible than scans of physical documents.
Remediating PDFs (making them accessible) is a complex and time-consuming process that includes running and correcting OCR, tagging, and adding metadata. That’s why we recommend finding documents that are already accessible, such as HTML pages, e-books, or Word docs with added heading tags.
If you're curious about the full remediation process, this Adobe Acrobat Pro guide shows you how to run a process that tries to automatically make a PDF accessible (like any other automated tool it's imperfect). It also covers how to run a full accessibility check on your PDF.
What am I Responsible For Regarding PDFs?
Faculty are responsible for providing clear, easily readable PDFs that can be OCRed as outlined in Emerson's accessibility guidelines.
Students can formally request accessibility-related accommodation while a course is running via Student Accessibility Services.
Best Practices for Digital Documents
- Instead of scanning a handwritten text, consider typing it into a Word document or, even better, directly into a Canvas page.
- Instead of scanning an article or book chapter, try searching for an HTML or e-book version on the Iwasaki Library website or via Google Scholar (you can log-in with your Emerson account). Library resources and e-books are more accessible than scans.
- If you must scan a document, try to keep the text as straight, sharp, and well-lit as possible to ensure the highest quality scan. If there’s an option to create a “searchable” or “OCRed” PDF from the scan, do so.
- If you want to share an online article with students (like this one), simply copy-and-paste its link into a Canvas announcement, page, assignment, or discussion. Or, if the article is available via the library, use its permalink. DO NOT save web pages, including online articles, as PDFs and upload them to Canvas. Web pages are HTML pages: they are far more accessible than the PDF you can save them as.
- Instead of including a PowerPoint file (which is not an accessible format) in your course, copy-and-paste your slides' contents into one or more Canvas pages.
Want to know more? Reach out to ITG@emerson.edu!