This post is also available in: Français (French)
Provide information regarding the function and the destination of the link.
The objective of this technique is to identify the purpose of a link from the link in its paragraph context. The paragraph enclosing the link provides context for an otherwise unclear link when the paragraph is the nearest enclosing block-level ancestor element. The description lets a user distinguish this link from links in the Web page that lead to other destinations and helps the user determine whether to follow the link. Note that simply providing the URI of the destination is generally not sufficiently descriptive.
Note: These descriptions will be most useful to the user if the additional information needed to understand the link precedes the link. If the additional information follows the link, there can be confusion and difficulty for screen reader users who are reading through the page in order (top to bottom).
The full entitled of a link is information included between <a> and </a> including <alt> and <title> attributes.
Provide an explicit <alt> attribute in image-link
In case of composite link (image + text), it is recommended to include image and text between <a>and</a>
Provide an alternative on <svg> links :
- role=« img » attribute on <svg> tag
- add tag <title> explicit after <svg> tag
- add unique id attribute on tag <title>
- add aria-labelledby attribute on tag <svg> with same value as id <title>
- focusable=« false » (Internet explorer)
<svg role="img" aria-labelledby="icone-svg-accueil" focusable="false">