Visual style

Images

Accessibility

Ensure you meet Section 508 requirements before you publish images and graphics online.

Alt text

You must add alternative text to every image you publish online. Alternative text, also called alt text or an alt tag, is a short written description of an image, which makes sense of that image when it can’t be viewed for some reason. Screen readers — or other assistive tech — provide information about the image’s purpose to the reader.

A best practice for writing effective alt text is to close your eyes and describe the image. Don’t just repeat the file name or describe it with proper nouns like, “King Henry” or “Central Park.”

Describing someone’s physical traits in a way that provides an equivalent experience to blind or partially sighted users can be challenging.

You can ask the persons appearing in the photos to describe themselves in 120 characters or fewer. This method can help reduce any bias that you may unintentionally insert. If you do not have a description from the subjects, follow this pattern: [Name, if a portrait] or [How many] [person, animal, object] [facial expression] and wearing [type of clothing] [where they appear to be or what they are doing].

Here are some examples:

One person smiling and wearing a red tank top standing outdoors.
A dark-haired person seated on a bench with elbows on knees and a neutral expression.

Sources: W3C — Web Accessibility Initiative | W3C — Resources on Alternative Text for Images

Color contrast

Ensure that color is not the only means of showing information in your images, since some users may not be able to perceive colors. For example, if a bar chart legend shows that one category is red and another is green, color blind users might not be able to see the difference. You can use labels, patterns, or other visual cues to make your image clear without relying on color alone.

Also, if your image contains text, make sure that the contrast between the background color and the foreground text color is a minimum of 4.5:1. Users with low vision have a hard time reading white text on a pale background, for instance. There is a multitude of contrast-checking tools available, such as the WCAG Color Contrast Checker, that can help you check that your images meet this accessibility standard.

Sources: Section508.gov — Accessibility Bytes No. 2: Color Contrast | W3C — Colors with Good Contrast

Copyrighted material use

You must get a release form to use the following images:

Photos that anyone shot with personal equipment and on personal time.
Images with people in them who are not federal employees on official time. Get a model release.

Images you can use without getting a release form include:

Photos of federal employees on official business and shot with government-owned equipment on official time.
Stock photos downloaded via the OSC licensed imagery service, but try to avoid using stock photos and choose authentic ones instead.
Graphics that federal employees created with government-owned equipment on official time.

Decorative versus information-carrying images

Decorative images

Avoid using decorative images. Decorative images don’t add information to the content of a page and they may interfere with a user’s ability to complete a task.

Images may be decorative when they are:

Supplementary to link text to improve its appearance or increase the clickable area
Illustrative of adjacent text but not contributing information
Identified and described by surrounding text

Examples of decorative images are:

Visual styling such as borders, spacers and corners
Images of text
Images of data tables

Use text instead of using images of text. Build actual HTML data tables instead of using images of data tables.

Information-carrying images

Only use professional-looking images that support your content, add value, and convey meaning.

Don’t use clip art, blurry, low resolution, or other generic images.
Don’t use decorative images.

Sources: NNGroup.com — Decorative images: delightful or dreadful? | NNGroup.com — Using imagery in visual design

Image file size and quality

Balance image quality with file size if your CMS doesn’t automatically do it.
Make image resolution at least 72 dpi.
Limit file sizes to no larger than 1MB to decrease page load times.
Use JPEG format for photos and GIFs for graphics or logos with text or hard edges within them.

Source: Siteimprove.com — How to use Siteimprove Quality Assurance to create a great website experience

Right justify images

In general, right justify images with text, especially at the top of a webpage. This layout makes text easier for users to read.

In a Microsoft Word or Google document, images should be inline, or else the reading order is lost.

See an example of a right-justified image.

GSA logo

The GSA star mark is our only official identifier and should follow brand specifications anywhere it is printed or used.

Page components

Use U.S. Web Design System components to ensure visual consistency. Each USWDS component has a dedicated page with examples of the component’s appearance, source code and guidance for usability, including when and how to use it. Ask for help from the Digital Communications PMO if you have issues trying to implement these components on GSA.gov or our intranet site.

Accordions

An accordion is a list of headings that hide or reveal additional content when selected.

We do not recommend using accordions, but there are cases where they may be appropriate.

Benefits include:

Users can see an overview of the page’s content without the text that’s hidden within accordions.
Users can control which accordion content to show or hide.

Drawbacks include:

Hiding content from the user and search engines. Users cannot use keyboard shortcuts such as Control or Command + F on this content to find keyword matches.
A risk of crowding so much content behind the accordion that the page will be slow to load.

What to use instead:

Well-written and structured content.
Content separated by headings or pages, if appropriate.
Anchor links to take users to particular sections of a page.

Buttons

The USWDS offers button styling for use in our digital content.

Only use button styling on behaviors like register, submit, or contact.

Do not use a button style to link from one page to another, as in a “learn more” or “read more” link at the bottom of a card component. In that case, just use normal text link styling set by the content management system.

Some examples of pages on this site that use correct button styling are a feedback page, our contact page, and the right column of our blog.

Videos

When used properly, informational videos can help people understand your message. Videos displayed on web pages should:

Provide essential information as text in addition to the video.
Not automatically play the video or audio when the page loads.
Give users a clear call to action indicating what to do after they watch the video.
Tell the user what the video contains so they can decide if it’s worthwhile to watch it.
Limit the video length to under five minutes. If you have a longer video, break it into modules of no more than five minutes each. Note: Videos for X cannot be longer than two minutes and 20 seconds.

Additionally, ensure that all media content conforms with Section 508 requirements for creating accessible synchronized media content, including the following:

Adding captions for all pre-recorded audio content in synchronized media, except when the media is a media alternative for text and is clearly labeled as such.
Providing a textual display of spoken dialogue and indicating other sounds on visual displays.
Adding audio descriptions as an alternative narration for information that is conveyed visually, unless described by the primary narration.
Including a transcript or text description of the information, speaker changes, and other sounds for audio and video only.

Sources: Nielsen Norman Group — Video Usability | Digital.gov— Making Multimedia Section 508-Compliant and Accessible