Digital Accessibility Guide

For Google products, install and use Grackle as an accessibility checker, but remediate any issues you find using Google, not Grackle. While Grackle does provide an interface to correct some issues, changes do not reliably “stick” when the document is opened in an account without Grackle installed.

Note: learners will need to (1) Go to Tools > Accessibility and (2) Tick “Turn on screen reader support” to use a screen reader with Google docs, sheets or slides. Learn more about using screen readers with Google products at Accessibility for Google Docs, Sheets, Slides & Drawings.

For Microsoft products, use Microsoft’s built-in accessibility checker. Important! If you plan to upload your PowerPoint slides into the Google environment, upload them to Google and then run Grackle to address find accessibility issues, fixing those issues in Google Slides. Uploading accessible PowerPoint slides to Google will overwrite the accessibility work you have done in Microsoft.

For Adobe (i.e. PDF) files use Acrobat Pro to create and verify PDF accessibility. If you convert PowerPoint files to .pdf in order to share them with students, follow this workflow for converting accessible PowerPoints to PDFs. If you convert Google docs to .pdf, use the pdf converter within Grackle to maintain full accessibility

For content native to your Moodle course site, use the Brickfield Accessibility+ Toolkit to find and fix errors.

Indicating the language of a document ensures that screen readers will read documents with the correct pronunciation. This is especially important for teaching material in non-English languages or for learners with low vision who speak English as a second language, since screen readers default to a primary language. For example, if a screen reader set to English read a Spanish document, the accent and mispronunciation would be quite confusing. When we document language to Spanish, the screenreader adapts correctly.

For Google Docs, go to File >  Language > select the appropriate language/dialect.

On the other hand, to set the language of a Word Document, select the text, go to Review > Language > Set Proofing Language > select the appropriate language/dialect. While Word may automatically detect languages, it is still important to ensure that the settings match.

An alt text tag provides textual description of an image, figure or graph that is stored in the background and readable by screen-reading software as well as web browsers. An alt text tag should offer a complete, text-based version of all relevant and unique instructional content that is provided in an image. Adding an alt text tag to an images ensures that the instructional content conveyed through the image is perceivable by all. Learn more by watching this Understanding Alternative Text video (5 min 13 sec).

Does it need alt text? Yes, unless your image does not contain any instructional content (is purely decorative), or the content is available else where on the page. If the program allows for marking as decorative, do so. Otherwise, make your alt text very short to keep it from distracting the audience. If you included the content elsewhere, simply identify the image without repeating the content description.

Composing alt text: Consider the intention, context, and purpose of the image. Note that the same image could have very different alt text in different contexts. Don’t include “Image of…” in your alt text. Learn more at this “Alternative Text” article by WebAIM and Writing Better Alt Text from the NC State Libraries.

Is alt text enough? Complex or detailed images and graphs may need a more thorough description than is reasonable for alt text (around 125 characters). In this case, add a link nearby to a full text description that conveys the full meaning of the item.

In Google Docs / Slides: Right click (PC) or CTRL+click (Mac) the image and select “Alt text.” Or, select the image and press “Ctrl+Alt+Y”. If the image is decorative, make the description very short, or just type, “decorative.”

In Moodle: (see screenshot below) Moodle will ask you to mark an image as decorative only, or fill out the “How would you describe this image to someone who cannot see it?” when you upload an image. This description becomes the alt text. If you copy and paste an image directly into the text editor instead of uploading the image, click on the image and then the image icon in the toolbar that appears to open the image properties and add alt text.

The Brickfield Accessibility+ Toolkit provides a wizard that will find images with common alt text issues, including missing alt text, alt text that is a placeholder text like “image,” and alt text that is a file name (e.g. image.jpg). It cannot check the appropriateness of alt text beyond common errors, so it is important to check all images in Moodle manually.

In Microsoft Office products: Right-click on the image and select “View Alt Text” from the menu. Write your alt text in the box on the pane that appears on the right, or check “mark as decorative” if that is appropriate.

Some programs will try to automatically identify and describe your images using AI; it’s a good idea to check all your images manually, as the Microsoft Accessibility Checker cannot check if the alt text is appropriate.

Approach quiz alt text by asking yourself “what would a student who can’t see this image need to know to be able to answer the questions? What would I hope they will notice or recognize in this image?” It might mean that you gives them a few more clues with in the description, but remember that sighted students would have the benefit of several visual clues. Remember that the only students who will “see” your alt text on quiz images will be those students using screenreaders. Sighted students would need to do quite a bit of work to access those descriptions in a testing environment.

DIAGRAM center:

• The Description templates from DIAGRAM center include guidelines specifically for common types of graphs and visualizations, with example images and alt text.
• See also the Image Sample book from DIAGRAM center
• See also POET by DIAGRAM center for suggestions and recommendations for alt text
• Examples include complex diagrams and are very helpful.

AI Descriptions: The paid versions of ChatGPT and Gemini are both able to recognize and describe images that are uploaded. These descriptions need to be reviewed and may require editing, but provide a good starting point.

If text cannot be highlighted and copied/pasted, it is likely an image of text and is not accessible. Pay special attention to PDF’s on this one, as many PDF’s are scans of text. For more information, see the section on accessible PDFs below.

Tables are commonly shared as images rather than text. Recreate a text-based table of the data to replace the image. Learn more in the accessible tables section below. 

Make sure your text color adequately contrasts with its background. Use WebAIM Contrast Checker, Color Contrast Analyzer for Chrome, or Contrast Analyzer for Windows and Mac. On a light background, the text should be at least 4.5 times darker than the background; on a dark background, the text should be at least 4.5 times lighter.

Do not use color alone (either the text or highlighting, etc.) to convey meaning as that meaning will be lost to those with colorblindness or those using screen readers. It’s OK to use color, but convey that meaning or emphasis in another way as well (bold, italics, etc).

Avoid color pairings that are challenging for individuals who are colorblind (red and green, for example). Test graphics for color contrast with Coblis: Color Blind Simulator.

Give hyperlink text a different color from surrounding text. Hyperlink text is usually blue but may be any color that contrasts sufficiently with surrounding colors. Use the same color for all hyperlinks in a given document or web page.

Learn more

• “Accessible Color Use and Color Contrast” from OIT Accessibility.
• University Libraries’ resources for colorblindness

Screen readers cannot tell that simply formatting changes signify a heading, so you must use heading styles. As a bonus, Microsoft Word and Google Docs use heading styles to automatically generate a document outline, which is useful for anyone.

To apply heading styles in Moodle, click “Format” in the editor toolbar, and find “Headings” in the menu to choose your heading (see screenshot below).

Instructions for headings in Microsoft Word and headings in Google Docs

Built-in lists help anyone easily understand better the structure of text. To use lists in Moodle, use either the bulleted or number list buttons (see screenshot below).

Instructions for lists in Microsoft Word and lists in Google Docs

Use simple, easy-to-read typefaces and limit the number used to no more than 2 in a given document/page. Sans serif typefaces (e.g., Arial, Calibri, Verdana, Roboto) are usually safe choices.

In a document, use text size at least 12; in a presentation to be shown live, use a text size at least 24.

Limit font variations (e.g., bold, italics) and strings of words written in all caps, which is particularly difficult to read.

Reduce eye fatigue by breaking up “walls of text” with white space and increasing the spacing between lines to 1.15 or 1.5.

See WebAIM’s Typefaces and Fonts article for more information.

Avoid using text that blinks or moves.

Eliminate distracting grammatical, spelling and syntax errors

Do not using unnecessarily complex language where simpler language will do.

If you use acronyms and jargon, be sure to define them clearly and provide a glossary. Avoid the use of idioms, which are often unique to one culture and do not translate well to other languages.

Don’t underline text that is NOT a hyperlink.

Link descriptive text instead of a URL. URL’s are mean to be read by web browsers, not screen readers or people. They are meaningless and can be quite tedious to hear if using text-to-speech programs. The only time it is important to include a URL is in material that is likely to be used as a printed resource.

Be concise and precise. Can someone scan the page and quickly determine what is linked and where each link will take them? Link text should be just long enough to make it clear where the link will take someone.

Write out email addresses to make it clear that the link is an email address and not a webpage.

Alert users if a hyperlink downloads a file [for example, “Campus Map (PDF, 5.62 MB)”] or if a hyperlink opens in a new browser tab or window [for example: NC State University Homepage (opens in new tab)].

See How to write meaningful link text from the NC State Libraries for more information.