Accessibility

Ensuring that website content is accessible for all is a best practice and a legal requirement for website owners and content managers at GW.

To aid in meeting these standards, there are a number of resources and training on web accessibility available to help.

Web accessibility standards are met by focusing on three areas: the code, the design and the content.

Accessibility and Web Development at GW

The codebase for the GW Drupal website service is managed and maintained in partnership between GW Information Technology (GW IT) and the GW Office of Communications and Marketing. 

If there is an issue in GW Drupal's code that does not meet digital accessibility standards, please email onlinestrategygwu [dot] edu to provide more information.

Accessibility and Web Design at GW

The Enterprise-Wide Digital Team also designs the themes for GW Drupal in compliance with the university's visual identity standards and guidelines, and web accessibility standards. This includes ensuring that colors and font sizes meet guidelines for users with visual impairments, subheads are designed for screenreader and keyboard navigation standards, and many other web accessibility best practices.

If there is an issue in GW Drupal's design that does not meet digital accessibility standards, please email creativeservicesgwu [dot] edu to provide more information.

Accessibility and Web Content at GW

The accessibility of the content on GW Drupal websites is the responsibility of the site owner(s) and/or content manager(s) for each website. Ensuring that content is accessible typically comes down to three things:

1. Adding alternate texts on all images
2. Using subheads appropriately
3. Creating contextual links

Each of these tasks is managed within the text editor of pages in GW Drupal.

The alternate text field on images is a required field in GW Drupal, however, to meet digital 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.

Navigation

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 digital 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 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 digital accessibility issues and a negative user experience. Use contextual links within the body of a page to link to external applications.

Images

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 digital 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

Adding Alt Text to Images

• When uploading an image to the media library, enter a succinct description of the image in the alt text field.

Changing Alt Text on Images

• Either select the image in the media library or page body section and click the gear icon. 
• Update the description in the alt text field.

 

Subheads

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

Hyperlinks

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 to be a clear indicator of what's after the click.

   Do not use the raw URL - 

• Ex: www.gwu.edu

   Do not use vague language, such as 'click here', 'read more', and 'more information'

   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.

   Do not use vague language, such as 'click here', 'read more', and 'more information'

   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

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 to be a clear indicator of what's after the click.

   Do not use the raw URL

• Ex: www.gwu.edu

 

Tables

To make your tables are accessible, be sure to add header rows and/or columns where appropriate. You can do this by using the floating table configuration options and identifying header rows and/or columns.

Image

Video Captions

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.