There are many accessibility issues around the hyperlink element and its use. As a primary functional element used in webpages, we want to make sure that any experience that a non-impaired user has of our site’s links, there is an equivalent experience for the impaired user. For content authoring, however, we primarily need to worry about the guideline of link purpose (in context). This is the double-A standard and while there is a triple-A WCAG 2.0 standard for link purpose, that won’t be our focus here.
The guideline for link purpose says that,
The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general.
While the guideline seems pretty straightforward, following the guideline consistently will require attention every time we author content for a page.
As you work on the content of your site a good question to ask yourself when creating links is this:
Does the user need to look outside of the element the link is in for nearby context in order to determine the purpose of the link?
Examples:
For content authoring purposes, we can successfully follow this guideline in a few different ways (not a complete list):
1. Use link text that describes the purpose of the link where there is no other context. This is one of the easier-to-solve situations. The purpose is going to be fully described by the text of the link itself because there is no other context to let the user know anything about the purpose of the link. So, what we need to focus on is making sure we’re creating a clear text description.
Example: Let’s look at the situation where you want to link to a specific product category page with a text link. Choose text that describes the purpose of the link. In this case, our purpose is to have users visit a specific product category page.
· If our category is Home & Kitchen, our link text could be “Home & Kitchen category”.
· Above you can see what is read by the VoiceOver screen reader when the user encounters that link.
· Back to our question: Does the user need to look outside of the element the link is in for nearby context in order to determine the purpose of the link?
With the link text above, NO! This link could stand alone with no other context and be understood by all users however they encounter it.
2. Use link text that describes the purpose of the link where there is programmatically determined additional context.
The key to this example is to make sure the context is able to be programmatically associated with the link. That means that the context must either be:
1. Encased in the same content element (paragraph, list, table cell, etc…)
2. A preceding heading the content
3. Associated using aria-label or aria-labeled by properties.
If we know that the context fits one of the conditions above, we can focus on just providing link text that will make the purpose of the link clear given that other context.
Example: Consider a block of links with a heading partially identifying the group of links from Amazon.com.
For the situation above, the block of links is identified as being top categories for the user. Visually, these links might be easy to associate together contextually, however, we don’t know if they are fully accessible.
However, we don’t know if the text “top categories for you” is programmatically associated with the links below it.
If we check the HTML we see the below for the ‘heading’:
Additionally, each link below the ‘heading’ is contained inside of its own <div> tag.
Analysis: the links provided do not have enough programmatic context to stand on their own.
So, what would Amazon need to do to make these links accessible? Any of these four would work and there are probably a few more ways to solve this beyond these.
1. Use an appropriate heading (h2, h3, h4, etc…) tag for the “Top categories for you” text
2. Add an aria-label to each link that describes the purpose of the link
3. Use aria-labelledby on each link using the ID of the description element
4. Make the “top categories for you” text a list element parent with the links below as a nested list.
3. Use image alt text that describes the purpose of the link when an image is the only link content.
When you are using an image as the only content of a link, your image’s alt text is going to define the purpose of the link. The best solution for this situation is to have the image and link text all be contained within the link. However, if using actual text for the link is not an option, the alt text of the image should be used.
When read by screenreaders, the user will hear the identification of the element type in order of nesting. So, for alt text on an image nested in a link, they will hear “link, image, [alt text]”. It is that context that we want to provide a text alternative to the meaning and purpose of the linked image.
For example, if we had an image of kitchen gadgets on our page that we wanted to link to our home & kitchen category, our link’s purpose is still to get the user to the Home & Kitchen category page. So, our alt text on the image should be “Home & Kitchen category”, the same as in the first example.
SEO Considerations:
Overall, what’s good for SEO is good for Accessibility. Best practices for search engine optimization and accessibility best practices are not in conflict when considering link text. The same things you want for accessibility make for good SEO practices. For instance:
BAD: “Click Here!” is bad for SEO just as it’s bad for Accessibility.
GOOD: “Home & Kitchen” would be good for both SEO and Accessibility.
For search engine optimization we also want page names that roughly describe the content of the page rather than just a string of random characters. If we are already naming our pages in a descriptive way for SEO, we can very easily use link text that roughly matches the page name. Doing so creates a good association for SEO as well as for accessibility.
Warning: exact matching every single page name throughout your site will potentially trigger spam filters.
That means that if your page pathname is “…/home-kitchen”, every single link to that page throughout your site should not be “home kitchen”. It would be more natural to have “home and kitchen”, “home & kitchen”, “home & kitchen category”, etc… Just don’t use something completely unrelated like “patio chairs” for a link to “…/home-kitchen”.
Other negative SEO practices such as keyword stuffing, spammy anchor text, and other techniques regarding links should also be avoided for accessibility.
Basic Do’s and Don’ts:
· DO use text that describes the purpose of the link
· DO make sure context can be determined programmatically
· DO keep links consistent throughout your site
· DO write clear and concise link text
· DO clean up empty or broken links
· DON’T use the “links to”, “link”, etc… in the link text (screenreaders announce that the user has encountered a link, so this will be repetitive)
· DON’T use ASCII characters or all Capital letters
· DON’T use URLs as link text
· DON’T use direct download links without notice
2. Use link text that describes the purpose of the link where there is programmatically determined additional context.
The key to this example is to make sure the context is able to be programmatically associated with the link. That means that the context must either be:
1. Encased in the same content element (paragraph, list, table cell, etc…)
2. A preceding heading the content
3. Associated using aria-label or aria-labeled by properties.
If we know that the context fits one of the conditions above, we can focus on just providing link text that will make the purpose of the link clear given that other context.
Example: Consider a block of links with a heading partially identifying the group of links from Amazon.com.
For the situation above, the block of links is identified as being top categories for the user. Visually, these links might be easy to associate together contextually, however, we don’t know if they are fully accessible.
However, we don’t know if the text “top categories for you” is programmatically associated with the links below it.
If we check the HTML we see the below for the ‘heading’:
Additionally, each link below the ‘heading’ is contained inside of its own <div> tag.
Analysis: the links provided do not have enough programmatic context to stand on their own.
So, what would Amazon need to do to make these links accessible? Any of these four would work and there are probably a few more ways to solve this beyond these.
1. Use an appropriate heading (h2, h3, h4, etc…) tag for the “Top categories for you” text
2. Add an aria-label to each link that describes the purpose of the link
3. Use aria-labelledby on each link using the ID of the description element
4. Make the “top categories for you” text a list element parent with the links below as a nested list.
3. Use image alt text that describes the purpose of the link when an image is the only link content.
When you are using an image as the only content of a link, your image’s alt text is going to define the purpose of the link. The best solution for this situation is to have the image and link text all be contained within the link. However, if using actual text for the link is not an option, the alt text of the image should be used.
When read by screenreaders, the user will hear the identification of the element type in order of nesting. So, for alt text on an image nested in a link, they will hear “link, image, [alt text]”. It is that context that we want to provide a text alternative to the meaning and purpose of the linked image.
For example, if we had an image of kitchen gadgets on our page that we wanted to link to our home & kitchen category, our link’s purpose is still to get the user to the Home & Kitchen category page. So, our alt text on the image should be “Home & Kitchen category”, the same as in the first example.
SEO Considerations:
Overall, what’s good for SEO is good for Accessibility. Best practices for search engine optimization and accessibility best practices are not in conflict when considering link text. The same things you want for accessibility make for good SEO practices. For instance:
BAD: “Click Here!” is bad for SEO just as it’s bad for Accessibility.
GOOD: “Home & Kitchen” would be good for both SEO and Accessibility.
For search engine optimization we also want page names that roughly describe the content of the page rather than just a string of random characters. If we are already naming our pages in a descriptive way for SEO, we can very easily use link text that roughly matches the page name. Doing so creates a good association for SEO as well as for accessibility.
Warning: exact matching every single page name throughout your site will potentially trigger spam filters.
That means that if your page pathname is “…/home-kitchen”, every single link to that page throughout your site should not be “home kitchen”. It would be more natural to have “home and kitchen”, “home & kitchen”, “home & kitchen category”, etc… Just don’t use something completely unrelated like “patio chairs” for a link to “…/home-kitchen”.
Other negative SEO practices such as keyword stuffing, spammy anchor text, and other techniques regarding links should also be avoided for accessibility.
Basic Do’s and Don’ts:
· DO use text that describes the purpose of the link
· DO make sure context can be determined programmatically
· DO keep links consistent throughout your site
· DO write clear and concise link text
· DO clean up empty or broken links
· DON’T use the “links to”, “link”, etc… in the link text (screenreaders announce that the user has encountered a link, so this will be repetitive)
· DON’T use ASCII characters or all Capital letters
· DON’T use URLs as link text
· DON’T use direct download links without notice
Easy Fails: (with links to more information)
· Link context is located in content that is not programmatically determinable
· Not providing an accessible name for an image that is the only content of a link
· Link context is located in content that is not programmatically determinable
· Not providing an accessible name for an image that is the only content of a link
For more information and to read the full guidelines from W3 you can go directly to their site.
No comments:
Post a Comment
If you have any doubts or questions, please let us know.