figures, captions and alt text

Wir haben ein Bild von der Eröffnung einer Lidle Filiale als ein "Figure". Die Bildlegende soll heissen “Mayor of Casterbridge opens a new Lidl supermarket”.

Was ist das beste Markup?.

A:

 <figure>
 <img src=blah.png
  alt="A portly gent cuts a ribbon. He is with five small children, and is watched by two middle-aged woman, a very tall smiling man, and a small crowd">
  <figcaption>
  Mayor of Casterbridge opens a new Lidl supermarket.
  </figcaption>
 </figure>

B:

<figure role=img aria-labelledby=lidl>
<img src=blah.png alt="">
 <figcaption id=lidl>
  Mayor of Casterbridge opens a new Lidl supermarket.
 </figcaption>
</figure>

C:

<figure>
<img src=blah.png>
 <figcaption>
 Mayor of Casterbridge opens a new Lidl supermarket.
 </figcaption>
</figure>

D:

<figure>
<img src=blah.png alt="">
 <figcaption>
 <p>Mayor of Casterbridge opens a new Lidl supermarket.</p>
 </figcaption>
</figure>

E:

<figure>
<img src=blah.png alt="Mayor of Casterbridge opens a new Lidl supermarket.">
 <figcaption>
  Mayor of Casterbridge opens a new Lidl supermarket.
</figcaption>
</figure>

Hilfe zur Lösung

• Figure
• Web Accessibility Initiative Accessible Rich Internet Applications : WAI-ARIA Roles
• Kinds of content --> flow content
• alt --> good-practices
• figure and figcaption mit oder ohne alt=""