How to Make Google Docs Accessible

Be careful how you use Google Docs

Google Drive is great for sharing documents and media, but Google Docs is missing key accessibility functionality. Avoid using Google Docs when Docs with tables and images are especially difficult for users of assistive technologies and co-editing is also a challenge. Whenever possible, offer students a choice of word document applications to use.

Check the following elements and ensure they are accessible

For each item that you have in your document, click on the accessibility guideline(s) that corresponds to it in order to learn how to make the element accessible.

Text

Use a text font that is easy to read

* Ensure your text is readable by using at least 10px san serif fonts, such as Arial, Helvetica or Verdana. These font types will magnify well for those who have low vision.
* If there is an image with text in it, make sure to put the text in the alternative text [OPENS IN NEW WINDOW], so it will be accessible to blind students.

Headings

Use properly formatted headings to structure the page

It isn't enough to make text big and bold to look like headings. They need to be formatted as headings.

  1. Select the text that you want to make into a heading.
  2. Go to the Style menu (Probably says "Normal text").
  3. In the Styles menu, choose the appropriate heading level from the Styles gallery.
Shows the Styles menu.
In addition to formatting headings as headings, the headings need to be used in the correct order. Headings chunk out your content making it easier for everyone to read. Headings are also a major way of navigating with a screen reader.
  1. Heading 1 is like the title of a book and there is just one Heading 1 per page. Heading 2s are like chapter titles. Heading 3s are subsections of those chapters, and so on.
  2. Heading order is also similar to an outline.
  3. Don't skip heading levels. The potential penalty for this transgression is beheading.
    See below for a visual display of a possible heading order:Shows possible header order.

Lists

Format lists as lists

Page formatting (lists, headings, and links), is read aloud to screen reader users, so the content is understood in context. It's important then to properly format lists.
  1. Select the text that you want to make into a list.
  2. From the Format menu, choose Lists and then select Numbered or Bulleted list.Shows Numbered or Bulleted list options in the list styles menu.

Images and Graphics (including Graphs, Maps & Shapes)

Provide alternative text descriptions (ALT text) for images and graphics.

Alternative text descriptions of images (ALT text) allows screen reader users to benefit from the information being conveyed by an image. Unfortunately, not all screen readers are able to read Google Docs' image alt text, so consider adding a caption or description in the page content to ensure all users benefit from the image information.
  1. Select the image.
  2. From the Format menu choose Alt text...
  3. Type in description text in the Description field. (Not in the Title field.)
  4. Click the OK button when done.
See How to Make Complex Complex Images Accessible for images that cannot be adequately described sufficiently in alternative text.

Links

Write meaningful link text that indicates the link’s destination.

Links are a major method of navigating for everyone, but especially screen reader users. If the links are embedded into meaningful text, they are much more useful.
  1. Type out text that describes the destination of the link. Example: Lone Star College
  2. Select the Insert link icon (Ctrl/Cmd + K)
  3. The Link window will open. Type the URL of the webpage in the Link field. For the example above, we would type out, "http://www.lonestar.edu"
  4. Then click the OK button to save the link.
Hyperlink Tips:
  • If you think students will be printing the document and you want them to have the URL, put it in parentheses after the link, but don't hyperlink it.
    • Example:  Lone Star College (www.lonestar.edu).
  • Screen reading software can pull up all of the links in a page to aid the user in navigating the page more quickly. If a link pulled up by the screen reader is some indecipherable URL or ambiguous phrase like, "click here" the screen reader user will not know where that link goes.

Tables

Create data tables with column headers

Designating column or row headers in a table is essential to screen reader users understanding how the information is laid out. Google Docs doesn't allow you to designate column or row headers, so keep your tables small so they are understandable without headers.

Ensure a proper reading order in tables

Screen readers read tables from left to right, top to bottom, one cell at a time (no repeats). If cells are split or merged, the reading order can be thrown off.
To test the reading order of your table, place your cursor in the first cell of the table. Now press the Tab key repeatedly to navigate through the table. This will be the reading order that assistive technologies will use.
Merged, nested, and split cells change the reading order of tables. Make sure you construct your table in a way that accommodates good reading order.

Color

Don't use color alone to convey meaning

Don't use color alone to make a distinction, a comparison or to set something off or apart from the rest of the document. If you categorize something by color alone, those who are color blind or blind will not be able to benefit from the information.

Use sufficient color contrast

Make sure there is enough color contrast between foreground (font) color and background color.
If you print your color graphic on a black and white printer, would it be understandable? Without sufficient color contrast, people who are color blind will not be able to benefit from the information.
How-to Install and Use the Colour Analyzer tool
  1. Download Colour Contrast Analyzer Tool
  2. Open the Colour_Contrast_Analyzer application
  3. Make sure you are in the Result -- Luminosity mode, not the contrast result for color blindness.
  4. Click the Foreground eye dropper tool, hover over and click the foreground color to select it.
  5. Click the Background eye dropper tool, hover over and click the background color.
  6. If you have a 12-pixel font color you are testing for color contrast, you must get a Pass (AA). If you have font larger than that, you must get a Pass (AA) in the Large Text field.
Colour Analyzer Tips:
  • PCC's standards are to reach a pass in the AA standards.
  • Don't worry If you fail the AAA standards, though you might want to consider something with more contrast.

Icon for a video. Video:  How-to Install the Colour Contrast Analyzer

Icon for a video.  Video:  How to use the Colour Contrast Analyzer tool

Math and Science

  • Math and Science equations and formulas cannot be written accessibly in Google Docs.

Additional Resources