Pattern Library
Links
On this page:
Descriptive Text
Link text must be descriptive of the target content.
Read more about the Mayor's State of the City Address
Watch the Mayor's State of the City Address video
Shortened link text, like "Read more" or "Watch Video", can be achieved by hiding the descriptive text with the "visuallyhidden" helper class. This ensures that the descriptive text is still readable by screen readers.
Read more about the Mayor's State of the City Address
Watch the Mayor's State of the City Address video
Incorrect
Correct
Internal Links
Internal links, or links that point to another www.sandiego.gov page, must open in the same tab to maintain a favorable user experience since opening links in a new tab prevents users from using the Back button to return to the previous page.
External Links
Links to external sites must be denoted with this icon: . The icon is placed immediately after the link. The text "(link is external)" must be appended to the link text but hidden by the "visuallyhidden" helper class. The external site must open in a new browser tab or window.
Note: this link behavior is automatically handled by Drupal.
Links to Images
Links should not directly target images. Developers should embed the image within an HTML document so that alternative text can be provided for the images.