Figure per WAI ARIA mit Figcaption verbinden

[NinaG]

Theoretisch sollte eine Unterschrift mittels figcaption automatisch an die figure 'gebunden' sein. Leider können das aber einige Screenreader-Browser-Kombis immer noch nicht.

Deshalb gibt es die Empfehlung, dass man die Unterschrift mittels WAI ARIA-Angaben erweitert. Konkret würde das am Beispiel des ce_image.html5 Templates so aussehen:

ce_image.html5 (von C3.5.18):

<?php $this->extend('block_searchable'); ?>

<?php $this->block('content'); ?>

  <figure<?php if ($this->caption): ?> aria-labelledby="caption_<?= $this->id ?>" role="group" <?php endif; ?>class="image_container"<?php if ($this->margin): ?> style="<?= $this->margin ?>"<?php endif; ?>>

    <?php if ($this->href): ?>
      <a href="<?= $this->href ?>"<?php if ($this->linkTitle): ?> title="<?= $this->linkTitle ?>"<?php endif; ?><?= $this->attributes ?>>
    <?php endif; ?>

    <?php $this->insert('picture_default', $this->picture); ?>

    <?php if ($this->href): ?>
      </a>
    <?php endif; ?>

    <?php if ($this->caption): ?>
      <figcaption class="caption" id="caption_<?= $this->id ?>"><?= $this->caption ?></figcaption>
    <?php endif; ?>

  </figure>

<?php $this->endblock(); ?>

Das habe ich gemacht:

1. Im figure habe ich eine Abfrage ergänzt, ob die Bildunterschrift genutzt wird. Wenn ja, wird mittels arialabelledby eine Verknüpfung auf die ID der Bildunterschrift gesetzt. Als ID habe ich einfach caption_ gefolgt von der ID des Inhaltselements ausgegeben. Somit ist das eine einzigartige ID. Ihr könnt da aber gerne noch eine bessere Version machen, insbesondere wenn die Lösung auch für die Bildergalerie oder im Rahmen von anderen CEs eingesetzt wird. Außerdem habe ich role="group" zugewiesen.
2. Im figcaption habe ich die besagte ID gesetzt.