Topics

Kaartvormige componenten worden vaak gebruikt in lijsten met artikelen, enzovoort. Hoewel ze er eenvoudig uitzien, kleven er verrassend veel ontwerpproblemen aan als het gaat om toegankelijkheid.

Een typische kaart van bovenaf

• afbeelding
• Artikeltitel
• Samenvatting van het artikel
• Meer details link

Laten we eens kijken naar een implementatiepatroon voor een verticale lay-out.

Belangrijkste aandachtspunten bij het ontwerpen

1. Visuele ordening en HTML-structuur

Schermlezers lezen HTML over het algemeen in de volgorde waarin het is geschreven.Succescriterium 1.3.2 (Betekenisvolle volgorde, niveau A)Dus,Het basisprincipe is om de visuele volgorde af te stemmen op de HTML-volgorde.Dit is wat we zeggen.

Het wijzigen van de volgorde in CSS is op zich echter geen schending van de WCAG-richtlijnen. Er is geen probleem als de visuele volgorde en de HTML-volgorde verschillen, zolang de inhoud maar begrijpelijk blijft. Het is belangrijk om flexibel te zijn en beslissingen te nemen op basis van de situatie.

2. Hoe om te gaan met afbeeldingen

Afbeeldingen op artikelkaarten zijn vaakdecoratiefDe titel van het artikel geeft de inhoud voldoende weer, dus het is niet nodig om de afbeeldingsbeschrijving voor te lezen.

Wanneer het als decoratief beeld wordt beschouwdalt=""is voldoende.

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

3. Label voor de link naar details

Algemene teksten zoals "Meer informatie" moeten om de volgende redenen worden vermeden:

Visuele problemen

Zonder de omringende context is het moeilijk te zeggen wat een link is.

Problemen met schermlezers

Wanneer links in een lijst worden weergegeven met behulp van de linklijstfunctie, worden alle links gelabeld als 'Details bekijken' en zijn ze niet van elkaar te onderscheiden (WCAG 2.4.4 Linkdoel, niveau A).

Problemen met spraakherkenning

Als er meerdere identieke teksten zijn, moet u ze op nummer selecteren, wat het proces ingewikkeld maakt.

Idealiter zou de link tekst moeten bevatten die het doel ervan direct duidelijk maakt, zoals "Bekijk details over XX", maar hier leggen we uit hoe je dit kunt implementeren als je het "Bekijk details"-ontwerp exact wilt reproduceren.

4. Klikbare gedeeltes van kaarten

Vanuit het oogpunt van gebruikerservaring is het vaak wenselijk om de hele kaart klikbaar te maken. Er zijn verschillende manieren om dit te bereiken, elk met een andere impact op de toegankelijkheid.

5. Moeten kaarten lidwoorden of divs zijn?

De keuze hangt af van de aard van de inhoud.

<article>Geschikt wanneer:

• De inhoud van de kaart is een zelfstandig onderdeel van de inhoud.

<div>Als dat goed is:

• Het fungeert simpelweg als een groep links.
• De kaarten zelf hebben geen semantische onafhankelijkheid.

Voor algemene blogpostlijst- of productlijstkaarten,<article>Echter, meerdere<article>Houd bij gebruik rekening met de bewegingsrichting van de schermlezer.aria-labelledbyofaria-labelHet wordt aanbevolen om een ​​CSS3-tag te gebruiken om elk artikel te identificeren (WCAG 2.4.6, niveau AA).

aria-labelledbyAls je dit gebruikt, zorg er dan voor dat de ID een unieke waarde is.

Visuele ordening en HTML-structuur

Patroon 1: Stem de visuele volgorde af op de HTML-volgorde

Artikeltitel

Artikelsamenvatting...



Artikeltitel:Bekijk details

Het is eenvoudig en intuïtief, omdat de HTML-volgorde perfect overeenkomt met de visuele volgorde.

※ <article>Het eerste element in een koptekst heeft de voorkeur, maar is geen absolute vereiste. Als je consistentie in de visuele volgorde belangrijk vindt, is dit patroon prima.

supplement:

Spraakherkenningssoftware (Dragon, Voice Control, enz.) werkt op basis van de tekst die op het scherm wordt weergegeven.visually-hidden (sr-only)Hierdoor blijft de visuele tekst behouden en is bediening via spraakherkenning mogelijk. Daarnaast volgen hier voorbeelden van OK- en NG-patronen voor ondersteuning van linklabels.

Details bekijken
</a>



Details bekijken
</a>





Details bekijken
</a>



Details bekijken
</a>

<a href="#">Artikeltitel</h3>

Artikelsamenvatting...



Artikeltitel:>Bekijk details




</article>

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

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

<article>is een semantisch wenselijkere structuur, aangezien het eerste element van de structuur de kop wordt.

Decoratieve afbeeldingen (alt=""), de leesvolgorde wordt niet beïnvloed (omdat afbeeldingen worden overgeslagen).

Kennisgeving:

• Als de afbeelding betekenisvol is en een alt-attribuut heeft, is deze structuur niet geschikt omdat het de visuele en leesvolgorde verandert.
• De tabvolgorde op het toetsenbord volgt de HTML-volgorde. Als je dus meerdere focusseerbare elementen binnen een kaart hebt, zorg er dan voor dat de focusvolgorde de logische flow niet verstoort.

Als je het hele klikbare gedeelte van de kaart wilt weergeven

Patroon 3: De hele kaart klikbaar maken met behulp van pseudo-elementen

Deze methode maakt gebruik van een pseudo-element voor een titellink om de hele kaart te bedekken, met de knop "Meer informatie" als visuele decoratie.<span>naar.

Klik op "Details bekijken"<a>Zoals het istabindex="-1"ofaria-hidden="true"Desondanks zal het wel ruis veroorzaken in de linklijst van een schermlezer of in de elementnavigatiemodus, dus<span>Ik denk dat dit een betere aanpak zou zijn.

Artikeltitel

Artikelsamenvatting...

Bekijk details

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

verdienste:

• Behoudt de semantische structuur
• Leest vloeiend voor door schermlezers.
• Binnen een kaart kunnen meerdere links worden geplaatst (categorieën, tags, auteurslinks, enz.).

Nadelen:

• z-indexBeheer is vereist (maar eenmaal ingesteld is er geen probleem).

Patroon 4: De hele kaart<a>Omring met

Op deze manier wordt de hele kaart één enkele link, waardoor "Details bekijken" een logische keuze wordt.<span>Dat zal zo zijn.

Artikeltitel

Artikelsamenvatting...

Bekijk details

verdienste:

• Eenvoudig te implementeren
• Eenvoudige CSS-aanpassingen

Nadelen:

• Sommige schermlezers lezen mogelijk alle tekst aan elkaar (met name VoiceOver, dat "Artikeltitel, Artikelsamenvatting...Zie details, Link" voorleest).
• Je kunt niet meerdere links in één kaart plaatsen.

Voorbeelden van elk patroon

samenvatting

Er zijn meerdere benaderingen voor het implementeren van toegankelijke kaartachtige componenten. Het belangrijkste is dat er geen "enige juiste" implementatiepatroon bestaat.De optimale oplossing verschilt afhankelijk van de situatie.Dat is wat het betekent.

Bij de implementatie is het belangrijk om rekening te houden met het volgende:

1. Kies een implementatie die geen problemen zal veroorzaken voor de daadwerkelijke gebruikers.
2. Houd rekening met de betekenis van de afbeelding, het doel van de kaart en de algehele structuur van de website.
3. Geef prioriteit aan praktische en onderhoudbare implementaties.