Components

Anchor Link component user guide

Anchor links are used to add anchors to the text, to link users to content on the current page.

 

Anchor Links can be applied through the Text component.

Authoring Fields

Adding anchor links to the page

1. Author both the text that will be linked to, and the table of contents text that will be used to send the user to that part of the page.

a. Example: on a page describing the three types of elections, there will be three anchor links. The author added the text that will be linked to (a section on general elections), as well as the table of contents text.

Sample text on page shows a list of topics, followed by each in more detail- a candidate for anchor links.,

2. In the General Elections section, click the edit toolbar.

3. Highlight the text that should be linked to (“General Elections” heading), then the anchor icon.

4. Add the “#” symbol, then the name of your anchor. It is recommended to use short, simple names or numbers. If there are many anchor links on a page, it is recommended to keep a log of their names.

5. Click the checkmark. An anchor symbol now appears next to the linked text.

6. Return to the table of contents section. Click the edit toolbar.

7. Highlight the text that should link to the General Elections heading, then the link icon.

8. In the Path field, add the “#” symbol, then the name of the anchor link.

9. Click the checkmark.

10. The text in the table of contents is now blue and underlined. When clicked, the user will jump down the page to the anchored text.

The sample text from the image above now shows the "General Elections" topic as an anchor link.

Accessibility

1. There are no specific accessibility notes for anchor links.