5 Google Accessibility Tips for Visuals

on

5 Google Accessibility Tips: Visuals


Education and accessibility go hand in hand- you cannot truly provide a proper education all students without guaranteeing that all students can make full use of materials, digital tools, and resources. As mentioned in an earlier post (linked), accessibility benefits everyone, not just people with disabilities.


Visuals are a powerful way to help improve the accessibility of resources and provide more options for representation. Our brains process visual information at an incredibly high speed- 60,000 times faster than text! In addition, roughly 90% of the information transmitted to the brain is visual. Visuals are helpful for more than speed, however. Studies show that visuals significantly improve retention, especially retention of new information. In a study conducted by Ruth Colvin Clark and Richard E. Mayer, accompanying text-based instruction with graphics helped improve students' performance on a test by a median amount of 89%. A different study showed that participants retained over 65% of visual information after three days whereas only 10-20% of text-based information was retained over the same 3-day period. In terms of Universal Design for Learning, incorporating visuals can help provide options for representation, improving perception, understanding across languages, and comprehension. Accompanying visuals with text can help break down communication barriers as well, especially for learners who may rely on images as a mode of communication.


Clearly, visuals can be powerful tools for improving learning. However, when creating digital content, it is important to include visuals to make content more accessible, but to also make sure the visual content included is accessible, as studies have shown that while visuals can be powerful tools for improving learning, visual content can also be powerful tools for deterring learning if they are difficult to understand, distracting, or inaccessible to those with visual disabilities. Providing accessible resources, however, does not necessarily mean hours more work or more cost. Many tried, and true educational technology companies continue to expand features that incorporate assistive technologies and accessibility resources. As mentioned in an earlier post, there are features within Chrome, G-Suite, and Google that can be used to improve the accessibility of digital resources. Check out the tips, videos, and tools below and be sure to stay tuned for our next blog post as part of our accessibility series.

1. Images and Icons

It is no secret that images can be powerful ways to communicate information-after all, a picture is worth a thousand words. In terms of accessibility, however, images are powerful for communicating information in another modality to better reach more students. Visuals provide another means of representation for learners to understand concepts in addition to text. Images included in texts can help students as they struggle with difficult words, new vocabulary, or a new language. Plus, visuals are proven to boost retention and develop higher-order thinking skills. For students who process information primarily through visuals, including visuals creates an opportunity to be part of the learning experience rather than excluded. Similarly, including visuals provides a voice for nonverbal students who may rely on images to communicate.


  • Insert Images in G-Suite Tools: Images can be easily incorporated into G-Suite tools through the "insert" menu. Select "Insert", "Image", and select where you would like to add the image from: Drive, Google Photos, Device, or Google Image Search.

  • Insert Icons: Icons can also help support learners and create a more inclusive environment. When showing students instructions or steps in a lesson, include icons to represent "tasks" or "actions" in the instructions. Icons can be added through the "Insert" , "Images" button or can be added through many G-Suite add-ons. Add-ons in G-Suite are tools that work within specific apps in Google, such as add-ons for Slides, add-ons for Docs, etc. Three add-ons with hundreds of icons available are:

Inserting images and icons tutorial video:


2. Image Descriptions (Alt Text and Captions)


Adding visuals to accompany text is a great way to help provide options for representation of material, but it is also important that images provided also are accessible to all, such as anyone with low vision or those who use screen readers. Image descriptions can help support learners as a text support in place of visuals. Image descriptions can be in the form of image alt text or captions near an image. Alt text is a written description that appears in place of an image on a webpage if the image fails to load. More importantly, alt text helps provide text for screen readers to read aloud, which benefits anyone using screen readers, students with low vision, and students with cognitive disabilities. If alt text cannot be added to an image, adding a caption next to the image in a textbox can serve the purpose of image alt text. By incorporating alt text to images, all viewers are able to understand all of the content on the page, including images. 


  • Add Alt Text in G-Suite Tools:Alt text can be easily added to images in Docs, Slides, Forms, Sheets, and Sites by either of the following methods:
      • Right click the image and select "Alt Text" from the options menu.
      • Select an image (click it) and use the keyboard shortcut CTRL+ALT+Y
    • An Alt Text window will appear where you can add a description of the image.
When adding the alt text description, only include important, clear details. There is no need to add the words "picture of" or "image of". Include a few specific details that helps the audience get an idea of the image's content without typing paragraphs of text. Generally, alt text descriptions should be less than 125 characters. 
Cubs baseball player Javier Baez batting from home plate at Wrigley Field

For example, for the image above, an good example of alt text would be: "Cubs baseball player Javier Baez batting from home plate at Wrigley Field" versus a poor example of image alt text would be: "baseball player hitting a ball in a ball park". For more detailed guidance, consider checking out WebAIM's guidance on alt text.


3. High Contrast

When background colors and text colors are too much alike or also too bright, they can be hard for some students to read. Being aware of the colors in your instructional materials can help. In addition, there are tools for Chrome and chromebooks to provide users with the opportunity to toggle the color contrast on their screens for themselves: 

  • Color Enhancer: This extension for Chrome browser allows the user to identify colors that might be difficult to see, and then removes those colors from websites.

  • High Contrast: Add High Contrast, an extension for Google Chrome browser, and you can alter the colors on any website to suit your needs.

  • Chromebook Accessibility Settings: When using a chromebook, you can alter color contrast settings through the "accessibility" menu at the bottom right corner of the screen. 

  • WebAIM Contrast Checker: You can also check the color contrast of digital content you create-such as slides, documents, sites, etc.-by running your color schemes through WebAIM's Color Contrast accessibility checker.  

4. Zoom


Providing students with resources where they are able to manipulate the view by zooming in and out can help boost engagement and sustain motivation when learning. Students can use features in Chrome so that all web pages are automatically enlarged (zoomed in) or students can use the zoom features within G-Suite productivity tools themselves. When providing students materials-such as PDFs-be sure the zoom settings on the materials are not locked, so that students can toggle their view of the document as they see fit. For full page zoom in Google Chrome, view the tips or keyboard shortcuts below:

  • Zoom Settings in Chrome Menu: Select the 3-dot chrome settings button in the top right corner and use the - and + buttons shown to toggle the zoom settings.

  • Keyboard Shortcuts:
    • CTRL  +       : Increase zoom level
    • CTRL  -        : Decrease zoom level
    • CTRL 0        : Set zoom level to default level

  • Zoom Settings in G-Suite Tools (Docs, Slides, Sheets, etc): Select the "View" button from the top toolbar, click "zoom", and toggle the zoom settings. Keyboard shortcuts are: ALT +  to zoom in, and ALT - to zoom out.


5. Adjust Font Size and Style


Learners may struggle to read small text. Any resource with adjustable font size is more accessible. Within Google Chrome browser, you can adjust the font style, size, and language. In addition, there are many extensions that can be added to Google Chrome to modify various font properties:

  • Configure Chrome browser settings:

  • Open Dyslexic: Open Dyslexic is a free extension for Google Chrome that turns text on websites into a font that may be more ideal for some symptoms of dyslexia. While Open Dyslexic is not a one-size-fits-all solution for all forms of dyslexia, it could be a helpful resource to provide to some students.

  • Mercury Reader: Mercury Reader is a free extension for Google Chrome that turns off distracting ads on websites and news articles as well as modifies font size, font style, color contrast, and background color.

Video tutorial for adjusting font sizes and styles:



Want to view all of the videos in this post together? Check out the YouTube playlist below.

Have an idea you would like to share? We would like to hear your ideas! 

Submit the survey or via the "Contact" tab.
Fresh BCSC tech logo with an open laptop with a lemon shown on the laptop screen




Location: Indiana, USA

Comments

  1. Tom MullaneyJuly 11, 2020 at 12:21 PM

    Hi Brenny, thank you for writing this. Very useful for teachers!

    ReplyDelete

Post a Comment