Accessible link text

People who use screen readers may scan pages and listen to the links. Therefore, ensure that the ‘purpose of each link can be determined from the link text alone’ (Web Content Accessibility Guidelines 2.1).

For example, instead of:

To learn more about how to apply, click here.

write:

Learn more about how to apply.

Add an anchor using the Components Editor

1. Go to the page where you want to add the anchor.
2. Edit the page with the Components Editor.
3. Place your cursor in the page where you want the anchor.
4. Select Add links and anchors > New anchor in the left-hand menu.

5. Enter an appropriate anchor name in the Add a new anchor section of the Links and anchors popup.

   Note: the anchor name must start with a letter and can be followed by any number of letters, the characters - _ : . and numbers. It cannot contain special characters such as $ / * or spaces.

6. Select Add anchor.
7. An icon representing the anchor is added to your page. You can hover over this to see the name you entered.
8. To change an anchor's name, select the anchor icon, then Edit anchor.

Add an anchor using the old visual editor

1. Go to the page where you want to add the anchor.
2. Edit the page with the old visual editor.
3. Place your cursor in the page where you want the anchor.
4. Select Insert a > Anchor.

5. Enter an appropriate anchor name in the Id box.

   Note: the anchor name must start with a letter and can be followed by any number of letters, the characters - _ : . and numbers. It cannot contain special characters such as $ / * or spaces.

6. Select Save.

Link to a web page or anchor using the Components Editor

1. Go to the page where you want to add the anchor.
2. Edit the page with the Components Editor.
3. Highlight the text you want to act as the link.
4. Select the Add/edit link button in the toolbar. Alternatively, select Add links and anchors > Web link in the left-hand menu.
5. In the Add a link to this content section of the popup that appears, specify the link URL according to what you want to link to:

   • An anchor: use the Make a link to an existing anchor on this page dropdown to choose the anchor you want to link to. The anchor name, prepended with #, is added to the Link URL box. For example, if the anchor you selected is properties, #properties appears in the Link URL box.

     Tip: to link to an anchor on a different page, specify the URL for the page as below, then add the name of the anchor, prepended with #, to the end of this URL. For example, if the URL for the page is ../different-page and the name of the anchor on that page is some-anchor, the link URL should be ../different-page/#some-anchor.

   • A SiteBuilder page: select find, then in the popup that appears browse to the page you want to link to and select it – the relative path appears in the Link URL box.

     Note: for a link to a SiteBuilder page, use a relative path. The above method for specifying the URL inserts a relative path by default.

   • An external page: copy the URL of the target page, for example https://www.hesa.ac.uk/, from the address bar of your browser and paste it into the Link URL box.

6. If you want the target page to open in a new browser tab or window, select the New window radio button. Generally, we recommend not forcing web pages to open in a new browser window.

7. Select Add link.

   Tip: to edit an existing link, place your cursor within the text that acts as the link and then follow the process above from step 4.

8. To check that your link works as expected, select Preview.
9. When you've finished editing your page, select Publish.

Link to a web page or anchor using the old visual editor

1. Go to the page where you want to add the link.
2. Edit the page with the old visual editor.
3. Highlight the text you want to act as the link.
4. Select the Link button in the toolbar. Alternatively, right-click the highlighted text and choose Link.
5. In the popup that appears, specify the URL according to what you want to link to:

   • An anchor: in the URL box, enter the anchor name prepended with #. For example, if the anchor name is properties, enter #properties in the URL box.

     Tip: to link to an anchor on a different page, specify the URL for the page as below, then add the name of the anchor, prepended with #, to the end of this URL. For example, if the URL for the page is ../different-page and the name of the anchor on that page is some-anchor, the URL should be ../different-page/#some-anchor.

   • A SiteBuilder page: select Find, then in the popup that appears browse to the page you want to link to and select it – the relative path appears in the URL box.

     Note: for a link to a SiteBuilder page, use a relative path. The above method for specifying the URL inserts a relative path by default.

   • An external page: copy the URL of the target page, for example https://www.hesa.ac.uk/, from the address bar of your browser and paste it into the URL box.

6. Optionally, amend the text in the Caption box. This is the text on your page that acts as the link. Any changes you make here are reflected on your page after you insert the link.
7. Optionally, enter some text in the Tooltip box. This text appears when a user hovers over the link.
8. If you want the target page to open in a new browser tab or window, select Open this link in a new window. Generally, we recommend not forcing web pages to open in a new browser window.

9. Select Insert.

   Tip: to edit an existing link, place your cursor within the text that acts as the link and then follow the process above from step 4.

10. To check that your link works as expected, select Preview.
11. When you've finished editing your page, select Publish.

Related articles

• Check for broken links
• Previous and next page links

Support

Email webteam at warwick dot ac dot uk
How to report a problem