Overview

On this page, you will review the basics of accessible design and dive a bit deeper into making accessible content on the internet.

This lesson won't be too technical, as most of you probably aren't designing your own websites, but it will give you the vocabulary and tools to do a rough evaluation of different websites you may use in your courses.

You have a choice as to how to engage with the material in this lesson. Remember, the key concepts are always addressed in the text. If you need more info or learn by watching, the videos and resources are great supplements.

Read About It
Watch a Demo / Video
Explore Resources on the Web

Read: The Basics & Testing Websites

The Basics

Most of the basics discussed in the previous module will still apply when discussing web accessibility: alt text, descriptive hyperlinks, headings, color contrast, etc. Please review Accessible Design Principles if you need a refresher.

Automated Website Accessibility Testing

Web accessibility follows the same rules and guidelines as accessibility for MS Word. The page structure should be properly defined with headings, images require alt text, tables should be appropriately formatted, color should not be used to convey meaning, and all media should include captions and/or transcripts. For a full overview of the requirements for web accessibility, refer to Web Content Accessibility Guidelines (WCAG) 2.1 at a Glance (released 06-05-2018) or UW's IT Accessibility Checklist (this one uses WCAG 2.0, the previous version still used as all systems convert).

To run a quick check on a website, you can use WebAIM's Web Accessibility Evaluation Tool: WAVE tool. Simply paste the URL into the box and run the report. Look to see that section titles are appropriately marked with headings.

screenshot of How to Find OER with section headings circled

You can also use WAVE to check that alt text is present for images.

*Screen Shot of WAVE evaluation showing that alt text for an image is present

Note: To use WAVE on password protected pages (like those in an LMS), you'll want to download the WAVE extension for Chrome.

As with any automated testing service, these tests are not entirely reliable. For instance, WebAIM can note that alt-text is present, but it cannot determine if the alt-text is appropriate. Same goes for the presence/use of ARIA (a markup code that improves accessibility when used correctly).

Manually Testing a Website

One quick and dirty way to test out a website is to try and use the tab key to move through the website. That is, navigate a website without a mouse. This isn't going to be the most accurate test, but seeing if you can get to all elements on a page without using a mouse is quite telling. Check to see if there are certain buttons, links, or form fields that you cannot access with the tab key alone.

Another trick is to use the control key and + or your mouse wheel to enlarge the screen. See if the screen is responsive and does not require you to drag the scroll bar to the side to see everything on the page. (This type of responsive design is also helpful for mobile devices.)

Lastly, there are a number of vision simulators and browser extensions that you can use to alter the appearance of a website in order to evaluate its ease of use for folks with vision impairments and/or colorblindness:

NoCoffee Vision Simulator - this simulator allows you to mimic certain vision impairments and blur the text.
Color Oracle - you can download this tool in order to see how your screen looks with various types of colorblindness.
Funkify Vision Simulator - this is an interesting simulator that not only mimics vision impairments but also creates a "jumpy mouse" to mimic difficulty using a mouse.
Chrome High Contrast extension - with this extension you can check out grayscale to evaluate color contrast, or see how a page converts to high contrast.

Watch: Accessible Web Content

Make Technology Work for Everyone: Introducing Digital Accessibility (4:42)

This is a fantastic short video that goes over some of the basics on how to make websites and web content accessible.

WebAIM WAVE Toolbar (4:45)

This video walks you through using the WebAIM WAVE Chrome extension to test websites for accessibility.

Keeping Web Accessibility in Mind (11:35)

A little outdated, but the video features three students with disabilities that speak to their experience navigating the web. This is a great chance to see what it's like to navigate the web using assistive technology and to familiarize yourself with the challenges that some of your students may face when navigating a poorly designed website.

Explore: Web Accessibility Resources

WebAIM WAVE Extension - From this site, you can download the Firefox and Chrome WAVE extensions in order to easily review websites.
UW's IT Accessibility Checklist - Great overview of web accessibility standards. I recommend sharing this website with web developers, authors, publishers, or vendors that you work with if they are unfamiliar with what it means for their website to be accessible.