Designing and Planning Web Pages – 3
Web Standards and Accessible Design
The purpose of this module is to assure that your web projects are accessible to all users across browsers, operating systems, and devices. In this context, you will be introduced to the concept of web standards, including HTML, XML, XHTML, and CSS. This module additionally raises awareness about accessibility and encourages you to create content that is accessible to users with disabilities. You will be presented with demonstrations of common barriers to websites, and will visit and critique websites based on accessibility.
Lesson 1: Web Standards
The purpose of this lesson is to introduce web standards and establish why they are important. Specific standards (HTML, CSS, XML, and XHTML) will be defined.
At the completion of this exercise:
you will be able to identify why it is important to develop websites that comply with web standards.
you will be able to describe the differences between HTML, CSS, XML, and XHTML.
In the early days of the Web, everyone accessed the Web using a keyboard, mouse, and monitor. This is still the most common means of accessing the web, but there is a growing variety of technologies that are “web-enabled”. People can access the web on handheld computers/PDAs, such as Palm Pilots and PocketPC devices. People can access the web on their cell phones, both visually (on a tiny screen) or audibly (using voice commands and synthesized speech output). People can access the web in their cars, again using an audible interface (no screen, no keyboard or mouse). People with disabilities also access the web and do so using a variety of technologies known as assistive technologies (more on this in the next lesson).
Even within the traditional combination of computer and monitor, there are a growing variety of browsers that people can choose from, including Microsoft Internet Explorer, Mozilla Firefox, Opera, Safari, and others. People use a variety of operating sytems, including Windows, Mac OS, and Linux. People have their computers set to a wide variety of screen resolutions, from 640 x 480 pixels to 1400 x 1050 pixels and beyond.
With all this diversity in the way people access the web, there’s a very high probability that your website will look different to many of your visitors than it does to you. Despite these differences, the most important part of your website is its content, and all users should be able to access that. The only way to ensure that websites work across all devices and configurations is to develop in accordance with web standards. Web standards are the core set of rules for developing websites. It might be possible to develop sites that do not comply with standards, but doing so increases the likelihood that many people will be unable to access your site.
The central organization who is responsible for creating and maintaining web standards is the World Wide Web Consortium (W3C). Here are the definitions of the W3C standards that we’ll be following in this course:
HTML – Stands for HyperText Markup Language. HTML is the language that has historically been used to create documents on the web. It is plain text, but includes a variety of tags that define the structure of the document, and allow documents to include headings, paragraphs, images, links, lists, tables, and other features.
CSS – Stands for Cascading Style Sheets. CSS is a language that is used in conjunction with HTML to control how web pages are displayed. The difference between HTML and CSS is that HTML defines the structure and content of the document, and CSS controls the presentation.
XML – Stands for Extensible Markup Language. XML is a “meta language”, a markup language that is used to create other markup languages. Hundreds of XML languages are in use today, including GML (Geography Markup Language), MathML, MusicML, and RSS (Really Simple Sindication). Since each of these languages was written in XML, their content can easily be shared across applications.
XHTML – XHTML is a rewrite of HTML as an XML language. XHTML is very similar to HTML, but has stricter rules. HTML was relaxed about things such as case sensitivity (XHTML elements must be in lower case) and closing tags (all XHTML elements must be closed). Strict rules are necessary for all XML languages, because without it, interoperability between applications would be impossible. XML is the way of the future, and XHTML is the future language of the web (and the language taught in this course).
Look over each of the standards documents listed in the Resources section below. These are technical documents, and you don’t have to master their content (unless you want to!). Just explore them to get a sense for what constitutes a standards document.
With your class, play Match Game! Here are the rules:
Form a team of three to four people. As a team, discuss why you feel that web standards are important. Come to a consensus and write down your team’s five top reasons why standards are important.
Your instructor also has a list of five reasons why standards are important. Compare your team’s list to your instructor’s list.
Whichever team matches the greatest number of items on your instructor’s list is the winner!
Lesson 2: How People with Disabilities Access the Web
One of the groups most dependent on standard-based web design is people with disabilities. Consider the following examples:
If a web page includes visual content (graphic images), a person who is blind can’t see them. These individuals might access the computer’s output using synthesized text-to-speech technology known as a “screen reader”, or they might use a small Braille output device. Graphics must be accompanied (in the code behind-the-scenes) with alternate text that describes the content of the graphics for anyone who is unable to see visual content.
If a web page includes audio content, a person who is deaf or hard of hearing won’t be able to hear it. This content must also be provided as text, such as in a transcript. If the site includes a multimedia file, that file should be closed captioned so that a visible text track, synchronized with the video, can be turned on by the user.
If a web page has buttons, controls, menus, form fields, etc., that require a user to click on them with a mouse, users with physical disabilities who are unable to operate a mouse will be unable to access these controls. All controls should be operable with a keyboard as well.
At the completion of this exercise:
you will have developed a basic understanding of the variety of methods and technologies used by people with disabilities in accessing computers and the web.
you will have experienced some of the common barriers people with disabilities face with inaccessible web content.
Videos: View and discuss the following videos, which provide examples of how people with disabilities access computers and other technologies, and the problems they may encounter when trying to access web content.
DO-IT: Computer Access: In Our Own Words
AccessIT: Surfing the Web with a Screen Reader (streaming video links are at the bottom of the page)
Simulation Visit and evaluate several websites and discuss whether some users might have difficulty accessing these sites. Ask your instructor for the URLs of websites that make particularly good examples of either accessible or inaccessible design. Explore ways of determing whether sites are inaccessible. Here are some examples:
Turn off graphics in your browser to perceive each page as a blind user might encounter it.
If you have access to a screen reader application, turn off the monitor and try accessing websites audibly (some operating systems come equipped with free screen readers, such as Microsoft Narrator in Windows).
Try accessing a page without using your mouse (if you can’t resist, disconnect your mouse!)
Try accessing a multimedia presentation with the sound turned down.
Discuss with your instructor what you learned about how the web is experienced by people with disabilities.