Standards and Best Practices

The following standards and guidelines provide tips for addressing some of the most common accessibility issues and reflect accepted best web development practices. 

We aim to meet these best practices with the POUR principles in mind: 

  • Perceivable: The information should be presented in a way all users can “see” or perceive it. No content should be hidden.
  • Operable: The user interface should be operable with any device or software tool, such as a keyboard, touchscreen, or screen reader.
  • Understandable: In addition to being able to operate the user interface, users must be able to understand the information presented.
  • Robust: Content should adhere to guidelines and best practices to ensure it can be interpreted by a variety of devices and assistive technologies.

It's important to ensure foreground and background colors have enough contrast so that people with low vision, color blindness, or other visual impairments can read your content.

To meet WCAG AA compliance for color contrast, visual presentation of text and images of text must have a contrast ratio of at least 4.5:1. Use tools such as the WebAIM Color Contrast Checker to confirm whether your color combinations meet accessibility guidelines. 

All content on digital signage must meet color contrast guidelines. Any videos playing on digital signage must be captioned. 

Alternate Text (a.k.a. Alt Text)

Users with visual impairments, cognitive challenges or technical limitations may not be able to see the images that are on a webpage. For this reason, it is necessary to provide alternate text on all images. The alternate text information is then displayed as plain text, read aloud via a screen reader, or output using a braille reader. 

Follow these tips for effective alt text: 

  • Your text should be descriptive, but not overly verbose. For instance, describe the general activity or name the person in a headshot.
  • If there is text in the image, all of that text must be included in the alternate text field.
    • For this reason, it is not recommended to repurposes posters as images, especially not as a solution to providing critical information.
  • Do not use file names such as "photo1821.jpg"as alternate text, as this provides no meaningful information for someone who cannot see the image.
  • Redundant words such as "image of" are not necessary, as a screen reader user will typically already know they have encountered an image.

Text on graphics

When possible, use text rather than images to convey information. Text can be magnified, interpreted as braille, or read aloud using screen readers by visually-impaired users.

Using text on graphics is not best practice and should be avoided when possible. However, in instances where text inside of graphics is used (e.g., logos), you must provide alt text that communicates the text to screen reader and assistive technology users.

Color Contrast

If your image includes text or is otherwise critical to understanding the content on your page, the colors used must adhere to WCAG AA color contrast ratios.

Create contextual links

Link text should be unique within a page, meaningful when read out of context, and should help users to understand their destination if they click on it. 

Link text such as "learn more" or "click here" provides no information about where the link goes and should be avoided. This is not helpful to screen reader users who may be navigating links out of context. Instead, use descriptive text such as "Click here to learn more about our summer reading program" or simply "Learn more about our summer reading program" to help screen readers provide meaningful context about links.

Styling

Color should not be the only indicator used to communicate a link. Indicate links using a variety (at least two) of indicators. Indicators can be things such as colored text, styled text (e.g., underlined, weighted, or italics), etc.

All images must include appropriate alt text. 

All text within the email body and in graphics should meet color contrast guidelines. 

Use of text headings should follow best practices. 

Microsoft Office documents should meet accessibility guidelines, including:

  • all images must have alt text
  • headings are used properly throughout the document
  • a logical flow for someone navigating the document using a screen reader 

When possible, consider whether the content must be postedin a Microsoft Office format or if it could be posted online as a webpage. 

GW IT offers Microsoft Office 365 free to all students, faculty and staff. We recommend using this tool and taking advantage of its built-in accessibility features. 

Assistive technologies rely on the markup of a page to determine structure. This in turn allows users of those technologies to skim page content just as a non-disabled person would.

Page titles and headings must be presented in a logical, chronological order. H1 tags should be used only once per page and be followed by H2, H3, all the way to H6 tags where applicable.

Do not skip levels (e.g., H2 followed by H4). Do not use text formatting, such as font size or bold to give the visual appearance of headings. Likewise, do not use headers to achieve visual results only.

Effective use of headings also promotes better indexing with search engines. What's good for accessibility is often good for SEO!

PDF documents should meet accessibility guidelines, including:

  • all images must have alt text
  • headings are used properly throughout the document
  • a logical flow for someone navigating the document using a screen reader 

When possible, consider whether the content must be in PDF form or if it could be moved to a webpage. 

Do not post PDFs that are one single graphic. You can test this by seeing whether or not you can easily highlight text within your PDF. 

Social media websites give you plenty of tools to make your posts accessible, if you know where to look. Here are GW's expectations and where to find accessibility features on Twitter, Facebook, and Instagram.

Twitter

All images must have alt text. Your account settings have an "Accessibility" menu. Check the “Image descriptions” box in this section and you’ll be able to add alt text to every image you tweet.

Videos must be captioned. You can add captions to a video using Twitter's Media Studio. Upload your video and caption file there before you tweet it.

Facebook

All images must have alt text. Facebook will auto-generate alt text when you post images, but sometimes you'll want to write your own, especially if your image has text. You can edit the alt text after you post by going into “Options”, a link in the bottom-right corner when you’re looking at an image.

In general, however, we recommend avoiding large amounts of text on Facebook images. 

All videos on Facebook must be captioned.

Instagram

All images must have alt text, and/or any text represented in the image should also be in the post description. Add alt text to your images by tapping on “Advanced Settings” when you’re creating a post. You can always go back and edit the alt text after you post on Instagram.

When posting Instagram Stories, make sure your text has enough contrast with its background color.

LinkedIn

All images must have alt text, which is referred to as the "image description". 

Third party software tools used to conduct business at GW, such as Calendly or Salesforce, must meet WCAG AA standards. This includes software obtained via formal contract process and purchase order as well as smaller tools purchased via PCard. 

While some aspects of third party software tools are outside our control, GW departments are expected to do their due diligence on the following:

  • Ensure all software configurations pertaining to the visual template, such as color palette and or a GW-branded template, meet color contrast guidelines
  • Obtain a Voluntary Product Accessibility Template (VPAT) document from the vendor so that GW has a record of the tool's current accessibility 

As with all digital content, videos posted on websites or social media need to be in compliance with accessibility laws. In most cases, this requires some combination of captioning and/or written transcripts.

Produced Videos

For non-live video captioning we recommend Rev, which charges a nominal fee to run the captions. Always check these for accuracy before posting. Videos under 10 minutes are usually captioned within 24 hours. 

Livestream Videos

For live captioning when we stream video, we recommend AI Live. Schedule your live captioning at least 72 hours in advance. 

Spontaneous live streams, such as those you might do "in the moment" for social media, must be captioned within 48 hours. 

Several social media sites, including Facebook and YouTube, have step-by-step instructions for captioning videos. On both sites captions can be automatically generated or you can upload a file. You’ll still need to review these auto-generated captions because they’re not always 100% accurate.

Videos with Visuals

If your video leans heavily on visuals, consider the experience for someone who is blind or low vision. If the visuals are key to understanding the video, create a written transcript that can be read with a screen reader. Don't forget to ensure that all visuals meet color contrast guidelines. 

Have questions? Email [email protected] or visit the Marketing & Creative Services online strategy team at office hours for further assistance.