Link - Candidate NLDS - A11y getest #210
Comments
|
Dit is de Preview om te testen: https://candidate-storybook-test-git-feat-add-link-css-nl-design-system.vercel.app/?path=/docs/componenten-link--documentatie |
|
@Robbert Hertest: https://candidate-storybook-test-git-feat-add-link-css-nl-design-system.vercel.app/iframe.html?globals=&args=&id=componenten-link--inline-box-hover&viewMode=story Let op: Dit komt op alle logo-links voor. Het aria-label overschrijft de afbeelding in de link, waardoor je de informatie mist dat het om een logo gaat. Simpelste oplossing: verander op de |
github-project-automation
bot
moved this from Review needed
to Done
in Candidate component taken
|
Ik heb Link gehertest, en gezien dat het taal undefined issue nu opgelost is. Wat betreft het aria-label voor de link: dat is niet opgelost in de test case op de manier die Marjon beschrijft (en Rian in haar blog post), maar wat mij betreft is het zoals het nu staat goed genoeg en in lijn met WCAG als het zo op een pagina wordt gebruikt. Mijn advies zou zijn om de uitleg uit Rian's blog post op te nemen in best practices, bij component en/of Richtlijnen, zodat we mensen laten zien hoe je dit het beste gebruikt. |
…ekende aria-current toe (#423) Best practice is om de toegankelijke naam van een link te beginnen met de visuele tekst. De dot in de tekst is overbodig, gebruik voor een korte pauze beter een komma. De `aria-current` ontbrak op de link voor het verhaal “Link rondom image, current page” en is nu toegevoegd. De toegankelijke naam staat op de SVG. Vergelijkbaar met het geval van een img met een alt attribuut. ZIe voor uitleg: https://www.htmhell.dev/adventcalendar/2024/1/ Preview: https://candidate-storybook-test-git-fix-logo-i-ae48c3-nl-design-system.vercel.app/?path=/docs/componenten-link--documentatie Gerelateerd issue: #210
Review toegankelijkheid voor de NLDS Candidate component Link
Hoe te testen
Ga naar de te reviewen component in StoryBook.
Review toegankelijkheid op 20 december 2024 door Marjon Bakker
Gereviewd: https://candidate-storybook-test-git-feat-add-link-css-nl-design-system.vercel.app/?path=/docs/componenten-link--documentatie
Met de stories:
Review ten opzichte van de acceptatiecriteria
Het label van de Link bestaat uit gewone tekst, niet uit een afbeelding van tekst
WCAG 1.4.5 Afbeeldingen van tekst
Oordeel: Voldoet
De linktekst van de Link vertelt eenduidig aan de gebruiker waar de link naar toe gaat (het linkdoel).
WCAG 2.4.4 Linkdoel (in context)
Oordeel: Voldoet niet
De zichtbare naam van de Link komt voor in de toegankelijke naam
WCAG 2.5.3 Label in naam
Oordeel: Voldoet
Als de tekst van de Link in een andere taal is dan de taal van de pagina, dan heeft het element een lang-attribuut met de juiste taalcode
WCAG 3.1.2 Taal van onderdelen
Oordeel: Voldoet niet
lang="undefined"en de Nederlandse link heeft geenlang-attribuut. Er zijn meerdere pagina's met eenlang="undefined", volgens axe is dit een fout op 3.1.1 Taal van de pagina.De contrastverhouding van de tekstkleur van de Link met de achtergrondkleur is hoog genoeg
WCAG 1.4.3 Contrast (minimum)
Oordeel: Voldoet
Als het zichtbare label van de Link alleen een afbeelding of icoon is, dan is het contrast tussen de afbeelding en de achtergrond minimaal 3:1
WCAG 1.4.11 Contrast van niet-tekstuele content
Oordeel: Voldoet
De Link heeft een aanklikbaar gedeelte van ten minste 44 bij 44 pixels
WCAG 2.5.5 Grootte van het aanwijsgebied (uitgebreid)
Oordeel: Voldoet
Links met gelijke functies hebben hetzelfde uiterlijk en hetzelfde label
WCAG 3.2.4 Consistente identificatie
Oordeel: Niet te beoordelen, contextafhankelijk
Als je de tekst vergroot tot 200% blijft deze in zijn geheel zichtbaar
WCAG 1.4.4 Herschalen van tekst
Oordeel: Voldoet
Als je de tekstafstand vergroot blijft de tekst in zijn geheel zichtbaar
WCAG 1.4.12 Tekstafstand
Oordeel: Voldoet
Je kunt de Link focussen met de tabtoets en activeren met de entertoets
WCAG 2.1.1 Toetsenbord
Oordeel: Voldoet
De functionaliteit van de Link veroorzaakt geen toetsenbordval
WCAG 2.1.2 Geen toetsenbordval
Oordeel: Voldoet
Wanneer de Link de toetsenbordfocus krijgt is de focus zichtbaar
WCAG 2.4.7 Focus zichtbaar
Oordeel: Voldoet
Als de Link de toetsenbordfocus krijgt, is het element niet volledig bedekt door andere inhoud
WCAG 2.4.11 Focus niet bedekt (minimum)
Oordeel: Voldoet
Als de gebruiker de Link indrukt met een aanwijzer zoals een muis of vinger, is er de mogelijkheid is om actie te voorkomen of ongedaan te maken
WCAG 2.5.2 Aanwijzerannulering
Oordeel: Voldoet
Als het label van de Link uit een icoon bestaat, dan heeft deze een goed tekstalternatief
WCAG 1.1.1 Niet-tekstuele content
Oordeel: Voldoet
De Link heeft een rol van link en een toegankelijke naam die duidelijk maakt waar de Link voor dient
WCAG 4.1.2 Naam, rol, waarde
Oordeel: Voldoet, maar zie Linkdoel in context voor duidelijkheid van het linkdoel
The text was updated successfully, but these errors were encountered: