Barrierefreie Implementierungsmuster für Kartenkomponenten | Topics

Kartenkomponenten werden häufig in Artikellisten und ähnlichen Layouts verwendet. Obwohl das Design einfach wirkt, gibt es bei Berücksichtigung von Barrierefreiheit überraschend viele tiefgreifende Designherausforderungen.

Betrachten wir ein typisches Kartenformat mit den folgenden Elementen von oben nach unten:

Bild
Artikeltitel
Artikel-Zusammenfassung
Link zu Details

– und überprüfen wir Implementierungsmuster für dieses vertikale Layout.

Wichtigste Designüberlegungen

1. Visuelle Reihenfolge und HTML-Struktur

Screenreader lesen den HTML-Code grundsätzlich in der Reihenfolge der Markup-Struktur vor. Die Erfolgskriterien 1.3.2 (Aussagekräftige Reihenfolge, Stufe A) der WCAG 2.0 sehen vor, dass die visuelle Reihenfolge mit der HTML-Reihenfolge übereinstimmen sollte.

Es ist jedoch nicht grundsätzlich ein WCAG-Verstoß, wenn man mit CSS die Reihenfolge ändert. Solange Inhalte verständlich bleiben, auch wenn die visuelle Reihenfolge von der HTML-Reihenfolge abweicht, ist dies kein Problem. Es ist wichtig, je nach Situation flexibel zu urteilen.

2. Umgang mit Bildern

Bilder auf Artikelkarten sind in vielen Fällen dekorativ. Wenn ein Artikeltitel vorhanden ist, ist der Inhalt bereits ausreichend vermittelt, daher ist es weniger notwendig, eine Bildbeschreibung vorzulesen.

Wenn das Bild als dekorativ behandelt wird, ist alt="" ausreichend.

<img src="thumbnail.jpg" alt="">

3. Beschriftung von Detaillinks

Allgemeine Texte wie "Weitere Informationen" sollten aus folgenden Gründen vermieden werden:

Visuelles Problem

Ohne Kontext ist nicht erkennbar, worauf sich der Link bezieht

Screenreader-Problem

Wenn die Linklisten-Funktion verwendet wird, werden alle Einträge mit „Weitere Details anzeigen" angezeigt und können nicht unterschieden werden

Probleme mit der Spracherkennung

Wenn mehrere identische Texte vorhanden sind, ist eine Auswahl nach Nummern erforderlich, was den Betrieb kompliziert macht.

Idealerweise sollte der Text wie „Weitere Details zu ○○ anzeigen" sein, sodass der Zweck allein durch den Link verständlich ist. Hier behandeln wir jedoch die Implementierungsmethode für den Fall, dass das Design „Weitere Details anzeigen" genau so reproduziert werden soll.

4. Klickbarer Bereich der Karte

Um die UX zu verbessern, ist es häufig wünschenswert, eine ganze Karte anklickbar zu machen. Es gibt mehrere Implementierungsmethoden, aber jede hat unterschiedliche Auswirkungen auf die Accessibility.

5. Soll die Karte ein article oder ein div sein?

Das hängt von der Art des Inhalts ab.

Fälle, in denen geeignet ist:

Der Karteninhalt funktioniert als eigenständiger Inhalt

Wenn ausreicht:

Funktioniert als einfache Gruppe von Links
Die Karte hat keine semantische Unabhängigkeit

Bei typischen Blog-Listen oder Produktlisten sind -Elemente angemessen. Wenn Sie jedoch mehrere -Elemente verwenden, wird empfohlen, jede Überschrift mit aria-labelledby oder aria-label identifizierbar zu machen, um die Landmark-Navigation in Screenreadern zu berücksichtigen (WCAG 2.4.6, Level AA).

Bei Verwendung von aria-labelledby achten Sie darauf, dass die IDs eindeutige Werte sind.

Visuelle Reihenfolge und HTML-Struktur

Muster 1: Visuelle und HTML-Reihenfolge stimmen überein

<article class="article-card" aria-labelledby="article-title">
  <img src="thumbnail.jpg" alt="">
  <h3 id="article-title"><a href="#" class="card-link">記事タイトル</a></h3>
  <p>記事の概要...</p>
  <a href="#" class="card-detail-link">
	  <span class="visually-hidden">記事タイトル:</span>詳細を見る
  </a>
</article>

Da die HTML-Reihenfolge vollständig mit der visuellen Reihenfolge übereinstimmt, ist es einfach und intuitiv.

Hinweis: Das erste Element in sollte idealerweise eine Überschrift sein, ist aber nicht zwingend erforderlich. Wenn die visuelle Reihenfolge Priorität hat, funktioniert dieses Muster problemlos.

Zusätzliches:

Spracherkennungssoftware (Dragon, Voice Control etc.) arbeitet auf der Grundlage von auf dem Bildschirm angezeigtem Text. Durch die Verwendung von visually-hidden (sr-only) wird der visuelle Text beibehalten und die Bedienung durch Spracherkennung wird möglich. Im Folgenden sind Implementierungsbeispiele für OK- und NG-Muster bei der Entsprechung von Link-Labels dargestellt.

<!-- 以下は可視テキストがアクセシブルな名前に含まれているのでOK -->
<a href="#" id="link-text" class="card-detail-link" aria-labelledby="link-text article-title">
  詳細を見る
</a>
<a href="#" aria-label="詳細を見る：記事タイトル">
  詳細を見る
</a>
<!-- 以下は可視テキストがアクセシブルな名前に含まれていないのでNG -->
<a href="#" class="card-detail-link" aria-labelledby="article-title">
  詳細を見る
</a>
<a href="#" class="card-detail-link" aria-label="記事タイトル">
  詳細を見る
</a>

Muster 2: Visuelle Reihenfolge mit CSS order anpassen

<article class="article-card" aria-labelledby="article-title">
  <h3 id="article-title"><a href="#">記事タイトル</a></h3>
  <p>記事の概要...</p>
  <a href="#" class="card-detail-link">
	  <span class="visually-hidden">記事タイトル:</span>詳細を見る
  </a>
  <img src="thumbnail.jpg" alt="">
</article>

.article-card {
  display: flex;
  flex-direction: column;
}

.article-card img {
  order: -1;
}

Da das erste Element von eine Überschrift ist, ist dies semantisch eine wünschenswertere Struktur.

Bei dekorativen Bildern ((alt="")) gibt es keine Auswirkungen auf die Lesereihenfolge (Bilder werden übersprungen).

Hinweis:

Falls das Bild bedeutungsvoll ist und ein alt-Attribut angegeben hat, ist diese Struktur nicht geeignet, da sich die visuelle Reihenfolge und die Lesereihenfolge unterscheiden
Die Tab-Reihenfolge der Tastatur folgt der HTML-Reihenfolge. Falls sich mehrere fokussierbare Elemente in der Karte befinden, überprüfen Sie, dass die Fokusreihenfolge den logischen Fluss nicht unterbricht.

Wenn der gesamte Kartenbereich anklickbar sein soll

Muster 3: Gesamte Karte mit Pseudo-Element anklickbar machen

Bei dieser Methode wird die gesamte Karte durch das Pseudo-Element des Titellinks abgedeckt, und "Weitere Details anzeigen" wird als visuelle Dekoration in einem dargestellt.

"Weitere Informationen" sollte nicht als mit tabindex=\"-1\" oder aria-hidden=\"true\" bleiben, da dies zu Störungen in der Linkliste von Screenreadern und im Element-Navigationsmodus führt. Es ist besser, es als zu implementieren.

<article class="article-card" aria-labelledby="article-title">
  <img src="thumbnail.jpg" alt="">
  <h3 id="article-title"><a href="#" class="card-link">記事タイトル</a></h3>
  <p>記事の概要...</p>
  <span class="card-detail-link">詳細を見る</span>
</article>

.article-card {
  position: relative;
}

.card-link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.card-link:focus-visible {
  outline: none;
}

.card-link:focus-visible::after {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* カード内に複数のリンクがある場合の例 */
.article-card a:not(.card-link) {
  position: relative;
  z-index: 2;
}

Vorteile:

Semantische Struktur beibehalten können
Natürlich vorlesen durch Bildschirmlesegeräte
Mehrere Links können in einer Karte platziert werden (Kategorie-, Tag-, Autor-Links usw.)

Nachteile:

z-index-Verwaltung erforderlich (jedoch kein Problem, wenn einmal eingestellt)

Muster 4: Die gesamte Karte mit umschließen

Bei dieser Methode wird die gesamte Karte zu einem Link, daher wird „Details anzeigen" natürlich zu .

<article class="article-card" aria-labelledby="article-title">
  <a href="#" class="card-link">
    <img src="thumbnail.jpg" alt="">
    <h3 id="article-title">記事タイトル</h3>
    <p>記事の概要...</p>
    <span class="card-detail-link">詳細を見る</span>
  </a>
</article>

Vorteile:

Einfache Implementierung
CSS-Anpassungen sind einfach

Nachteile:

Bei einigen Screenreadern kann der gesamte Text hintereinander vorgelesen werden (besonders bei VoiceOver wird es zu "Artikeltitel Artikelzusammenfassung ... Weitere Details anzeigen Link")
Mehrere Links können nicht in einer Karte platziert werden

Beispiele für verschiedene Muster

Fazit

Es gibt mehrere Ansätze zur Implementierung barrierefreier Kartenkomponenten. Das Wichtigste ist zu verstehen, dass es kein einziges Implementierungsmuster gibt und die optimale Lösung je nach Situation unterschiedlich ist.

Bei der Implementierung ist es wichtig, auf Folgendes zu achten.

Wählen Sie eine Implementierung, die für die tatsächlichen Benutzer problematisch ist
Berücksichtigen Sie die Bedeutung des Bildes, den Zweck der Karte und die Gesamtstruktur der Website
Priorisieren Sie praktische und wartbare Implementierungen