Toegankelijke implementatiepatronen voor kaartcomponenten

Kaartcomponenten worden vaak gebruikt in artikeloverzichten. Hoewel de vormgeving eenvoudig lijkt, schuilen er verrassend veel ontwerpuitdagingen achter als je toegankelijkheid meeneemt.

Een typische kaart bestaat van boven naar beneden uit

• een afbeelding,
• een artikeltitel,
• een samenvatting van het artikel
• en een detailslink.

Laten we een implementatiepatroon bekijken voor een verticaal gestapelde lay-out.

Belangrijkste aandachtspunten bij het ontwerp

1. Visuele volgorde en HTML-structuur

Schermlezers lezen inhoud in principe voor in de volgorde waarin de elementen in de HTML staan. In WCAG 2.0 wordt in succescriterium 1.3.2 (Betekenisvolle volgorde, niveau A) als basisprincipe gesteld dat de visuele volgorde en de HTML-volgorde overeenkomen.

Het wijzigen van de volgorde via CSS is op zichzelf echter geen WCAG-overtreding. Als de inhoud begrijpelijk blijft, is het geen probleem dat de visuele en HTML-volgorde verschillen. Het is belangrijk om hier per situatie een afweging te maken.

2. Omgang met afbeeldingen

Afbeeldingen in artikelkaarten zijn in veel gevallen decoratief. Wanneer de artikeltitel aanwezig is, komt de inhoud al goed over, dus het voorlezen van een beschrijving van de afbeelding is doorgaans niet nodig.

Bij decoratieve afbeeldingen is alt="" voldoende.

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

3. Labels van detail-links

Algemene teksten zoals "Bekijk meer" kunnen beter worden vermeden, om de volgende redenen.

Visuele problemen

Zonder omringende context is het niet duidelijk waar de link naartoe leidt.

Problemen met schermlezers

Wanneer links via de linklijstfunctie worden weergegeven, zijn ze allemaal "Meer details". Gebruikers kunnen ze daardoor niet van elkaar onderscheiden.

Problemen met spraakbediening

Wanneer er meerdere identieke teksten zijn, moet de gebruiker een nummer kiezen om een link te selecteren. Dit maakt de bediening omslachtig.

Idealiter is de tekst van een link op zichzelf begrijpelijk, bijvoorbeeld "Meer details over [onderwerp]". Hier behandelen we echter hoe je het ontwerp "Meer details" zonder wijzigingen implementeert.

4. Klikbaar gebied van kaarten

Om de gebruikerservaring te verbeteren, willen we vaak de volledige kaart klikbaar maken. Er zijn meerdere implementatiemethoden, en elk heeft andere gevolgen voor toegankelijkheid.

5. Kaart als article of als div

Welke keuze het beste is, hangt af van de aard van de inhoud.

<article>Geschikt wanneer:

• De inhoud van de kaart zelfstandig als content functioneert

<div>Acceptabel wanneer:

• De kaart alleen fungeert als een groep links
• De kaart op zichzelf geen betekenismatige zelfstandigheid heeft

Bij gangbare overzichten van blogartikelen of productlijsten is <article> doorgaans passend. Als er echter meerdere <article>-elementen worden gebruikt, is het aanbevolen om rekening te houden met de landmarknavigatie van screenreaders en elk artikel identificeerbaar te maken met aria-labelledby of aria-label (WCAG 2.4.6, niveau AA).

Bij gebruik van aria-labelledby moet u erop letten dat de ID's uniek zijn.

Visuele volgorde en HTML-structuur

Patroon 1: Visuele volgorde en HTML-volgorde gelijk houden

<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 volgorde van de HTML exact overeenkomt met de visuele volgorde, is dit eenvoudig en intuïtief.

Opmerking: Het eerste element binnen <article>een kop wordt aanbevolen, maar is geen absolute vereiste. Als overeenstemming met de visuele volgorde prioriteit heeft, is dit patroon acceptabel.

Aanvullende informatie:

Spraakherkenningssoftware (zoals Dragon en Voice Control) werkt op basis van de tekst die op het scherm wordt weergegeven. Door visually-hidden (sr-only) te gebruiken, blijft de zichtbare tekst behouden en blijft bediening via spraakherkenning mogelijk. Hieronder volgen implementatievoorbeelden van acceptabele en onacceptabele patronen voor linkteksten.

<!-- 以下は可視テキストがアクセシブルな名前に含まれているので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 <article>het eerste element een kop is, is deze structuur semantisch beter geschikt.

Bij decoratieve afbeeldingen (alt="") heeft dit geen invloed op de voorleesvolgorde, omdat de afbeelding wordt overgeslagen.

Let op:

• Wanneer een afbeelding betekenis heeft en een alt-attribuut heeft, is deze structuur niet geschikt, omdat de visuele volgorde en de voorleesvolgorde dan van elkaar verschillen.
• De Tab-volgorde van het toetsenbord volgt de volgorde in de HTML. Als een kaart meerdere focusbare elementen bevat, controleer dan of de focusvolgorde de logische stroom niet verstoort.

Als het klikbare gebied van de kaart de volledige kaart moet beslaan:

Patroon 3: volledige kaart klikbaar maken met een pseudo-element

Bij deze methode bedekt het pseudo-element van de titellink de volledige kaart, en wordt "Bekijk details" <span>als puur visuele opmaak behandeld.

Als "Bekijk details" <a>ongewijzigd blijft en we tabindex="-1" of aria-hidden="true" toevoegen, veroorzaakt dit ruis in de linklijst van schermlezers en in de modus voor elementnavigatie. Daarom is het volgens mij beter om het <span>als visuele opmaak te behandelen.

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

• De semantische structuur blijft behouden
• Wordt op een natuurlijke manier voorgelezen door schermlezers
• Er kunnen meerdere links in de kaart worden geplaatst (bijvoorbeeld categorie-, tag- en auteurslinks)

Nadelen:

• Het beheer van z-index is vereist (maar zodra het eenmaal is ingesteld, levert dit geen problemen op)

Patroon 4: de volledige kaart omsluiten met<a>

Omdat de volledige kaart in deze methode één link is, wordt "Bekijk details" vanzelf <span>de linktekst.

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

• Eenvoudige implementatie
• Eenvoudig aan te passen met CSS

Nadelen:

• Afhankelijk van de schermlezer kunnen alle teksten aaneengesloten worden voorgelezen (vooral bij VoiceOver klinkt het als "Artikeltitel, artikelsamenvatting... Bekijk details, link").
• Er kunnen geen meerdere links binnen de kaart worden geplaatst.

Voorbeelden van elk patroon

Conclusie

Er bestaan meerdere benaderingen voor het implementeren van toegankelijke kaartcomponenten. Belangrijk is dat er geen enkel patroon is dat als "het enige juiste" geldt; de beste oplossing hangt af van de situatie.

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

1. Kies een implementatie die voor de gebruikers zelf geen problemen oplevert
2. Houd rekening met de betekenis van de afbeelding, het doel van de kaart en de opbouw van de hele site
3. Geef de voorkeur aan praktische implementaties die goed te onderhouden zijn