Aria Label Generation
Image Accessibility (ALT vs aria-label)
September 22, 2025
Samantha Monty
Chair for Human-Computer Interaction, University of Würzburg

Diffrent type of images :




An ALT text (used by screen readers) :

  • It is an alternative text which is shown if the image can’t load.


A TITLE (shown on hover) :

  • It can be Title of the image shown as a tooltip on hover.


An aria-label (for accessibility) :

  • aria-label is an accessibility attribute that provides a text label to assistive technologies like screen readers.


Type 1

  • Has ALT, TITLE, and aria-label
include/06-metal.png
some text as an ALT

Source code :

![some text as an ALT](include/06-metal.png "TITLE"){aria-label="ARIA"}

Type 2

  • Has ALT and TITLE
include/06-metal.png
some text as an ALT

Source code :

![some text as an ALT](include/06-metal.png "TITLE")

Type 3

  • Has ALT and aria-label
include/06-metal.png
some text as an ALT

Source code :

![some text as an ALT](include/06-metal.png){aria-label="ARIA"}

Type 4

  • Only has ALT
include/06-metal.png
some text as an ALT

Source code :

![some text as an ALT](include/06-metal.png)

Type 5

  • These images do not include any ALT text, and may rely only on an aria-label or nothing at all
include/06-metal.png

Source code :

1- ![](include/06-metal.png "TITLE"){aria-label="ARIA"}
2- ![](include/06-metal.png "TITLE")
3- ![](include/06-metal.png){aria-label="ARIA"}
4- ![](include/06-metal.png)