Accessibility

It's important to remember that the navigation of your website is a wayfinding tool for the information on your website. While it may seem more convenient to link directly to external sites and services that relate to your office, using your navigation to link to anything other than pages within your website actually subjects all users to a jarring experience.

For users employing assistive devices, it's a particularly negative experience, as it forces them to reorient to a completely new, and unexpected, user interface that may not be accessible.

For example:

When you link to an externally-hosted online application, users who cannot see the screen may have no idea that they're on a completely new website. The new webpage or web application may not be coded properly for screen reader use, so they might struggle to understand where they are and what they can do. Additionally, if the form fields on the application are not coded for accessibility via keyboard navigation, users with motor disabilities who cannot use a mouse to click into the fields will be unable to complete the form.

This will all add up to a frustrating experience for your users that began when they were unexpectedly sent to this new website/web application without warning, context or a choice.

Always remember, when creating links in your menu/navigation:

1. Do not link to documents in your navigation. Instead, find or create a page on your site that provides context about what's in the document and link to the document within that page. Remember to follow the rules of contextual document links.
2. Do not link to external websites from your navigation. Your navigation should help users find information on the website they are currently on, not some other website. This includes other websites that you may manage. Remember, navigation is about finding information on your website, it's not just about finding information that may pertain to your office's services. Use contextual links within the body of a page or sidebar Promotions to link to external websites.
3. Do not link to external applications from your navigation. Similar to the issues with linking to external websites, linking to web-based applications from your navigation also creates accessibility issues and a negative user experience. Use contextual links within the body of a page or sidebar Promotions to link to external applications.

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 or is read aloud via a screen reader to these users so that they are also aware of what is in the image.

The alternate text field on images is a required field in GW Drupal, however, to meet accessibility standards, it is important to provide effective alternate 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 use posters as images and especially not as a solution to providing critical information.
• Do not use file names or event names as alternate text, as this provides no visual context for someone who cannot see the image.

Examples of Alt Text on Images

Subheads should be used to identify and define topics and subtopics on a webpage. When properly applied, subheads create a positive and intuitive user experience for all website visitors.

When subhead styles are applied to text, that text gets wrapped in HTML tags that screenreaders use to aid users who cannot read the page for themselves. A user using screenreader software may opt to "scan" the text by only having the subheads on the page read aloud in order to get right to the information that they need. If subheads have not been appropriately applied, users may miss information or become frustrated.

• Never use subhead styles for visual prominence
• Never use subhead styles to promote information
• Apply subhead styles in sequential order
• Two subjects at the same level of importance can share the same subhead style
  • Subtopics should use the next level down

Assistive devices do not look to see where you are linking to. They look at the link text to see what you say you are linking to.

For that reason, links should always be contextual, meaning that the linked text should be the plain language description of:

• the location you are linking to,
• the document you are linking to, or
• the action the user will take

In the same way that a screen reader can "scan" a webpage to only read the subheads, it can also "scan" the page to only read the links aloud. When that happens, it's important for the link text be a clear indicator of what's after the click.

1. Do not use the raw URL
   • Ex: www.gwu.edu
2. Do not use vague language, such as 'click here', 'read more' and 'more information'
3. Do not use the same language to link to different things on the same page
   • Ex: linking "Program Information" in two places on the same page to two different programs

Examples of strong vs weak link text

Bad: For more information about the university, go to www.gwu.edu.
Bad: For more information about the university, click here.
Weak: More information about the university can be found on the George Washington University website.
Stronger: More information about the university can be found on the George Washington University website.
Strongest: More information about the university can be found on the George Washington University website.

Linking to documents

When linking to documents, it's important to include the document type in parentheses and to include that parenthetical in the link. Some document types are more accessible than others, and different devices will treat document links differently than website links. For instance, most mobile phones will download documents automatically when a document link is clicked, giving no warning to the user.

Providing the context that the link is to a document lets users make the decision on how to proceed before clicking the link. Some users may opt to call in for assistance, while others may choose to switch devices for a better user experience.

For example: GW's Visual Identity Standards & Guidelines (PDF) provides in-depth information and guidance on how to properly use the university's logos and branding components for a variety of use cases.

Accessible videos should have captions and/or written transcripts available for users with hearing impairments. These are also an accessible option for users who cannot play the sound for technical or situational reasons.

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.