Links met verschillende bestemmingen
Silktide vindt op een pagina links die dezelfde tekst hebben, maar naar verschillende bestemmingen verwijzen. Wanneer twee identiek ogende links naar verschillende plaatsen leiden, kunnen mensen ze niet van elkaar onderscheiden zonder beide te volgen.
<!-- Twee links met de tekst "Nieuws" die naar verschillende pagina's gaan -->
<p>Lees het laatste nieuws over onze producten: <a href="\/products\/news">Nieuws</a></p>
<p>Lees het laatste nieuws over onze diensten: <a href="\/company\/news">Nieuws</a></p>
Waarom dit belangrijk is
Mensen die een gebruiken, roepen vaak een lijst op van elke link op de pagina, zonder context. Twee links die allebei als "Nieuws" worden aangekondigd, maar naar verschillende pagina's gaan, zijn in die lijst niet van elkaar te onderscheiden. De gebruiker moet daarom elke link openen om te ontdekken waar deze naartoe leidt. Dezelfde onduidelijkheid treft gebruikers van spraakherkenning, die links selecteren door hun naam hardop uit te spreken.
Zo lost u het op
- Geef elke link een andere zichtbare tekst die de bestemming beschrijft, zoals "Productnieuws" en "Bedrijfsnieuws".
- Als het ontwerp niet kan worden gewijzigd, voeg dan een -label toe om de links van elkaar te onderscheiden zonder te veranderen wat ziende gebruikers zien:
<!-- Het aria-label wordt de naam die schermlezers aankondigen -->
<a href="\/products\/news" aria-label="Productnieuws">Nieuws</a>
<a href="\/company\/news" aria-label="Bedrijfsnieuws">Nieuws</a>
- U kunt ook extra tekst opnemen in de link die visueel verborgen is, maar wel door schermlezers wordt voorgelezen (bijvoorbeeld een
<span>die is opgemaakt met een CSS-klasse die alleen voor schermlezers bedoeld is). - Als de links voor de gebruiker functioneel gelijkwaardig zijn, bijvoorbeeld omdat ze naar dezelfde pagina doorverwijzen, .
Zo test Silktide dit
- Zoek elke link op de pagina, waarbij elementen die u van de controle hebt uitgesloten, worden overgeslagen.
- Bepaal de van elke link: de tekst die aankondigt. Dit omvat ARIA-labels en van afbeeldingen, en niet alleen de zichtbare tekst.
- Normaliseer de bestemming van elke link ter vergelijking: fragmenten (het deel na
#), queryreeksen (het deel na?), het URL-schema en afsluitende schuine strepen worden genegeerd. - Wanneer links met dezelfde toegankelijke naam naar meer dan één verschillende bestemming verwijzen, worden ze allemaal gemarkeerd.
Problemen oplossen
Links naar verschillende secties van dezelfde pagina worden niet gemarkeerd
Omdat fragmenten worden genegeerd bij het vergelijken van bestemmingen, gelden links zoals \/guide#intro en \/guide#pricing als dezelfde bestemming. Dit is opzettelijk: beide leiden naar dezelfde pagina.
Links die alleen verschillen door trackingparameters worden niet gemarkeerd
Queryreeksen worden genegeerd bij het vergelijken van bestemmingen. Daarom gelden \/offers?src=header en \/offers?src=footer als dezelfde pagina en niet als verschillende bestemmingen.