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.

Website Accessibility

Web accessibility follows the same rules and guidelines as accessibility for MS Word. It is important to recognize that content you build in Canvas (pages, assignments, discussions, etc., ) ARE webpages because they are viewed through a mobile app or web browser. 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.0 at a Glance or UW's IT Accessibility Checklist.

To check your 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.

Testing a Website

One quick and dirty way to test out a website, is to try and tab through. That is, use the tab key to navigate through the 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.

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.)

Watch: Accessible Web Content

Make Technology Work for Everyone: Introducing Digital Accessibility (5 mins)

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

Make Technology Work for Everyone

WebAIM WAVE Toolbar (5 mins)

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

WAVE Toolbar

Keeping Web Accessibility in Mind (11 mins)

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.

Keeping Web Accessibility in Mind

Explore: Web Accessibility Resources

Accessibility Evaluation Resources
WebAIM: Introduction to Web Accessibility
UW's IT Accessibility Checklist - great overview of WCAG 2.0 AA Standards. (Pssst! Send this to your IT office!!)
VA Section 508 Tutorial: Developing Section 508 Compliant Web Content
VA Section 508 Tutorial: Testing HTML for Section 508 Compliance