Web Accessibility

This is a lesson I use with my middle school web design students. (last updated 20 Nov 2024)

Goals

Learn about web accessibility, its importance, and how to make accessible webpages.
Make your "Travel Webpage with Adobe Express" webpage fully image accessible.
Start making pages on your Google Site Digital portfolio accessible.

Steps

Watch this video: Google Chrome Developers - "Introduction to Web Accessibility": This video offers a straightforward introduction to web accessibility. It's part of a series by Google on web accessibility, ensuring credible information. (4 min)
Watch the video: Web Accessibility Perspectives - Compilation of 10 Topics/Videos (7.5 min)
Optional:
1. Install Google's "Screen Reader" extension. (free)
2. Consider also installing the "Extensity" Chrome extension to make it fast to turn extensions on and off. (free)
3. With the Google Screen Reader extension turned ON:
  1. Visit 1 or more of YOUR webpages you've created for our class. ("Listen" to the webpage being read)
  2. Visit 1 or more of YOUR webpages a CLASSMATE has created for our class. ("Listen" to the webpage being read)
Visit the webpage you've started / created for "Travel Webpage with Adobe Express."
Use one of the websites on Web Accessibility Checkers to check the accessibility of your travel webpage and your Google Site / Digital Portfolio webpages.
Make your Adobe Express Travel webpage MORE ACCESSIBLE by adding ALTERNATE TEXT DESCRIPTIONS for all your images.
Start making your Google Site Digital Portfolio Accessible the same way.

Optional Videos

Understand Website Accessibility with the Firefox Accessibility Inspector: When building a website, understanding what's happening with accessibility can help you make certain your site can be used by everyone. Firefox DevTools now has a new Accessibility Inspector that shows an outline of the accessibility tree, and lists problems with contrast or missing labels, and much more. Jen Simmons gives you a tour. (8 min)
W3C Web Accessibility Initiative - "Web Accessibility Perspectives": W3C is the international standards organization for the World Wide Web. This video series highlights different aspects of web accessibility and its importance. (7.5 min)
A11ycasts with Rob Dodson: This is a series of videos hosted by Rob Dodson, focusing on various topics in web accessibility. It's highly informative and presents the information in an engaging way.
1. "Screen Reader Basics: VoiceOver -- A11ycasts #07" is for MacOS users.
2. "Screen Reader Basics: NVDA -- A11ycasts #09" is for WindowsOS users.
3. NVDA is free / open source screenreader software for WindowsOS
"How a screen reader user experiences an accessible and inaccessible website" by TPGI: The YouTube video shows how a blind person uses a screen reader to navigate a website. It has examples of an accessible website that works well with a screen reader, and an inaccessible website that does not work well. The accessible website has proper labels, headings, and form fields that the screen reader can read, while the inaccessible website has problems that make it hard to use. (4 min)

Turn In

Use one of the websites on Web Accessibility Checkers to check the accessibility of your travel webpage.

Copy and paste the PUBLIC webpage link to your Adobe Express Travel Webpage and turn it in here.