Module 3: Web Standards and Accessible Design

Overview

The purpose of this module is to deepen students' awareness of human and technological diversity and to assure that students' web projects are accessible to all users across browsers, operating systems, and devices. In this context, students will be introduced to the concept of web standards. An important takeaway with this module is that people are incredibly diverse. They have a wide variety of characteristics, including diversity in the technologies they use to access the Web and the way they use those technologies. People use different operating systems, different web browsers, and different screen resolutions. They use desktop computers, laptop computers, tablet computers with touch screen interfaces, and mobile devices such as iPhones and Droids. Standards are the rules governing how web pages should be created and how the various languages that are used in building the web (e.g., HTML, CSS) should be used. By developing web pages that comply with standards, we increase the likelihood that our websites will work for everyone.

This module additionally raises awareness about accessibility and encourages students to create content that is accessible to users with disabilities. Students will be presented with demonstrations of common barriers to websites, and will visit websites and critique them on accessibility.

Lesson 1: Web Standards

• Estimated lesson length: 60 - 90 minutes
• Link to student Lesson 1 page

Tips for Delivering This Lesson

• Many, if not most, students are likely to find the HTML specifications to be very dry reading. For some classes, it might be best to display the documents on a projector and step through them as a class, looking at particular features.
• It can be particularly interesting to ask students to identify some of the HTML elements that were included in the original specification (e.g., Headings, Anchors, Paragraph Marks, Images). This was not included in the activity for this lesson because it is so challenging to find, but might work as a group activity, or if students are provided with very specific instructions. The spec begins defining these elements beneath the heading "HTML Elements" which appears about 1/3 of the way down the page, in all caps and centered.
• Similarly, students might be asked to identify some new elements that are included in HTML5, but not in HTML 1.2. There are dozens of these elements, including several that are brand new to HTML5. W3Schools includes a page that lists New Elements in HTML5. This resource could be helpful for stimulating discussion about the evolving Web and the new standards that are emerging to make this Web possible.
• While discussing the evolving web and the role of standards, an interesting class activity can be to use The Internet Archive's Wayback Machine to view snapshots of one or more popular websites (e.g., google.com) as they've changed over time. Students can be asked to identify specific ways that these sites have changed, which again helps to reinforce that the web is evolving, and standards are needed to ensure that websites continue to work across all browsers and web-enabled devices.

Why Standards are Important

Here are a few tips to help instructors to guide discussion about the importance of standards:

• Web standards increase the likelihood that sites will work across browsers, web-enabled devices, and assistive technologies
• Web standards make a website's content accessible to all.
• Web standards result in sites that are easier to update and maintain.
• Standards-based websites cost less to develop and maintain.
• Standards-based websites have greater longevity, and are more likely to work many years from now.
• Web standards help search engines to more effectively index a site<therefore, better search placement on sites like google.com!

Lesson 2: How People with Disabilities Access the Web

• Estimated lesson length: 60 - 90 minutes
• Link to student Lesson 2 page

Tips for Delivering This Lesson

• The streaming videos that are linked from this lesson serve two purposes. They not only provide educational content regarding accessible technology and accessible web issues, but they also are in and of themselves accessible and therefore demonstrate accessibility. This presents an opportunity to talk about closed captions for the hearing impaired and audio description of visual events that non-sighted people might not otherwise be able to access.
• Students are asked in this lesson to review websites for accessibility. It is helpful to have a few URLs on hand, particularly of sites that are not accessible. This is a moving target. However, examples of both good and bad sites are contained within the Accessible University Mock Site, a site that was specifically created to demonstrate accessibility problems and solutions. Some of these problems, and their solutions, require an understanding of web design that exceeds what students have been exposed to thus far in this course. However, the issues are explained for all audiences, so students can still learn from this site, expecially with group discussion.
• Other sites can be easily located by looking for the following features:
  • Graphics with no ALT tags. These are easily identified by turning off images in your browser, or by using a web accessibility evaluation tool such as WAVE.
  • Dropdown or flyout menus that require a mouse. These sites are plentiful on the web today, and most are only accessible to mouse users. If you find a site with mouse-dependent menus, ask students to try to access those menus using keyboard alone, without touching the mouse (in most browsers students should be able to tab through links and controls on the page, but on many pages they will not be able to operate the menu, or will not be able to tell where they are on the page. Remind students that many people with disabilities are physically unable to use a mouse, and this is a major barrier that they face when trying to access web content.
  • Videos without captions. If it's not captioned, people who are Deaf or Hard of Hearing can't access the video content. Ask students to watch a video without sound or captions, then ask them questions about that video. Remind students that this is a major barrier for people who are unable to hear.
• Screen readers (software tools used by blind individuals to read the content of web pages and computer software applications) are bundled for free in major operating systems. In Microsft Windows, the built-in screen reader is called Narrator, and in Mac OS X it is called VoiceOver. These applications have a learning curve, but just listening to the synthesized voice can give students a general sense of what accessing web pages with a screen reader might be like. Unfortunately these applications may be disabled by default on some district networks. Instructors should consult their IT staff well in advance of this lesson to try to get these applications installed and avaialable. Another potential problem with students using a screen reader in class is the dissonance this could create. Ideally students should be equipped with individual headsets.
• If possible, invite a guest speaker to present on web accessibility. Guest speakers with expertise in this area, many of whom have disabilities themselves, can be found by contacting a local independent living center or other disability-related organization. If you're not sure who to contact in your local area, the ADA National Network might be able to hook you up with a local or regional resource.