Hyperlink standards
General guidelines
Embed URLs into the most relevant words or phrases. Avoid "click here."
Avoid embedding links into entire sentences or long phrases.
For email addresses, type the full email address on the page, and then embed it with "mailto: and embed the email address. This provides an option for users who are at a public computer to copy and paste the address into their email client without launching a default client. Internet Explorer automatically embeds the email address. Chrome, Firefox and Safari requires you to manually embed the email address. Example: Contact the mayor at
mayor@charlottenc.gov for more information.
Link usage best practices
Use hyperlinks to provide supplemental information such as definitions of terms and abbreviations, reference information and background reading. Example: What is the difference between
Medicare and
Medicaid?
Group all minor, illustrative, parenthetic or footnote links at the bottom of the document where they are available but not distracting to the reader.
Outside links can add credibility. They show that the authors have done their homework and are not afraid to let readers visit other sites.
City policy excludes from its website all commercial advertising, links and promotional material that does not serve or promote a public purpose of the City.
View the City's linking policy.
Linking to large files
Clearly notify users of links that open documents that are more than 5MB by listing the file size parenthetically to the right of the file name. Example: View the
Urban Land Institute presentation (11MB)
Linking to sites outside CharlotteNC.gov
View the City's
linking policy to learn more about guidelines used to determine when links are allowed for inclusion on CharlotteNC.gov. Per ADA requirements, links that point to sites outside of CharlotteNC.gov will automatically generate an icon
that indicates the user is leaving our site.
Setting links to open in new windows
Per ADA requirements, users must be alerted if a link opens a new window, so use this feature sparingly. Always notify the user that the link will open a new window.
View the ADA guidelines (opens in a new window).
Examples of hyperlink usage
Why? Redundant; screen readers provide the word "link" automatically.
Write this:
Apply for benefits
Don't write this:
Follow this link to apply for benefits
Why? Unnecessary/wordy
Write this:
Find out more about Medicare
Don't write this:
More information
Why? Links need to make sense out of context
Write this: Visit
CharlotteNC.gov
Don't write this:
http://charlottenc.gov
Why? Complete URLs are not "human-readable" by screen readers