Skip to main content

Web Accessibility

20 Images and Graphs

Missing or Improper Alt Text

Some advices to write great alternative text:

Repeating Link Text in Alt Text

A common mistake is to repeat in the alt attribute the same text of a close link. If two links to the same target, one with an image and one with a text, are very close, then it's better to write an empty alt attribute.

We can find an example of this error in Fotoklik:

<ol class="grid-row">
<li class="item">
	<div class="category-entry">
		<a href=""	title="Biuro"
		class="product-image"><img src="" width="120" alt="Biuro"/></a>
		<h5><a href="" title="Biuro">Biuro</a></h5>

<li class="item">
	<div class="category-entry">
		<a href="" title="Monitory"
		class="product-image"><img src="" width="120" alt="Monitory"/></a>
		<h5><a href="" title="Monitory">Monitory</a></h5>

<li class="item">
	<div class="category-entry">
		<a href="" title="Foto"
		class="product-image"><img src="" width="120" alt="Foto"/></a>
		<h5><a href="" title="Foto">Foto</a></h5>

<li class="item">
	<div class="category-entry">
		<a href="" title="Audio-Video"
		class="product-image"><img src="" width="120" alt="Audio-Video"/></a>
		<h5><a href="" title="Audio-Video">Audio-Video</a></h5>

Screenshot of Fotoklik with images

Screenshot of Fotoklik without images


Longdesc is an add-on for Mozilla Firefox that adds "View Image Longdesc: ..." to the image context menu.

Example: longdesc

<!DOCTYPE html>
<meta charset="utf-8" />
<title>Longdesc Example</title>
<img src="screenreadersused.png" alt="Changes in screen reader usage over time" longdesc="" />

Example of using Longdesc add-on for Mozilla Firefox