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: Section 508.gov — Authoring Meaningful Alternative Text | 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, or the WebAIM 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.
There are instances where it’s OK to left justify images. If your image is on the left and you have corresponding text on the right, consider using a grid to keep the text from wrapping around the image.
See an example page featuring a series of left-justified images in a grid.
In a Microsoft Word or Google document, set your images to be inline with the text, or else the reading order is lost.
See an example page that contains 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.
See also FAQs.
Sources: GOV.UK design system — Accordion | Nielsen Norman Group — Accordions on Desktop: When and How to Use | U.S. Web Design System — Accordion
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.
See also Button text and form labels.
Source: U.S. Web Design System — Button
Grid
Put simply, a grid system uses a series of invisible rows and columns to give you options to lay out your web content.
The USWDS grid system has rows that flex with the height of the content you put in them, and each row has an organized grid structure of twelve equal columns per row. You may group all of the rows into a container, if needed. Lots of options exist for tailoring the column widths, spacing, and placements as part of the system.
You can intersperse grids with other typical page content — headers, paragraphs, tables, and so on. You can use them to place things side by side, for example, a map image next to its legend, or two even columns of short unordered list items. You can style them with borders or background colors, where it fits with the site style.
Use a grid when it would benefit the page layout and its usability.
If the user is going to filter or sort data or complete if-then statements, use an HTML table to display it — not grid columns.
Source: U.S. Web Design System — Layout grid
Videos
When you use informational videos properly, they help people understand your message. Web pages displaying videos 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