Topics

Kartenförmige Komponenten werden häufig in Artikellisten usw. verwendet. Obwohl sie einfach aussehen, gibt es überraschend tiefgreifende Designprobleme, wenn man die Barrierefreiheit betrachtet.

Eine typische Karte von oben

• Bild
• Artikelüberschrift
• Artikelzusammenfassung
• Weitere Details finden Sie hier.

Betrachten wir ein Implementierungsmuster für ein vertikales Layout.

Wichtige Punkte, die beim Design zu beachten sind

1. Visuelle Ordnung und HTML-Struktur

Bildschirmleseprogramme lesen HTML im Allgemeinen in der Reihenfolge, in der es geschrieben ist.Erfolgskriterium 1.3.2 (Sinnvolle Sequenz, Stufe A)Also,Das Grundprinzip besteht darin, die visuelle Reihenfolge an die HTML-Reihenfolge anzupassen.Das ist es, was wir sagen.

Die Änderung der CSS-Reihenfolge verstößt an sich nicht gegen die WCAG-Richtlinien. Solange der Inhalt verständlich ist, ist es unproblematisch, wenn die visuelle und die HTML-Reihenfolge voneinander abweichen. Wichtig ist Flexibilität und situationsgerechte Entscheidungen.

2. Umgang mit Bildern

Bilder auf Artikelkarten sind oftdekorativDer Titel des Artikels reicht aus, um den Inhalt zu vermitteln, daher ist es kaum nötig, die Bildbeschreibung vorzulesen.

Wenn es als dekoratives Bild behandelt wirdalt=""ist ausreichend.

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

3. Linkbezeichnung „Details“

Allgemeine Formulierungen wie „Mehr erfahren“ sollten aus folgenden Gründen vermieden werden:

Visuelle Probleme

Ohne den umgebenden Kontext ist es schwer zu erkennen, was ein Link ist.

Probleme mit Bildschirmleseprogrammen

Bei der Anzeige in einer Liste mithilfe der Linklistenfunktion sind alle Links mit „Details anzeigen“ beschriftet und nicht unterscheidbar (WCAG 2.4.4 Link Purpose, Level A).

Probleme mit der Spracherkennung

Wenn mehrere identische Texte vorhanden sind, müssen Sie diese anhand ihrer Nummer auswählen, was den Vorgang kompliziert macht.

Idealerweise sollte der Link einen Text enthalten, der seinen Zweck bereits aus dem Link selbst klar macht, wie zum Beispiel „Details zu XX ansehen“. Hier zeigen wir Ihnen jedoch, wie Sie dies umsetzen können, wenn Sie das Design „Details ansehen“ exakt nachbilden möchten.

4. Klickbare Bereiche der Karten

Aus UX-Gründen ist es oft wünschenswert, die gesamte Karte klickbar zu machen. Dies lässt sich auf verschiedene Weise erreichen, wobei sich die Auswirkungen auf die Barrierefreiheit jeweils unterschiedlich auswirken.

5. Sollten Karten Artikel oder Divs sein?

Die Wahl hängt von der Art des Inhalts ab.

<article>Geeignet, wenn:

• Der Karteninhalt stellt einen eigenständigen Inhalt dar.

<div>Wenn das in Ordnung ist:

• Es fungiert lediglich als eine Gruppe von Links
• Die Karten selbst besitzen keine semantische Unabhängigkeit.

Für allgemeine Blogbeitragslisten oder Produktlistenkarten,<article>Jedoch mehrere<article>Bitte berücksichtigen Sie bei der Verwendung die Landmarkenbewegung des Bildschirmlesers.aria-labelledbyoderaria-labelEs wird empfohlen, zur Kennzeichnung jedes Artikels ein CSS3-Tag zu verwenden (WCAG 2.4.6, Level AA).

aria-labelledbyWenn Sie dies verwenden, stellen Sie sicher, dass die ID ein eindeutiger Wert ist.

Visuelle Ordnung und HTML-Struktur

Muster 1: Visuelle Reihenfolge an HTML-Reihenfolge anpassen

Details anzeigen



Details anzeigen





Details anzeigen



Details anzeigen

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

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

.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;
}