Accessible Graphics

""Graphics are any non-text based images that you can add to your documents. This includes; pictures, photos, symbols, charts, graphs and even videos. Graphics can make a document more interesting and help to highlight and explain concepts. Including graphics can also support multimodal learners and is an integral part of Universal Design for Learning (UDL). However, for students with some disabilities, graphics can present accessibility problems. Some of these issues include:

  • Students who are blind cannot see the graphics
  • Students with attention or learning disabilities may be confused or distracted by overly colorful or complicated graphics
  • Students with seizure disorders may be affected by blinking or flashing graphics
  • Students who are deaf cannot hear the sound from a video or recording

Things to keep in mind:

The following are some suggestions to help incorporate graphics into your documents while ensuring that they remain accessible to all students.

Alternative Text

All graphic content should have an alternative text equivalent (alt-text) that can be read by a screen reader to help convey the information contained in a graphic to the user.

  • While AI generated alt-text can be very useful as a starting point, it can also be very problematic – it doesn’t know why you included the image or what you want your readers to take away from it. Remember that context is important and you need to review (and edit) AI generated content. 
  • Most programs have options that allow you to include an alt-text description attached to the image that can be used by a screen reader.
  • Alt-text should provide meaningful information in the context of the document so the information you include for a given image may vary depending on how it is being used in that document.
    • Note: In older versions of Word and PowerPoint, there are two boxes. Put your alt-text in the Description Box NOT the Title box .
  • Alt-text should convey the same information as the graphic itself. Do not include additional information as alt-text.
  • Put a period at the end of the alt-text (use proper sentence structure). It will add a pause for the screen reader and make it easier to listen to for the user.
  • Decorative images that do not convey any information or meaning to the user should be marked as decorative – some programs include a “this is decorative” checkbox. If not, you can designate it as decorative by putting (very) short description or “decorative” into the alt-text field.
    • Note: If you are creating a web page or using HTML, you can mark an image by by putting two quotations marks (no spaces) – [“”] in the alt-text field.
  • If you have already described the graphic in the document text – don’t repeat it as alt-text (or the user will have to listen to it twice). If the text is near the graphic, you can mark the graphic as decorative.
  • For additional information about writing appropriate alt-text, read the WebAIM Article: Alternative Text and Alt-Texts the Ultimate Guide

Tips and Tricks

  • Automated accessibility checkers can only tell that there is something in the alt-text field – they cannot judge if it is useful or meaningful information (or just the file name) – always check each graphic yourself to make sure that the information is appropriate and accurate.
  • When writing alt-text, you don’t need to put “picture of” or “image of” into the description – just relevant information about the image itself
  • If an image contains text, that text will often be the best option to put enter as the alt-text

Complex Images

Alt-text should be succinct and concise (rule of thumb is <125-150 characters). However, there are times that an image requires more than a short description to be useful.

  • One option is to put the information in the text itself so that the image becomes a supplemental element to the text. This way, all students get the information and the image supports that information for multi-modal learners.
    • Avoid redundancy – if the information about the image is included in the surrounding text, do not include it again in the alt-text field – only include a short description or mark the image as decorative.
  • Another option is to create a longer description on a separate page with basic information in the alt-text field along with a link to the longer text.
  • Images with a large amount of information such as infographics can be created using tools that let you make them natively accessible (check the help section of the tool). However, if you are using a pre-existing infographic or the tool does not have accessibility options, there are a number of ways to ensure that the information is available for all. You can create a transcript of the text and relevant descriptions then: 
    • Hide the text under the infographic,
    • Add the full text below the infographic, or
    • Post the transcript in a separate document and add a link directly before or after the infographic.
  • For Charts and Graphs, include a short general description in the alt-text field then, either:
    • include a data table with the same information in line with the graphic or,
    • create a detailed narrative and link it to a long description page or appendix within the document.
  • For Math Equations and Formulas, there are programs such as MathML designed specifically to create mathematical expressions that can be read by screen readers.
  • The Diagram Center has an excellent resource: Image Description Guidelines that you can use as a reference guide. 

Graphic Placement

Microsoft Word does not handle text wrap very well – screen readers read information in the order it encounters it, this means that if a graphic is anchored in the middle of text, or you use text wrapping, the reader may read the alt-text it in the middle of a sentence (confusing) or may not read it at all (yikes!).

  • When placing graphics that provide important information in Microsoft Word, use the program’s built in tools to place the graphic “In line with text.” This means that text will be above and below the image but not on the same line.
  • If you use wrap text for a graphic (instead of in-line) and convert the document to Adobe PDF, you can go in and add the proper alt-text tag to the document using the accessibility tools in Adobe Professional DC (but not the standard Adobe Reader).

Captioning and Audio Descriptions

Videos and recordings are a great way to demonstrate concepts and help reinforce learning. However, students who are deaf cannot hear the information being communicated and students who are blind cannot see the actions shown. Captions can also greatly enhance the learning experience for many students. Studies have shown that using captions can help students to better understand and retain information. They can also be invaluable for ESOL students and those working in environments where sound cannot be used (noisy environments or where quiet is needed – e.g. a library or studying with sleeping children).

  • Professional Captions must be provided if you have a student in your course with an accomodation – auto-captions do not qualify as compliant.
  • At minimum, transcripts of videos and recordings should be provided. However, trying to follow a transcript while watching a video is difficult and does not provide an equitable student experience.
  • Captioning videos is by far the best option for supporting students who are deaf or hard of hearing (and many others).
  • When looking for videos, look for videos that have already been captioned. Chemeketa online and the Library are working with faculty to create and curate a collection of captioned videos.
  • Audio descriptions can be added as an additional track to describe action for students who are blind. This is still an emerging issue and not as commonly available as captioning – work with Student Accessibility Services for face to face classes and the Center for Academic Innovation for online courses to provide support for students who require it.

Tips and Tricks

  • Captions help many users, not only does it benefit students who are deaf, it also helps students for whom English is a second language, multi-modal learners, and students on old equipment or in places where they can’t have sound (e.g. the library).
  • Whenever possible, include a transcript along with a captioned recording or video, it provides an additional learning support and allows all students to easily review and find information when studying for a test or brushing up on notes.
  • YouTube and other programs have options for automated captioning. These are a start but require quite a bit of cleaning as they often get things very wrong. For a great example (and a bit of a laugh) watch Caption Fail:Jamaican Vacation Hoax.
  • When looking for videos in YouTube, you can search for captioned videos and filtering by Subtitles/CC
  • To turn on captions, look for the box with a CC along the bottom right of the video – click on the square to toggle them on or off.
  • Always watch the full video and check the captioning to make sure that it is accurate and complete.
  • While not appropriate for accomodation needs, you can add auto-captions to your recorded Zoom meetings  and to media in Kaltura using Kaltura Reach.

Animations and Movement

Animations and movement can be useful to show processes or actions but should be used with care.

  • For students who are blind, follow the rules for alt-text and complex images.
  • For students who have learning or cognitive disabilities, animations can be distracting or difficult to follow. If using an animation, choose ones that will allow the student to control the speed or turn off the movement as they need to.
  • Blinking or flashing graphics can affect users with seizure disorders such as epilepsy – it is best to avoid if at all possible. If it is absolutely necessary to use a flashing graphic, be sure include a warning, as well as an option to turn off the animation, well before the flashing starts so that those that need to can take the necessary actions to protect themselves.

Choosing Graphics

Graphics are an important part of creating interesting and useful documents. They enhance learning and allow for different learning styles. Choosing the right graphics is important for the usability and accessibility of a document.

  • Get the right size graphic – using a small graphic and making it bigger can result in pixelization which makes it difficult for users with low vision or cognitive disabilities to see and understand.
  • Flashing, moving or overly colorful and elaborate graphics can be distracting or confusing for users with learning or cognitive disabilities.
  • Be mindful of the graphics that you choose – do they actually convey the information that you want your students to learn – and is that message clear? If not, you may want to find a graphic that is closer to your goal.
  • Use decorative graphics in moderation. While everyone wants to give their documents some style, overuse can actually harm your aesthetic and creates barriers for students who are blind or have cognitive disabilities.
  • Don’t use Adobe Flash. Materials created in Flash are not accessible and Flash itself has been discontinued by Adobe. Also, most web browsers no longer support Flash files. If you have existing materials that use Flash, please consider moving that information to a newer, more accessible format.

Guides

TechnologyAccessibility ResourcesAccessible Graphics