Links
Links allow users to click their way from page to page, or to download files.
How to use this component
Links can be set up by using the anchor tag.
All links should be descriptive. Never use words like “click here”, “open link”, “read more”. For more information on this see our links accessibility guide.
- All links should change appearence once hovered or focused to give visual indication for keyboard or other accessible navigation.
- If a link is within page text then the link should be obvious. They should be underlined and be a different colour to the main text.
- If linking to an external website then the link should open up inside a new tab. The link should visually show it is an external link by using the external icon and inside the link should be a hidden line of text for screen readers to say the link opens in a new window.
- If a link is pointing to a file download then we should show the file size witihin the link following a standard convention as shown in the examples below.
Code Resource
Example of a <a href="#">link within some</a> normal text.
<br>
<br>
Example of an <a href="http://twitter.com/cardiffcouncil">external link <span class="sr-extlink">External link opens in a new window</span><span class="external_icon"></span></a>.
<br>
<br>
<a href="#" target="blank">A link to a file download (5 MB PDF)</a>
<br><br>
<h3>Specific file links</h3>
<a title="Download a Direct Debit application form " class="document_link pdf_link shadow" href="#" target="_blank">Download a Direct Debit application form to return by post (189 KB PDF)<span class="ms-rtestate-read ms-reusableTextView"><span class="sr-extlink">Link opens in a new window</span><span class="external_icon"></span></span></a>
<a href="/ENG/Jon/test-page/Pages/Test" class="document_link word_link shadow" title="Test" target="_blank">Test Word document link <span class="ms-rtestate-read ms-reusableTextView"><span class="sr-extlink">Link opens in a new window</span><span class="external_icon"></span></span></a>
<a href="/ENG/Jon/test-page/Pages/Test" class="document_link xl_link shadow" title="excel" target="_blank">Test Excel document link <span class="ms-rtestate-read ms-reusableTextView"><span class="sr-extlink">Link opens in a new window</span><span class="external_icon"></span></span></a>Working Example
Example of a link within some normal text.Example of an external link External link opens in a new window.
A link to a file download (5 MB PDF)