Entfessle mein unzugänglich gekennzeichnetes Herz

Suzy Naschansky vom HTMHell Adventskalender

<h2 id="article1-heading">All About Dragons</h2>  
<p>I like dragons. Blah blah blah blah blah.</p>  
<p>
  <a id="article1-read-more" aria-labelledby="article1-read-more article1-heading">Read more</a>  
</p>  

Sehen Sie das Attribut aria-labelledby? Es verknüpft zwei IDs aus dem Markup, eine für die Überschrift (#article1-heading) und eine für den Link (#article1-read-more). Was dort passiert, ist, dass ein Screenreader die vorhandene semantische Bezeichnung zwischen den Link-Tags ersetzt und den Inhalt beider Elemente verwendet und sie als eine einzige Textzeichenkette zusammen ansagt.

Read more All About Dragons

Ich schäme mich immer, wenn ich feststelle, dass es etwas gibt, von dem ich denke, dass ich es wissen sollte, aber nicht tue. Das ist definitiv einer dieser Fälle und ich bin Suzy unglaublich dankbar, dass sie es geteilt hat.

Ich war tatsächlich erst kürzlich in einer Situation, in der ich das hätte tun können hätte tun sollen. Ich versuche immer, eine Menge "Weiterlesen"-Links auf derselben Seite zu vermeiden, aber es ist schwierig, verschiedene Varianten desselben Dings zu finden, wenn man mit einer Schleife von 15 Beiträgen arbeitet (obwohl es Ressourcen zur Hilfe gibt). Und wenn wir Labels aus ästhetischen Gründen kurz halten müssen – Designanforderungen und so weiter – ist es noch herausfordernder. Das Attribut aria-labelledby gibt mir genau das, was ich will: konsistente visuelle Labels und kontextbezogenere Ansagen für assistive Technologien.

Und das ist nur möglich, wenn der Text, den Sie für das zugängliche Label verwenden möchten, bereits auf der Seite vorhanden ist. Andernfalls sollten Sie aria-label verwenden, mit der Einschränkung, dass es sich ausschließlich um interaktive Elemente handelt, die Dinge nicht mit semantischem HTML zugänglich kennzeichnen können.

Wenn Sie in einem CMS wie WordPress (was ich tue) arbeiten, müssen Sie möglicherweise etwas zusätzliche Arbeit leisten. Zum Beispiel, wenn ich einen Button-Block auf die Seite lege, das sind die Optionen, mit denen ich arbeiten kann

Einige nette Optionen, aber nichts, was mit zugänglicher Kennzeichnung zu tun hat. Wenn Sie sich fragen, was sich im erweiterten Panel verbirgt

Stattdessen müssen Sie den Button im HTML-Modus bearbeiten

Aber bevor Sie das tun, müssen Sie der Überschrift, die Sie verwenden möchten, eine ID hinzufügen. Der Überschriften-Block hat die gleiche Einstellung im erweiterten Panel zum Hinzufügen eines Ankers, der eine ID in das Element einfügt.

Dann können Sie den Button-Block im HTML-Modus bearbeiten und die ID accessible-labels sowie eine ID für den Button selbst hinzufügen. Dies ist ein Beispiel für das bearbeitete Markup

<div class="wp-block-buttons">
  <!-- wp:button -->
  <div class="wp-block-button">
    <a id="read-more-button" aria-labelledby="read-more-button heading-accessible-labels" class="wp-block-button__link wp-element-button" href="https://webaim.org/projects/million/">
      Read Report
    </a>
  </div>
  <!-- /wp:button -->
</div>

Großartig! Aber WordPress ist einfach nicht so cool damit.

Sie können versuchen, das Problem zu lösen

Seufz. Der Button-Block muss in einen benutzerdefinierten HTML-Block umgewandelt werden. Das untergräbt irgendwie die gesamte visuelle Bearbeitung, bei der WordPress so gut ist. Ich habe eine sehr schnelle Suche nach einem Plugin durchgeführt, das vielleicht ARIA-Labeling-Optionen für bestimmte Blöcke hinzufügt, bin aber nicht fündig geworden. Es scheint eine reife Gelegenheit zu sein, eines zu erstellen oder PRs für die Blöcke einzureichen, die diese Optionen nutzen könnten.