Overview
Follow this guide to ensure that any links you add to your Dornsife WordPress site are accessible to people using assistive technologies such as screen readers or keyboard-only navigation.
Writing descriptive links
When inserting links in your content, make sure that the link text describes the destination clearly and concisely.
-
Correct: "For more information about accessibility, visit the Web Accessibility Initiative website."
-
Incorrect: "For more information about accessibility, click here."
- Why is this less accessible? People using a keyboard to navigate your page will skip the contextual information outside the link, and will not know what "click here" is referring to.
-
Incorrect: "For more information about accessibility, visit https://www.w3.org/WAI/fundamentals/accessibility-intro/."
- Why is this less accessible? People using screen readers will hear the entire URL being read to them, one letter at a time. Additionally, URLs are often harder to understand than a simple description of what can be found at the URL.
Editing link text to be more descriptive
Quick guide
- Click the link text you want to edit.
- Click the Edit
icon.
- Click the Link options
icon.
- Make your edits to the Link Text field, and click Update.
- You can now save or update the Page.
Detailed guide (with screenshots)
- Click the link text you want to edit.
- Click the Edit icon.
- Click the Link options icon.
- Make your edits to the Link Text field, and click Update.
- You can now save or update the Page.
Adding link text to a component
In some components, adding a link just requires you to select the text and then click the Insert link 
icon. In other components, you must use the Select Link button, and we provide steps for this below.
In all cases, it's important not to leave the Link Text field blank: though the link text may not be visible on the published page, it will be accessible for screen readers.
Quick guide
To add a new link:
- Click Select Link.
- Fill in the URL and Link Text fields, and click Update.
- You can now save or update the Page.
To edit the link text for an existing link:
- Locate the Link field:
- If there is no text preceding the URL: the link text is missing; continue to the next step.
- If there is text preceding the URL: the link text is present and no action is needed.
- Click the Edit
icon.
- Fill in the Link Text field, and click Update.
- The Link field for the component updates, and your link text should now appear before the URL.
- Repeat steps 1–3 for each link on the Page where there is no link text preceding a URL.
- You can now save or update the Page.
Using the aria-label attribute
If your linked text is not sufficiently descriptive and you can't use the method above to edit it, you can add the description using the aria-label attribute. How does the aria-label attribute make linked text more accessible? Screen readers will detect and read the descriptive text contained in the aria-label.
To use this option, you must be comfortable editing HTML. Otherwise, we recommend editing the link text itself.
-
Correct:
<a href="https://dornsife.usc.edu" aria-label="Learn more on the USC Dornsife homepage">Learn more</a>
-
Incorrect:
<a href="https://dornsife.usc.edu">Learn more</a>
On your Dornsife WordPress site, you can edit HTML in the Text tab of a component:
Quick guide
- Click the Text tab. If the component does not have this tab, you will be unable to add an aria-label.
- Locate the link, which is indicated by the <a> tag:
- <a href="linkURL">linked text</a>
- Add the aria-label in the following format:
- <a href="linkURL" aria-label="description goes here">linked text</a>
- For example:
<a href="https://dornsife.usc.edu" aria-label="Learn more on the USC Dornsife homepage">Learn more</a>
- You can now save or update the Page.
Detailed guide (with screenshots)
- Click the Text tab. If the component does not have this tab, you will be unable to add an aria-label.
- Locate the link, which is indicated by the <a> tag:
- <a href="linkURL">linked text</a>
- Add the aria-label in the following format:
- <a href="linkURL" aria-label="description goes here">linked text</a>
- For example:
<a href="https://dornsife.usc.edu" aria-label="Learn more on the USC Dornsife homepage">Learn more</a>
- You can now save or update the Page.