Toegankelijke implementatiepatronen voor kaartcomponenten

Kaartcomponenten worden vaak gebruikt in artikelenlijsten. Hoewel het uiterlijk eenvoudig is, biedt het ontwerp veel diepgang wanneer je accessibility in overweging neemt.

Een typische kaart bestaat van boven naar beneden uit

afbeelding
artikeltitel
artikeloverzicht
detailkoppeling

en we zullen implementatiepatronen bekijken in een verticaal gestapelde indeling.

Belangrijkste aandachtspunten bij het ontwerp

1. Visuele volgorde en HTML-structuur

Schermlezers lezen in principe in de HTML-schrijfvolgorde voor. In WCAG 2.0 succesvol criterium 1.3.2 (betekenisvolle volgorde, niveau A) geldt dat visuele volgorde en HTML-volgorde met elkaar in overeenstemming moeten zijn als fundamenteel principe.

Het wijzigen van de volgorde met CSS vormt echter niet per se een WCAG-schending. Zelfs als de visuele volgorde en HTML-volgorde verschillen, is er geen probleem zolang de inhoud begrijpelijk is. Het is belangrijk om naar gelang de situatie flexibel te oordelen.

2. Afbeeldingen behandelen

Afbeeldingen in artikelkaarten zijn in veel gevallen decoratief. Als er een articeltitel is, is de inhoud al voldoende duidelijk, dus het is niet nodig om de afbeeldingsbeschrijving voor te lezen.

Als decoratieve afbeelding is alt="" voldoende.

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

3. Labels voor gedetailleerde koppelingen

Algemene tekst als 'Meer informatie' moet om de volgende redenen worden vermeden:

Visuele problemen

Zonder context is niet duidelijk waarvoor de koppeling bedoeld is

Problemen met schermlezers

Bij weergave in een lijstfunctie zijn alle items gelabeld als 'Meer informatie', waardoor ze niet te onderscheiden zijn

Problemen met spraakherkenning

Wanneer er meerdere identieke teksten zijn, is selectie op basis van nummering nodig, wat de bediening ingewikkelder maakt

Idealiter zou de tekst als 'Details van ○○ bekijken' moeten luiden, zodat het doel alleen al uit de link valt af te leiden. Hier behandelen we echter de implementatiemethode voor het geval dat je het ontwerp 'Details bekijken' ongewijzigd wilt behouden.

4. Klikbare zone van de kaart

Om de UX te verbeteren, is het vaak wenselijk om de gehele kaart klikbaar te maken. Er zijn meerdere implementatiemethoden, elk met verschillende gevolgen voor de toegankelijkheid.

5. Moet de kaart een article of een div element zijn

Dit hangt af van de aard van de inhoud.

is geschikt wanneer:

De inhoud van de kaart vormt op zichzelf een onafhankelijk stuk content

is acceptabel:

Fungeert als een eenvoudige groep links
Het kaart zelf heeft geen semantische onafhankelijkheid

Voor typische lijsten met blogartikelkaarten of productkaarten is geschikt. Wanneer echter meerdere elementen worden gebruikt, wordt aanbevolen om de schermlezer-landmarknavigatie in gedachten te houden en elk artikel identificeerbaar te maken met aria-labelledby of aria-label (WCAG 2.4.6, level AA).

Let op bij het gebruik van aria-labelledby dat de ID een unieke waarde is.

Over visuele volgorde en HTML-structuur

Patroon 1: Visuele volgorde en HTML-volgorde afstemmen

<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>

Omdat de HTML-schrijfvolgorde volledig overeenkomt met de visuele volgorde, is deze aanpak eenvoudig en intuïtief.

Opmerking: Het eerste element in moet idealiter een kop zijn, maar dit is geen vereiste. Als je prioriteit geeft aan afstemming met de visuele volgorde, is dit patroon geschikt.

Aanvulling:

Spraakherkenningssoftware (Dragon, Voice Control, enz.) werkt op basis van de tekst die op het scherm wordt weergegeven. Door visually-hidden (sr-only) te gebruiken, blijft de visuele tekst behouden en wordt bediening via spraakherkenning mogelijk. Hier volgen implementatievoorbeelden van geldige en ongeldige patronen voor linkafbeeldingen.

<!-- 以下は可視テキストがアクセシブルな名前に含まれているので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>

Patroon 2: Visuele volgorde aanpassen met CSS order

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

Omdat het eerste element in een kop is, is dit semantisch gezien een meer gewenste structuur.

Voor decoratieve afbeeldingen (alt="") is er geen invloed op de leesvolgorde (de afbeelding wordt overgeslagen).

Let op:

Wanneer de afbeelding betekenis heeft en een alt-kenmerk is opgegeven, is deze structuur niet geschikt omdat de visuele volgorde en leesvolgorde verschillen
De tabvolgorde van het toetsenbord volgt de HTML-volgorde. Als er meerdere focusbare elementen in een kaart staan, controleer dan of de focusvolgorde niet de logische stroom onderbreekt.

Wanneer u de klikbare zone van de kaart volledig wilt maken

Patroon 3: Pseudo-element voor volledig klikbare kaart

Bij deze methode bedekt een pseudo-element op de titellink de hele kaart, en de "Meer weergeven" wordt visueel als decoratie weergegeven in een .

"Meer weergeven" als houden met tabindex="-1" of aria-hidden="true" veroorzaakt ruis in schermlezerslinkinformatie en elementnavigatiemodi, dus het is beter om het te maken.

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

Voordelen:

Behoudt semantische structuur
Wordt natuurlijk voorgelezen door schermlezers
Meerdere links kunnen binnen de kaart worden geplaatst (categorie-, tag- en auteurlinks, enz.)

Nadelen:

z-index moet worden beheerd (maar dit is geen probleem nadat het eenmaal is ingesteld)

Patroon 4: De hele kaart omwikkelen met

Bij deze methode wordt de hele kaart één link, dus "Meer weergeven" wordt op natuurlijke wijze .

<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>

Voordelen:

Implementatie is eenvoudig
CSS-aanpassingen zijn eenvoudig

Nadelen:

Bij sommige schermlezers kan alle tekst achter elkaar worden voorgelezen (met name in VoiceOver: 'artikeltitel artikeloverzicht... meer weergeven, link')
Kan niet meerdere links in een kaart plaatsen

Voorbeelden van elk patroon

Samenvatting

Voor het implementeren van een toegankelijk kaartcomponent bestaan er meerdere benaderingen. Het belangrijkste is dat er geen enkel juist implementatiepatroon bestaat, en de optimale oplossing afhankelijk is van de situatie.

Bij implementatie is het belangrijk het volgende in gedachten te houden.

Kies een implementatie die geen problemen oplevert voor werkelijke gebruikers
Houd rekening met de betekenis van de afbeelding, het doel van de kaart en de algehele structuur van de site
Geef prioriteit aan praktische en gemakkelijk onderhoudbare implementaties