Images and non-textual elements Digital Accessibility

Ir a contenido Ir a Estudios, Gobernanza y organización
Logo UA
Realizar búsqueda
Other sites
Logo Digital Accessibility   Digital Accessibility
Digital Accessibility

Images and non-textual elements

Alternative text

All the non-textual elements such as images, graphics, mathematical formulas, text boxes, etc., must have an alternative text that describes the content or what we want to transmit with them, since these elements are not accessible through the support products that people with disabilities use.

We should never leave the descriptions empty. In the case that an element is merely decorative, a blank or a period should be included instead of the descriptive text.



To include the description of an image in Word, we follow these steps:

  1. Click on the right button on the image and select Format picture.  Image drop-down menu - Image Format
  2. The Format Picture panel will appear then, click on the Layout and properties button..

Finally, click on Alternative Text and fill in the Description section.

Panel formato de imagen propiedades y diseño

In cases where we have included a very extensive description, it is advisable to enter a short description in the Title field.

We must introduce a textual alternative to the image, as if we were describing the image to another person, even if it’s a description of what the picture makes us feel.

We must introduce a textual alternative to the image, as if we were describing the image to another person, even if it’s a description of what the picture makes us feel.


Video or audio

You must include an alternative text as in the other non-textual elements, with the right button Shape Format . In addition, we must provide the material in accessible format, that is, with subtitles and audio description in the case of video, and transcription in text in the case of audio.

If you wish, you can delve into accessibility of multimedia documents .


Forms and SmartArt

The forms (or text boxes) and the SmartArt elements (schemes that group several forms) are not accessible and therefore their use is not recommended. Although we could think that we are introducing normal text in the aforementioned elements, the resulting object is an image or a set of images and therefore it is not accessible for people who have vision problems.


In cases where you need to insert a text box, we must follow these steps to provide them with alternative text:

  1. With the right button on the shape we click on Format shape.
  2. In the new window that appears in Format shape, click on Design and layouts.
  3. Click on Alternative Text and write the description of the shape in the description box.

Panel formato de forma texto alternativo

SmartArt Squemes

In the case of SmartArt elements it is advisable to describe the complete scheme instead of describing one by one all the forms that made it up.

Below is a SmartArt scheme on the study process. As we can see it has five shapes: three boxes and two arrows:


Esquema SmartArt del proceso de estudio: Estudiar - exámen - aprobar

In this case, the description for the scheme would be: Scheme on the study process: first box to Study, next box Exam, and next box to Pass.

To include the description of a SmarArt scheme we follow the following steps:

  1. Click on the right button on the complete SmartArt element and select Format Shape.
  2. In the new window that appears in Format Shape, click on Design and layouts .
  3. Click on Alternative Text and write the description of the shape in the description box.

  Panel formato de forma aplicar a esquema SmartArt


Align elements with the text

It is important to point out that non-textual images and elements -like the ones seen in this section- that we can place in the document, dragging and dropping them with the mouse, should be aligned with the rest of the content since otherwise they will be "floating" and they can cover part of the content, in addition to not being accessible for support products used by people with disabilities. To avoid this, we follow these steps:

  1. Click on the image or non-textual element with the right button and select Wrap text.
  2. And we chose the option In line with Text.

Ajustar texto en línea con el texto


Mathematical formulas

Mathematical formulas are quite problematic for people with low vision or blindness, so we must pay special attention to ensure their accessibility.

In general, the mathematical formulas that we incorporate into our documents are included in picture format or through the Word equation editor.

Word Equation Editor

The Microsoft Office suite incorporates an equation editor that allows us to create mathematical formulas visually or through the LaTeX format in a simple way.

To insert a mathematical formula in Word, we follow the following steps:

  1. Select the Insert tab.
  2. We click on Equation. Barra de herramientas insertar ecuación
  3.  An edit box is inserted in the document where we will create the equation we want. For example, an equation to solve the Pythagorean Theorem   Editar ecuación en Word

The formulas created with the Word equation editor are accessible by some screen readers, such as JAWS in Windows, but not in others such as VoiceOver in macOS.

In addition, when we convert our document to PDF, the equations are not converted correctly and are not accessible. So we had to insert a title with the description of the formula. To include a title to an equation, we follow these steps:
  1. We select the equation.
  2. We select the References tab.
  3. In the toolbar, click on Insert caption.
  4. In the window that appears we introduce the caption and the description (with letters) of the equation.
  5. We finish by clicking on OK .


Mathematical formulas as images

In the case that the mathematical formula is included in an image, whether it is a screenshot or created from another application, we must include in its alternative text a description of its content.

In the descriptions of mathematical formulas it is advisable to write the whole equation with letters, to ensure its understanding to people who use support products, especially Braille users.

Following the previous example, the textual description of the equation to solve the Pythagorean Theorem would be: "c is equal to the square root of a raised to two plus b raised to two".


Describir fórmula matemática en imagen

Mathematical and Braille 

People with blindness or low vision, in addition to using a screen reader, use braille display to read what happens on the screen of their computer. The problem arises when these users access mathematical texts with their braille display, since computerized braille is different from the format of the text usually used in a computer.

To solve this problem, we can use the Braille Online Mathematical Editor (open in new window), which transcribes a normal ASCII text to Braille format one and vice versa.

Following the previous equation example, to solve the Pythagorean Theorem in LaTeX we would write:

c = \sqrt(a^2 + b^2)


While the transcription in Braille would be:

c = \sqrt2a^#b + b^#b|

This way, a blind person who uses a braille display could read the text in Braille correctly.

Ejemplo del Editor Matemático Braille Online


Tables    Structure and semantics of a document