Screenshot of Vital website displaying 3+1=4 Number line with Haptic layer

Vital: Creating Accessible Digital Images

Educators can now create their own accessible images using this the Vital software!

Vital is a tool that enables students with visual impairments to actively interact with digital images through auditory, haptic and text-to-speech. As 21st century classroom transition to paperless classrooms, educators and textbook publishers are challenged to produce accessible digital educational graphics. Teachers of the Visually Impaired (TVIs) are experts on how to create and teach tactile graphics. But, how can TVIs create accessible graphics in digital formats? Vital is working on ways to address this issue by offering software that enables educators to “mark up” a digital image to include text-to-speech, haptics (vibrations) and sounds (sonification) allowing students to explore and interact with the digital graphic.

(See post on Vital: Exploring Accessible Digital Graphics)

For example, educators, imagine your blind student dragging his finger along a digital number line to find a specific point. How is this possible? Vital number lines are “sonified” meaning the line is marked so that as the student drags his finger down the line, a sound is heard. If the student’s finger moves off the line, the sound stops. Lines can also be marked with “haptics” or vibrations. Different lines can be marked with a variety of tones and/or haptics. Haptic options include different pulses (steady vibration, slow pulsing vibration, long-short vibration pattern, etc.).

The video below demonstrates Vital’s example Number Line.

Now, imagine taking an image from a worksheet (print or digital format) and creating an accessible, interactive image using Vital software!

Creating Your Own Accessible Image


Vital provided an initial introduction and training via a video call. This was helpful to build an idea of how the interactive images work on a tablet and an overview of how the Vital mark up software works. I did glean an idea of the big picture, but was not quite ready to begin using the Vital tool myself. Interacting with the images was self-explanatory and easy! Marking up my own images was a initially more challenging. After the video call, Corinne also sent written documents that helped me set up and manage my ‘classroom’ and to work through the process of learning the mark up tools. I also referred back to a Vital tutorial video on how to create an accessible chart. When I emailed questions, Corrine was quick to respond and Vital quickly handled a couple of unexpected bugs in the software. After exploring the example images, I provided feedback from a TVI’s perspective and the Vital team immediately implemented changes. The Vital team provided wonderful support throughout the process!

Note: Using sonification and haptics to make these images accessible is an exciting and wide open area. It is such a new concept, that standards – on how to mark up images and how to teach these images to students who are visually impaired – have not yet been developed. Like all cutting-edge technology, it takes time to apply how this tech can be used in the classroom and to develop standards.

The video below – created by Vital – demonstrates how to create an accessible bar chart in 3 minutes. (Note: The video is auditory only and is not accessible. The Vital software tool is not accessible for educators who are visually impaired, as the educator must visually outline areas to be marked up.)

So, just how easy is it to mark up your own image?

Note: I am sharing my personal experiences and opinions about using the Vital software.

Learning Curve

There is an initial learning curve on how to mark up an image – what should be marked and how should it be marked? Vital provided a variety of examples of interactive images which gave me ideas on how an image could/should be marked up. I decided to expand the example number line to creating a number line to teach a simple addition problem, 3 + 1 = 4, as I have been brainstorming this very issue with a group of TVIs.  My initial challenge was trying to figure out what should be marked, how it should be marked, and if any modifications were needed to the initial number line. Vital enables me to add Audio (sonification/sounds), haptics (vibrations accompanied with a soft humming sound) and text-to-speech.

Note: The Vital app is currently only available for Android-based tablets; although, Vital is working on an iOS version. Keep in mind that iPads do not have the haptic (vibration) feature. Below is the original number line equation.

Original Number line with text,

This image is more complex than Vital’s number line image with the plain number line with three points. After trying several variations of adding sounds, haptics, etc. I came to the conclusion that the curved arrows are not easy to use. Vital’s mark up tools work well for straight lines, boxes, and circles; a curved line is more challenging to create – although it is possible to hand-draw a curved line. However, students with visual impairments had a hard time following the curved line (especially the smaller curved line) and the curved line did not provide the necessary information. The curved lines should provide how many spaces are jumped – jumping three tick marks and then jumping one more tick mark, landing on the number 4. Two boxes were drawn directly above the number line corresponding with the numbered line: the number “3” text-to-speech was added to the first box and the number “1” to the second box.

The image below shows the original 3+1=4 image with the annotated bars representing the jumps three and one.

Screenshot of 3+1=4 number line with the annotated yellow bar (representing 3 jumps) and pink bar (representing 1 jump) above the number line.

Students should already be familiar with the general layout of a number line – a number line runs in a straight line left to right with tick marks on the line that represent the location of each number on the line, a number is located below each tick mark, and above the number line are curved lines indicating the number of jumps (in this case, the first jump is 3 and the second jump is 1). Keep in mind the format of traditional tactile braille number lines – students drag their finger down from the tick mark to read the braille number. The accessible digital number line should mirror the traditional tactile number line and should mirror the print number line used in mainstream textbooks and assessments.

I tried various scenarios of adding sonification to the number line (like Vital’s example number line), the tick marks announcing the corresponding number, etc. In my opinion, it was very confusing to have the tick marks announced as numbers when you are trying to count and add numbers. Example: When on the “three” tick mark, hearing the “3” while trying to remember how many tick marks to jump and then counting as I dragged my finger to the next tick mark (and hearing that tick mark announced as a number) was very confusing. However, counting the haptic tick marks (without the numbers being announced) was easy. After counting the desired tick marks, I could drag my finger down to hear the actual number that I landed on. Once I understood the number line layout, keeping the interactive number line as simple as possible made it easier to use complete the math activity.

The video below demonstrates the interactive 3 + 1 = 4 number line that I created. Again, accessible digital number line equations are a new idea and standards have not yet been created. As TVIs and students begin exploring interactive images, feedback is needed before standards can be developed. What are YOUR thoughts about how number lines used to teach addition concepts should be formatted?

Vital Website

The Vital mark up tool is a website; the website is accessed via a PC or Mac computer. Students currently access the interactive images on an Android-based tablet. From the website, the teacher sets up an account, creates her course(s) and manages her students. Also from the website, the teacher creates her interactive images. The screenshot below is of the Manage page showing a list of Diane’s Courses expanded, two folders (Number Line and Clock), with the “3+1” image highlighted (and a thumbnail image of 3+1 on the right side), along with Example Courses and Unassigned.

Screenshot of Vital website displaying the Manage Screen with Diane's courses expanded, Example Courses and Unassigned.

Creating an Interactive Image

An image can be uploaded into an existing course (+ Add Coursework button) or create a new course and add the image. Once the image is uploaded, the image appears taking up most of the screen, with a small tool bar above the image and more mark up options to the left of the images. There are three main options (Audio, Haptic and Text) with various tools under each option; these three options are the interactive ‘layers’.  The Vital mark up tool is similar to other other apps that allow you to annotating or mark an image; the Vital software has the additional features of adding audio and haptics! When you select one of the three layers (Audio, Haptic or Text), only that layer is shown on the image and only the tools for that layer is available. Example: The image below displays the options under Haptic. The tan circle indicates what has been marked on the image. (In this example of the number line image, the tick marks are highlighted in tan, indicating that each tick mark will have a constant vibration.) The tan tick marks appear on the Haptic page of the website to indicate that these areas have been marked as constant vibration. If I had marked another area on the page to have haptics, that marked area would also appear as a color when the Haptic button is selected. I have the choice of 5 different haptic vibration patterns (constant vibration, slow vibration pattern, etc.) When I select another button, such as Audio, the haptic layer will disappear and only the areas that have been marked as audio will be displayed in color.

Screenshot of Vital website with 3+1=4 number line and Haptic layer is selected.

There are many features including the ability to duplicate lines, clear all the mark ups in that layer, automatically capture the text on the page, etc.


The ability to make accessible, interactive digital images has made a giant step forward with the Vital software. Vital’s mark up tool is the first tool that enables classroom teachers and TVIs to create their own accessible images. This is cutting-edge software being applied in a wide-open arena for accessible educational materials. The possibilities are unlimited! There is a need for a core group of TVIs and students to provide feedback to improve the technology, to begin building standards, and to develop students’ tech skills to take advantage of the technology. It will take time to build up a following of TVIs and students before mainstream textbook publishers and assessment groups can adapt this type of technology.


With the help from the written directions and Vital tutorial videos, marking the image is not too difficult to learn. It would be helpful if the buttons were labeled with text, as some of the images were not immediately apparent. Personally, I knew I was looking for the “Fill” button, but did not realize that the button symbol was a paint brush roller. (In the image above, see the symbol in the third row, first column.) It would be helpful if I could hover my mouse over the button to see the text. It will also be helpful if the written directions were accompanied by images.

I would also like to see a “Template” feature where the basic marked up image could be saved, duplicated and added to. Example: I would like my basic marked up number line saved. Then the ability to duplicate it so that I could create various math equations without having to go back and recreate the basic number line. Another example is the clock face. I would like to mark up the basic clock face, save it and use the template to add various hand positions depicting different times.

Eventually, I would like to be able to embed images (or link to images) in other documents, such as a Word document/Google Docs or a form, such as a Google Forms quiz. This would enable a teacher to embed the image into a story or into an assignment. Example: The number line math equation could be embedded into a math worksheet with multiple choice or fill in the blank questions. Currently, Vital images are only available to students within the Vital app.

As more students and teachers use interactive images for educational purposes, standards can be developed about how to create various types of images as well as how to teach these images. Students should receive the same type of images in their daily homework assignments, textbooks and high stakes assessments.

Read more about Vital:

By Diane Brauner

Young child using a braille display paired with a tablet.

Writing with a braille display: Lists part 3

Woman surrounded by and linked to images of files, documents computer, setting gears, etc. symbolizing learning management system.

Using Blackboard Ally with low vision

Image of a student working on a computer displaying a geometry assignment with a triangle and angles.

Digital math: Help us build math best practices!