Good: Spring flowers bloom across Kogan Plaza
Okay: Kogan Plaza
Bad: Kogan
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 GW Communications & Marketing. GW Communications & Marketing helps to identify the requirements for GW Drupal based on the needs of site owners and content managers, while GW IT ensures that the code meets these requirements as well as web accessibility standards and best practices.
If there is an issue in GW Drupal's code that does not meet accessibility standards, please email [email protected] to provide more information.
Accessibility and Web Design at GW
GW Communications & Marketing 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.
Because of this - as well as the fact that GW Drupal is an enterprise service at GW - we do not support requests for changes to the themes' styles of GW Drupal unless the request will meet web accessibility standards and will be a benefit to all users of GW Drupal.
If there is an issue in GW Drupal's design that does not meet accessibility standards, please email [email protected] 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:
- Adding alternate texts on all images
- Using subheads appropriately
- Creating contextual links
Each of these tasks is managed within the text editor of pages and Promotions in GW Drupal.
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:
- 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.
- 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.
- 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
Good: GW Chair of the Board of Trustees, Nelson A. Carbonell, Jr.
Okay: Nelson A. Carbonell, Jr.
Bad: Nelson headshot
Good: Apply for GW Jobs
Okay: GW jobs application
Bad: jobs promo
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.
- 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.
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.
GW Drupal
Demo & Training
GW Communications & Marketing