Succescriterium 2.4.4 – Duidelijke links

Zorg dat links duidelijk zijn zonder de omliggende inhoud. Gebruikers kunnen met hulpmiddelen een overzicht van links op het scherm opvragen. Het is belangrijk dat het voor elke link duidelijk is wat het doel is. Een veelgemaakte fout is om een link ‘Lees meer’ te noemen. Zonder de omliggende tekst is het niet duidelijk waar je meer over gaat lezen.

Impact

Gebruikers kunnen met hulpmiddelen een overzicht van links op het scherm opvragen. Het moet direct duidelijk zijn waar deze link naartoe verwijst.

Controleren

Is het voor elke link duidelijk wat het doel is?

Dit kan getest worden zonder hulpmiddelen of met de schermlezer.

Oplossing

Op Android kun je gebruik maken van URLSpan. De methode ViewCompat.addLinks kan ook handig zijn. De methode ViewCompat.enableAccessibleClickableSpanSupport is noodzakelijk om lagere Android versies te ondersteunen.

val textView = TextView(this)

val url = "https://appt.nl"
val link = "Appt"

val spannableString = SpannableString("Learn more about $link.")

val index = spannableString.indexOf(link)
spannableString.setSpan(URLSpan(url), index, index + link.length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)

textView.text = spannableString
textView.movementMethod = LinkMovementMethod.getInstance()

ViewCompat.enableAccessibleClickableSpanSupport(textView)

Op iOS kun je gebruik maken van NSMutableAttributedString in combinatie met het link attribuut.

let textView = UITextView()

guard let url = URL(string: "https://appt.nl") else { return }
let link = "Appt"

let attributedString = NSMutableAttributedString(string: "Learn more about \(link).")

let range = attributedString.mutableString.range(of: link)
attributedString.addAttribute(.link, value: url, range: range)

textView.attributedText = attributedString

Referenties

Meer succescriteria