Unraveling the mystery of the perfect link, we delve into its significance in the digital world. We explore its power, its impact on SEO, and how it can transform your online presence. A journey into the heart of connectivity awaits.
All links have one thing in common: when you click on them, they take you somewhere else
Anchor texts are fundamental to a good user experience
- Make link texts meaningful and understandable on their own
- Visitors scan web pages for what they are looking for
- Links stand out in the text so make the text about where they lead
How do you link to a file to be downloaded?
A link is a promise, not a surprise
- Is there text on the image? Is that still readable when the web page is zoomed? Is it clear where the link leads to?.
- What should the alternative text for the image be?
Use an image or font icon and add the word “Twitter” to the link.
Embed the image in the link, give the image the alternative text “Twitter”, and give the link its accessible name using aria-label=”Twitter”.
- Internal links (also called in-page links) jump to a different point on the same webpage.
Make it stand out as a link
A visitor should be able to distinguish a link in a paragraph of text
- Underlining is the universal pattern for a link. Users get it right away
- Use the visitor’s knowledge to your advantage and make a link look like a link – don’t reinvent the wheel
The Nielsen Norman Group defined this as the 4Ss:
Specific link text sets sincere expectations and fulfills them, and is substantial enough to stand alone while remaining succinct.
Colour contrast
Make sure the colour-contrast ratio between text and background is at least 4.5:1 and, for the underlining itself, at least 3:1
Design a focus style that goes well with the overall design
To make sure a link will work properly on all devices, use a real element, with an href containing a url.
- Omitting the href attribute from a link stops the link from getting keyboard focus.
Member discussion: