In line with our mission of teaching web accessibility, I would like to start a series of tips on how to design accessible sites. I encourage you to make comments, additional information, even violent reactions and disagreements.You may even make your own web accessibility tips. 🙂
WHAT: Hyperlink is a text that, when you click your mouse pointer on top of it, transports you to another web page or to your internal links. Hyperlinks are most often underlined and colored blue.
HOW: In order for hyperlinks to be accessible, the text should be meaningful enough to make sense when read by a screen reader. It needs to describe the page it is linking to.
WHY: The reason is that for us sighted beings, we can readily know that clicking the hyperlink tells the browser to open another web page. But for a blind person, it just hears the hyperlink without knowing where this link would lead them to. This is especially true of news articles that are cut into paragraphs where the continuation appears on another page. You must click the hyperlink to proceed to that page.
SOLUTION: To make the link accessible, avoid using “Click here”, “More”, “This” or “Continuation” texts. Many web designers are guilty of using these. Instead make it informative and clearly define the content of the linked page.
EXAMPLE: If you have a news item entitled, “PWAG Website Launched last September“, don’t put “Click here” or “More” hyperlink at the bottom to indicate a continuation of the news.
Instead, you may use the phrase “PWAG Website Launched…“, “Continue reading PWAG Website Launched” or “Follow this link on PWAG Website Launched“. These hyperlink phrases clearly describe what the blind user expects to “see” on the linked page. 🙂
References:
- PWAG WDAR – https://www.pwag.org/designrecommendations.htm#MS1-2
- WAI/W3C – http://www.w3.org/TR/WAI-WEBCONTENT/wai-pageauth.html#tech-meaningful-links
