Accessibility (a11y): Make your site accessible and inclusive

WashU websites should be accessible to people of all abilities, including people who use assistive technologies.

« SEE ALL BEST PRACTICE GUIDES


Washington University strives to make our web content accessible for all site visitors, including people who have physical or cognitive impairments and those using assistive technology.

In fact, by following international standards for web accessibility, we improve usability for web visitors of all abilities – while also racking up bonus points for search engine optimization (SEO) and mobile usage. (But you don’t have to take our word for it: Read the Bureau of Internet Accessibility’s eight reasons leadership should care about accessibility. Their reasons run the gamut from legality to social responsibility to security.)

If you manage a Washington University website, we need your help to uphold our pledge to make our websites accessible for all visitors.


Assistive technology spotlight: Screen reader demo

This video from the University of Colorado-Boulder demonstrates a Google search and site visit using a screen reader, a common tool for people with visual impairments.

You’ll quickly recognize how accessibility and usability choices make all the difference for visitors to your site.


What you can do

If you manage a website, you can can help first and foremost by thinking inclusive and keeping accessibility in mind. Below are a few steps to keep you on track.

If you have a WashU Site (that’s “Sites” with a capital “S”)

Not sure if you have a WashU Site? 
WashU Sites
 are requested through sites.wustl.edu. They’re built in the WashU Web Theme or the WUSM Web Theme. If your site is not in one of these themes, it is not a WashU Site. 

  • The code is already up to code.
    WashU Sites are already built and tested for compliance with the World Wide Web Consortium (W3C)’s Web Content Accessibility Guidelines (WCAG) 2.1, Level AA. Testing is ongoing as W3C’s standards are updated and practices evolve. To report an issue, contact the WashU Sites support team.
  • The content is up to you.
    Make sure the content you add – including text, images and video – is  accessible. The guiding principles and checklist below will point you in the right direction.

Pro tip: Use the tutorials!

Web accessibility is important to every aspect of a site’s content. That’s why accessibility practices are integrated into all WashU Web Theme tutorials.

If you come across steps in a tutorial that seem unnecessary (“why add alt text if it isn’t visible on the page?”), it’s likely a step that improves accessibility, as well as SEO and general usability. If you skip these steps, your site may appear just fine. However, some visitors to your site – perhaps those using assistive technologies, mobile devices, outdated browsers or slow Internet connections – may run into trouble.

If you have a non-WashU Site

  • If you’re using a vendor: Put it in the contract.
    Include a requirement in your vendor’s contract that the website follow the World Wide Web Consortium (W3C)’s Web Content Accessibility Guidelines (WCAG) 2.1, Level AA. Before launch, ensure that these standards have been followed and tested.
  • If your developer is on-campus: Use WashU resources.
    Encourage your developer to join the WashU Web Accessibility Users Group. Topics typically focus on programming but occasionally cover content territory as well.
  • Either way: Triple check the content.
    Make sure all content is available in readable text form. The guiding principles below will help you get started.

If your site has essential course, application, registration or compliance information

  • Prioritize Americans With Disabilities Act Title III compliance.
    Web accessibility is of utmost importance on websites that provide essential course, application and compliance materials.
  • Use your experts.
    If you would like a professional web accessibility assessment, contact the WashU Sites support team.

Guiding principles for accessible content

It takes both solid coding and thoughtful content to make a site accessible. If you’re using a non-WashU Site, please ensure the site is coded to accessibility standards, in addition to following the content guidelines below.

White text on a teal background states: This is an Accessibility Fail. The text you are reading is part of this image and is therefore unreadable to screen readers, search engines and language translators. It is invisible to people who rely on these tools. This text shrinks on mobile devices and pixelates when zoomed or enlarged. Users cannot adjust the colors or contrast to suit their needs. To improve accessibility, avoid locking text — like this — into graphics. If a graphic does include text, use the alternative text to provide the content in another form. 
Since the words in this image are saved as part of the graphic, this message is not text-based. Information like this is more effective as text on a page. Other graphics, such as diagrams and maps, may require embedded text to communicate effectively. In these cases, use the alternative text attribute to summarize pertinent information for users who cannot see the image.

1. Text-based information is key

Text-based content is at the core of what WCAG calls the perceivable principle for accessibility. (WCAG’s four overarching principles are summarized nicely by Eric Grzymkowski of Oho Interactive.)

By text based, we mean actual text on page, rather than text that’s part of an image. Importantly, this text can be read by search engines like Google, as well as screen readers.

An easy way to test if content is text-based is to try highlighting it with your cursor. If you can highlight it, it’s text-based. If you can’t, you need to provide a text alternative. Try this test with the text in the teal box above, and you’ll find that you can’t highlight the text – all you do is drag the image. That’s an accessibility fail.  

Images, videos and audio files are not text-based. To make this content accessible, you simply need to complement media files with real text by providing these alternatives:

  • For images, including graphics and photos:
    Recognize that some visitors to your site will be unable to see images, perhaps because of visual impairment or page-loading issues. With these users in mind, include descriptive alternative text for images. Skip the alt text if the image is decorative rather than informative or if descriptive text would be redundant.
  • For videos and audio clips:
    Include captions and/or transcripts. This benefits those with hearing impairments, as well as people who aren’t using speakers or headphones.

What’s so great about real text?

Unlike words locked in images or videos, text-based content is:

  • Readable by screen readers, search engines and translation tools
  • Adjustable, by the user, in size, color and contrast
  • Linkable!
  • Automatically updated to match fonts as a website’s styles evolve

2. Chronology matters.

People using screen readers experience your site linearly. People who rely on their keyboard instead of a mouse access links and form fields in the order they appear on the page and in the code.

Web experts Kinneret Yifrah and Rotem Binheim of InVision advise thinking top-down and left to right.

  • Forms
    Place labels and descriptions before form fields, rather than after.
  • Tables
    Avoid tables when possible. They’re tough to read on mobile screens (and sometimes even desktop), hurt search engine optimization (SEO), and can be frustrating to navigate and comprehend using a screen reader. If you do include tables, follow these tips and tricks from W3C.

Non-WashU Web Theme sites

Keyboard accessibility is one of the most important aspects of web accessibility. You can test keyboard access by navigating your site with the tab key instead of a mouse.

Important factors in keyboard accessibility:

  • Logical navigation order
  • Focus indicators
  • “Skip to content” links

See the WebAIM guide to keyboard accessibility for details »

3. Formats and styles carry extra weight.

Visitors using screen readers “scan” pages by skipping to subheadings and links, as demonstrated in the video near the top of this page.

  • Links
    Make link text unique and descriptive. (Just say no to links that say “click here” or “read more.”)
  • Subheadings
    Use subheadings generously to break up content sections. Prioritize clarity over clever-ity (see what we did there?) and use your site’s pre-set heading styles (h2, h3, h4), so visitors can reliably use subheadings as de facto bookmarks on a page.

WashU accessibility experts

The WashU Web Accessibility Users Group meets to share knowledge about accessibility standards and best practices.

Visit their site for:

  • Resources: Find guides to creating accessible PDFs and Excel spreadsheets, tips for WordPress and more.
  • Events: Sign up to learn about upcoming accessibility meetings.
  • Contacts: Get in touch for extra help achieving an inclusive and accessible website.