Examples: https://share.getcloudapp.com/P8uNmnv1
Key Takeaways:
Each link should contain text content, or an aria-label that indicates where the link points to.
Each link should have unique text
Should avoid generic text like "Learn More" or "Get Started", instead opt for more descriptive language like "View loan rates", and "View Choice Checking"
aria-labels can be used in cases where generic text must be used -
Span tags with the CSS class "sr-only" ("screen-reader-text" in legacy themes) can be used in cases where you don't have access to add an aria-label
It is acceptable for links with the same URL to have the same link text. This may still show as a false-positive if the URLs are formatted differently,e.g. mysite.com/loans vs /loans, these are the same link, and the redundancy is acceptable, though some scans may incorrectly report it as an error. If unsure, it's better to err on the side of caution
What to check:
Is the link missing inner text?
Ex - cards with missing text (image contains text, but there is no text which can parsed by a screenreader) https://share.getcloudapp.com/P8uNmnWj
Does the page have more than one link with the same text? Ex: "Learn more"
Do those links go to the same page? If not, their text should be revised to be more descriptive
Comments
Please sign in to leave a comment.