Skip to main content

Accessibility Starter Guide for Website Builders

If you build web applications or websites for any university-related activity, including courses, you should make your web applications and sites accessible. Building a fully accessible web application or site is not a simple task. There are many issues—from user experience design to color choice to client-side programming techniques—that must be considered.

At a minimum, the university recommends the following from your web applications or websites (hereafter referred to, simply, as “sites”):

  1. Each page in your site should be fully readable by a screen reader.
  2. Each page in your site should be fully navigable without using a mouse.
  3. All media (video, audio, images) on all pages in your site should have alternative text descriptions.
  4. All pages should be designed around the principle of distinguishability.

It is important to understand that the above items are only a fraction of what it takes to make a site fully accessible. The current, internationally recognized set of accessibility guidelines are the World Wide Web Consortium Web Content Accessibility Guidelines, version 2.0 Level AA conformance. External funders and regulatory agencies may have additional requirements for accessibility compliance much closer to what is required by the WCAG 2.0 Level AA guidelines. As such, you should always be building toward compliance with the WCAG 2.0 Level AA guidelines.

A human-readable guide to the WCAG 2.0 Level AA guidelines with clear, simple explanations of how to meet each of the Level AA criteria can be found at https://www.wuhcag.com.

The university does not currently provide technical resources to convert an existing site or assist in building a new site to meet the above requirements. As the site owner, this is your responsibility.

There are three major steps you can take to make your site more accessible:

  1. Use proper HTML markup with correct nesting of elements so that you never have an H3 tag before an H1 tag in any HTML page, for example.
  2. Provide text alternatives for all images, audio, and video on your site.
  3. Use ARIA roles to properly mark up the sections of content, links, and form elements on all your pages. If you use the Bootstrap framework for your pages, Paypal’s Accessibility Plugin for Bootstrap is a powerful and quick way to automatically add ARIA roles.

There are a number of tools that can help you verify that your site is accessible:

  1. Tota11y: a browser-based accessibility visualization toolkit that checks any page for WCAG 2.0 Level AA compliance and gives you a simple report explaining where (and how) you are out of compliance. Tota11y is available at http://khan.github.io/tota11y/
  2. WAVE: a website accessibility checker tool that can scan one or more publicly available pages in your website for WCAG 2.0 Level AA compliance. It also provides a simple report that explains where (and how) you are out of compliance. WAVE is available at http://wave.webaim.org

    There is a Chrome extension for WAVE that enables you to run evaluations of pages from within the Chrome browser, without having to visit the WAVE website: https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh
  3. WebAim’s color contrast checker allows you to verify that the colors you choose for text or images on your site meet WCAG 2.0 Level AA contrast requirements.
  4. Coblis – the Color Blindness Simulator tool – can show you what images on your site, or screen captures of whole pages, will look like to people with various kinds of colorblindness.
  5. If you want to know how your web applications and sites appear to individuals with vision impairments, the NoCoffee Chrome extension is a great way to experience what visually imparied people would see on your site.

It is important to think about building accessibility into your sites as a process. If you are building a new site, it is much simpler and less expensive to build in accessibility from the start. If you have an existing site, develop a plan for making the site accessible and continually build toward reaching that goal. Tota11y is an invaluable tool in checking your work as you go, ensuring that you have designed an experience that is accessible, functional, and aesthetically pleasing to everyone.