Screenshot of Thermometers on Vital app with text

Vital: Exploring Accessible Digital Graphics

Have you tried these accessible digital images?

Vital is a combination of an accessible app that enables students with visual impairments to actively interact with digital images and a website where educators can mark up their own images to make these images accessible. Vital images can include various haptics (vibrations), sonification (audio sounds) and text-to-speech. This post will take a look at some of the example images that the Vital team has created to give educators a ‘feel’ of the possibilities!

As our classrooms transition to paperless classrooms, app developers, textbook publishers, and teachers of the visually impaired (TVIs) struggle with how to make digital images accessible for students with visual impairments. While some images can successfully be described with alt text, students often need hands-on exploration to understand spatial relationships, size, and other details. A student should have the opportunity to interact directly with the image and to interact with only what he wants. Let’s face it, an alt text description of a scatter plot with 200 points will put anyone to sleep!

The Process

Any image can be used and transformed into an accessible digital image. Educators can take an image found on line, from a printed worksheet or book, or can create their own image. Once an image is chosen, it is uploaded into the Vital software tool to be ‘marked up’. The Vital tool is basically an super-charged annotation tool, allowing the educator to add specific sounds, haptics and text-to-speech to the image. The educator can organize images by creating courses (with various students) and folders within each course. Once the image is marked up, the teacher can send it to the student’s device – currently a Samsung tablet. The student open the Vital app, selects the desired image and interacts with the image.

Note: Vital is currently working on an iPad version of Vital; however, iPads do not have the haptic option.

Example Images

Vital has created four categories of examples: Geography, Line Profiles, Math and Science. There are multiple examples under each category. 

These images are examples to demonstrate various ways that YOU – the educator – can be mark up your own images, according to what is being taught in the lesson and what works best for your student. You may have different ideas of how to mark up the image! This cutting edge technology is being applied in a new way and is recently available to TVIs and students with visual impairments. While TVIs are experts on how to create tactile graphics and standards for tactile graphics have been researched and are in place, accessible digital graphics are so new that research and standards have not yet been developed. Students are just now being introduced to haptics and sonification applied to educational materials.

The possibilities are endless – what would YOU create with Vital?

Lines Image

Under the Example Course > Line Profiles folder are examples of lines demonstrating audio (different sounds), sonfication (different sounds with pitches change as you drag across the line), and haptics (different vibration patterns). This is a great place to start, as you can drag your finger along the lines and learn to differentiate between the various lines. Teach your student how to follow a digital line from the left side to the right side of the page by following the sound or haptic. If the student’s finger moves above or below the line, the sound/haptic will stop. Following a digital line will be an important tech skill – the lines images and the number line image (below) provide great opportunities to practice following digital lines.

Teacher Hint: Have the student spread his finger and his thumb apart. (Similar to the pinch out gesture.) The thumb follows the physical bottom edge of the tablet, while his finger follows the horizontal line. The tactile guide will help the student move his finger in a straight line.

Number Line Image

The video below demonstrates an accessible number line. Number lines are a foundational math concept; number lines are introduced in preschool/kindergarten, used to teaching addition, subtraction, negative numbers, fractions, etc. and the concepts are expanded in higher math courses. Traditionally, a braille student uses a tactile number line. Best practice is to continue to introduce new concepts using traditional tactile materials and then pair the tactile material with the digital resource, before transitioning to digital-only materials.

Note: Students will initially need to learn how to use haptics and sonification. 

Thermometer Image

The Thermometer image has three thermometers. The student drags his finger up the line thermometer, hearing the sonified line (indicated the filled portion of the thermometer) and the major tick marks are announced. Students can drag from the bottom to the top of thermometer to hear the range. However, the exact number of the filled thermometer is not available; only the major tick marks are announced. Students with vision can provide the exact number. Each thermometer has been assigned a different tone and the pitches increase as the student drags his finger up. The range of the pitch mirrors the height of the filled portion of the thermometer – providing the student a quick “glimpse” through sound about which thermometer indicates higher temperatures.

Bar Chart Image

The Bar Chart example is a standard bar chart with a title, x and y axes labeled, and two bars (soy and corn) compared for each year. The bars have audio, indicating which bar is soy and which is corn. This Bar Chart – unlike the thermometer image – has been marked to give the exact numbers, not the closest tick mark. The title of the bar chart should include what the image is – in this case, “bar chart”.

Note: The audio in the key is currently not paired with the audio of the soy and corn barns.

Pie Chart Image

The pie chart has been marked up several different ways; again, there is not one way to make this pie chart accessible! In the original pie chart mark up, the student had to use the key to determine which colored section of the chart represented which sport. The initial mark up had audio representing each color and the key was used to match the sections to the sport. However, students who use their vision can quickly glance at the chart and determine the main pieces of information, such as which sport is the most popular based on the largest colorful section. However, a student who is visually impaired, would have to carefully explore the entire pie chart, remember the percentages and then check the key to find the answer. The pie chart was marked the second time to include the text (sport and percentage) in the pie chart and the audio was removed from the sections of the pie, making the chart as simple as possible while still providing the information. Note: The key is still available in visually, but is not marked for text-to-speech or for audio/haptics.

Teacher Hint: If the goal of the activity is to learn how to use a key, the second mark up (which is shown in the video below), does not provide the answers. However, if the goal is to understand or work with the data contained in the chart, the second version of the pie chart is the best.

Animal Cell Image

The Animal Cell image is a colorful drawing of the various parts of an animal cell. Each part is labeled in print (print is outside of the cell with a line drawn to the correlating image inside the cell) and the visual shape of each part is marked with text-to-speech, so that when the student drags his finger across the image, the image parts are announced. While this type of labeling enables the student to understand the spatial relationship between various parts of the animal cell, the actual shape, size, and color of the parts is not defined in an accessible manner. If the student was given  a similar picture and asked to identify and label the parts, he would not be able to do so with the information given. This type of diagram is currently conveyed better as a tactile image. 

Compass Rose Image

The Compass Rose is a drawing that has been marked up with text-to-speech for the cardinal directions and the center of the rose. Various haptic lines have been added from the center to the main NSEW directions as well as the NE, SE, SW, and NW points. The actual perimeter of the circle is not marked. The perimeter is typically not a major component – again, it might depend on the goal of the activity. In the first version of the marked up Compass Rose, all the circles in the diagram were marked, making it challenging to understand the diagram. Typically, simple is best – as long as the information required for the goal of the activity is included.

Maps Images

There are two map images included in the Example Course. The first map displays the regions of the US and the second displays the state of Arkansas.

The regions of the US visually show the outline of each state. The regions are differentiated by colors and the name of each region is printed on top of each region. The regions were marked up with different haptic vibrations and the region labels were marked with text-to-speech. However, the individual state outlines are not accessible. If the goal of the activity is to identify what region a specific state is in, this version of the map does not provide that information in an accessible format.

The current version of the Arkansas map has two rivers marked up (Arkansas River running through Arkansas and the Mississippi River running along the eastern border); however, the major lakes and cities in Arkansas – which are available in print – are not announced. The surrounding states are announced. This map can only be used to identify the two rivers and the names of the surrounding states. The image also needs a title. The state name is not announced! If the goal is to learn which states surround Arkansas (and where these states are located in relationship to Arkansas), I would suggest using a map that did not include lakes and cities. If the cities and lakes are important, then they should have been marked up to be announced. If the shape of the state is important, a haptic line could also be included. For students who are visually impaired, the shape of the state would be better conveyed with a tactile diagram.  The Mississippi River has been marked with haptics.


While digital accessibility standards have not yet been developed, there are a few key things that should be considered when marking an  image:


As an educator working with students who are visually impaired, I am thrilled to see a solution for accessible digital graphics! The icing on the cake is having access to a tool that enables educators to create their own accessible graphics, as digital material are readily available but are not in an accessible format. Educators may use the same graphic to teach a variety of objectives; Vital enables educators the ability to create an accessible graphic marked up exactly as needed. Vital is working on ways for educators to be able to share their accessible graphics through a teacher-created accessible graphics depository. 

There is an initial learning curve for students to transition from traditional tactile graphics to accessible digital graphics. Accessible graphics can range from complicated higher math to simple preschool concepts. Ideally, students will be introduced to digital graphics at an early age, in tandem with tactile graphics. Educators can use simple graphics to introduce preschoolers/kindergarten students to basic concepts using Vital enhanced images. Teaching a young student the concept of short and long, over and under? Create a quick accessible image of a short line and a long line or a circle over a square.

Accessible digital graphics – using combinations of haptics, audio, sonification and text-to-speech on touch screen tablets – is cutting edge tech and so exciting! Students and educators need to learn about and use accessible digital graphics before textbook publishers and assessment groups will incorporate these graphics into their products. As a community, educators can share experiences and work together to build best practices about accessible digital graphic layouts so that standards can eventually be put into place.

There is still work to be done in the area of accessible digital graphics; the potential of this tool and the impact these digital images is unlimited!

Read more about Vital: 



By Diane Brauner

Math worksheet with three order of operations equations including 4 x 3 - 6.

Digitally accessible math worksheets

Desmos logo with text

Exploring Math with Desmos: Getting Started

2 Screenshots of Elon Campus: One is a visual map (Google Maps) and & the other is a non-visual map made from Google Maps data.

How to Create Accessible Digital Maps Using SAS Graphics Accelerator and Google Maps