Infographics

Sometimes you have so much information that you want to display them in a graphic. There are really awesome designers out there who can create beautiful infographics. The problem is that such graphics are only for the sighted. If you have an infographic

1. Don’t forget to add a proper alt attribute
2. Add a text alternative underneath the graphic —
3. Or link to another page where you put the written alternative

It could look something like this:

1771 - Great flood

Due to heavy rainfalls the water of the river Elbe increase drastically. Dykes couldn't withstand the pressure and on 8 July 1771 the dykes breached near Neuengamme. Huge areas of Hamburg's surroundings were flooded. The water reached its peak on 21 July. It stopped straight in front of the gates of Hamburg.

1842 - Great fire of Hamburg

From the 5th to the 8th of May 1842 most of the inner city of Hamburg got destroyed by huge fire. 51 people got killed and 1,700 buildings were destroyed

1943 - Operation Gomorrha

From 24 July to 3 August 1943 the Allies bombed Hamburg several times in a concentrated operation. The attack by the RAF (Royal Air Force) - and later with the help of the US Air Force - created one of the biggest firestorms in World War II. 42,600 people were killed, 37,000 wounded.

1962 - North Sea flood

Because of heavy storms in the night from 16th to 17th February 1962 with peak wind speeds of 200 km/h water got pushed into the German Bight. Dykes could not withstand the pressure. In Hamburg nearly 20,000 people lost their homes, 315 died.

Creating a connection

In this case we're not using the <figcaption> but a <dl> instead. To make it more accessible we've created some sort of connection between image and description by using the aria-describedby.

<figure>
    <img src="example.png" alt="text about infographic" aria-describedby="disaster-text">
</figure>

<dl id="disaster-text" aria-label="extended text alternative for infographic">
    ...
</dl>