A11y: Links, Buttons, and Files
Links and buttons are considered navigable elements, meaning that when they are activated, they take you to another location.
Key Takeaways
- Only links are underlined, do not underline text that is not a link.
- Name links and buttons what they are. (Descriptive names, not ‘click here.’)
- Name files what they are. If using the download button, rename button.
Naming Links and Buttons
One of the main ways that assistive devices navigate a website is through the use of links. The link text will be read out loud whenever a link is accessed. For this reason, it’s important to name links what they are. If your links are named ‘click here’ or ‘read more,’ not only is it exclusive, but also fails to provide information on what the link does, or where it goes.
As part of the naming, leaving the URL in its raw state will result in the full URL being read. The only time this is appropriate, is if you’re linking to a main, short URL. Otherwise, it’s better to name the link without using ‘www’ or ‘.com’ in the text.
Good Examples
- Granite School District – named according to destination
- Koalas to the Max – also named according to destination
- tesla.com – even though the domain is used, it’s short and to the point
Poor Examples
- Read more – read more of what, exactly? No useful information in link text.
- Click here – Why? Where does this go? No useful information in link text.
- https://www.graniteschools.org/communications/district-community-council/ – the raw URL is very long, and will be read in length. This gets burdensome, particularly when the long URL has a bunch of randomized numbers and letters.
In the case of buttons, sometimes you may want to use a ‘Download’ button. If using the ‘download’ button, be sure to rename the button text so that it indicates what is being downloaded (e.g. Download Dress Code).
By default, the website templates will handle a link’s design appropriately. As long as the default settings are used, links will already be underlined as well as meet color criteria when hovered, clicked, and visited.
Naming & Linking Files
By default, WordPress uses the file name as the link’s text. For this reason, it’s important to name the file what it is before uploading it to the Media Library. Additionally, doing so will help when conducting searches in the media library. (For files, it’s the ‘Title’ field in the Media Library that determines the link text.)
It’s extremely helpful when linking to files to also include the type of file that it is in the link text.
Example without Download Button
Example with Download Button
When linking a file (using the ‘File’ block), you have the option of adding a download button in the block settings. We do not want repetitive links on the page because of the confusion this can cause, so it is best practice to either use a button, or a text link, do not use both.
Just like with text links, you should maintain the same naming standard and use the file name with the file type, and not just the word, “Download”
File names with dates
If your file name has a date in it (and it’s important to the link), please be sure to use a proper date format in the name: 12-03-2021, 2021-12-03 for example. (File names do not allow forward slashes, but you can use the slashes in your file’s link text.)