Content style guide
Links
Considerations
- We use links to connect Veterans with related information that may be helpful.
- We also use links to help us centralize information, rather than repeating content in multiple places. This helps us update content more efficiently and keep content accurate.
- Too many embedded links can be distracting or overwhelming to people with traumatic brain injuries or other cognitive impairments.
- External links can be disorienting for all people, but especially people who use screen readers. We want to be clear about where links are taking people.
- For issues not covered in this style guide, refer to the U.S. Web Design System (USWDS) on links. Review link guidance on the USWDS website
Link text
- Use natural and descriptive language.
- Describe the purpose of the link and the destination if it’s taking the reader outside of VA.gov.
- Don’t make the link so long that the relevant words get lost.
- Avoid “Click here,” since not all people are physically clicking links.
- Avoid generic link text like “Learn more” and “Read more” by themselves.
- Avoid using words that assume certain abilities, like “See,” “Hear,” and “Watch.”
Like this
Use natural language, and link relevant words
If your disability gets worse, you can file for an increase in compensation.
File for a VA disability compensation increase
Apply for a United States burial flag to place over a casket or coffin, or place with an urn.
Learn more about burial flags
Not this
Avoid “click here” and generic CTA text
Click here to file for a VA disability compensation increase if your disability gets worse.
Apply for a United States burial flag to place over a casket or coffin, or place with an urn. Learn more
Formatting
- Don’t punctuate link text. Exception: Question marks and colons are OK if they’re part of the link copy.
- Create space between different links. Clustering links together can make it hard for users to select the intended link, especially on a touch screen device, like a smartphone.
- In general, put a link on a separate line to help it stand out. Exception: Putting a link at the end of a sentence is OK if space is limited, like intro copy or alerts.
Like this
- Trouble breathing
- Persistent (continuing) pain or pressure in the chest
- Bluish lips or face
Not this
Use CTA links to call out actions
CTA links are standalone hyperlinks that are calls to an action, but that don’t warrant a primary button CTA.
We generally reserve button CTAs to launch an application, to sign in, or other primary, essential actions on a page. But there are other kinds of actions that may call for a CTA as a text link, like downloading a form or learning about important information (like eligibility or copay rates, etc.).
Like this
In this example, the link is an action related to the topic, but it isn’t the primary CTA, which is to use the online application.
You can apply online or mail your Application for Burial Benefits (VA Form 21P-530).
Not this
In this example, the action gets lost as an embedded text link.
You can apply online or mail your Application for Burial Benefits (VA Form 21P-530).
Linking to documents and other file sources
- Avoid linking to PDFs as much as possible.
- If a link opens a calendar, YouTube video, XLS, or other file format, add the relevant icon from the Components section in the Design System. Review examples of link variations in the Components section
Linking to external sites
- Use text that tells the reader where the link takes them. Example: Check COVID-19 symptoms on the CDC website
- Consider using an aria-label to create a screen reader-only label. Aria-labels can be helpful in specialized instances where there’s a clear reason to use separate text for people who use screen readers. The aria-label may append or replace text within a link to provide context about where the link goes.
- Explain when a link is opening in a new tab with text, not an icon. Add “(opens in new tab)” to notify users when a link is opening in a new tab. In standard link text, we avoid using the new window icon, since it can cause confusion. Within components that have space constraints, the icon is acceptable.