EDSE/EDIT 526: Web Accessibility and Design

• Syllabus
• Index of Topics

Topic 1: Getting Started; User Customization of Web Content

Introduction

Welcome to Week 1 of the course.

Once you get the administrative details out of the way (creating a personal profile in Blackboard, and purchasing the CD-ROM, as described below), you'll get a chance to dive into some of the real lesson materials.

Make sure you leave plenty of time to do the assignments justice. It's better to get a running start at the beginning of a course than to lag behind from the start. You'll enjoy the course more, and you'll probably get a better grade. You probably already know all of that, but it doesn't hurt to hear it again.

So without further explanation, I'll let you get working. Enjoy!

Part 1: Read the syllabus

Go through the syllabus and make sure that you understand what it says. If you have any questions, please ask me by posting your questions in the discussion forum.

Note: If you feel uncomfortable using your real name, you may post anonymously.

Part 2: Purchase the CD-ROM

There is no "textbook" for this class, but there is a CD-ROM which you are required to purchase. The CD-ROM is called "The WebAIM Guide to Web Accessibility Techniques and Concepts (the Complete Web Accessibility Suite). It is available for purchase online through WebAIM at http://www.webaim.org/. You do not have to pay the full price. I have negotiated a discount for you. In order to receive the discount, you must enter the code that was sent to you by email.

Note: The WebAIM CD-ROM is installed on the Commerce I lab computers, but you will not be given time in class to read it. You may be able to find time to use it during open lab hours.

Part 3: Create a "Student Home Page" in Blackboard

1. First scan in a photo of yourself that has been edited in a graphic application (e.g. Adobe Photoshop), and save it as a JPEG file on your Desktop.
2. Go to "Student Home Page" in the Course Menu (in the navigation frame on the left), then into "Edit Your Homepage", then scroll down to section 2 "Upload a picture", and click on the button labeled "Browse". A window will appear. Go to your Desktop via this window, locate your image file, and click on it once to highlight it, and then click on "Open". The file will appear in the "Browse" field.
3. From here add information about yourself, including the following:
   1. A photo of yourself
   2. A little bit about you: what you enjoy doing, the things that make you interesting, your family, etc.
   3. Your current program of study at George Mason University, and how far along in the program you are
   4. Your educational background (previous degrees and/or coursework)
   5. A brief explanation of your past web design experience, including HTML, XHTML, CSS, graphics, etc. (There's no need to try to impress me here. Just be honest and tell me what you do or don't know.)
   6. A brief explanation of what you currently know about web accessibility, and whether or not you have ever tried to make a web site accessible to people with disabilities.
4. Upon completion, scroll down and click on "Submit".

NOTE: After you have finished editing your home page, you can view a fellow instructor or student 's home page by clicking on the "Class Profiles/Roster" link (in the navigation frame on the left), then search for the student or instructor you wish to view by "Last Name" or "Username"; or you may click on "List All" to view all the users within that course site.

Part 4: Experiment with different browsers and different settings

This is the first part of the "real" lesson content for this week.

Background

Most people use only one web browser. In fact, the majority of people user Microsoft Internet Explorer (IE) 6. It's helpful to know this, but there's also a danger in knowing this. We can wrongly assume that all browsers display web content in the same way that IE displays it. Some developers think that if their content looks ok in IE, then they don't have to worry about the other browsers. Some people don't even know that other browsers exist. Well, they do. There are many other browsers out there besides IE. You'll get a chance to play around with some of them during this assignment.

Step 1: Download a few browsers

At a minimum, I want people to experience the following browsers:

• Windows users:
  • Internet Explorer 6
  • Opera 8.5
  • Firefox 1.5
  • Netscape 4.75 (Yes, it's old. That's part of the point.)
• Mac users:
  • Safari
  • Firefox 1.5
  • Opera 8.5
  • Internet Explorer 5 (Classic | OS X)
  • Netscape 4.8

If you only have access to a Windows machine, or only have access to a Macintosh, that's ok, though I highly recommend using browsers on the other platform, whatever that other platform happens to be for you.

Feel free to download other browsers besides the ones listed here. You could try Netscape 8 or Amaya or Lynx or Konquerer, or Camino... there are plenty of other browsers to choose from. You'll get the most benefit from this lesson if you choose a browser you've never used before—maybe even one you've never heard of before.

Step 2: Use the browsers

View common websites in the various browsers. Do you notice any differences in the way the website appears, or in the way that it acts? How do web sites look in Netscape 4? Try sites like MSNBC.com, ESPN.com, Hotmail.com, Gmail.com, Amazon.com, and other big name sites. How do the videos on MSNBC.com look in Firefox? Can you see the videos at all in any browser other than IE? What about the George Mason site? What about the the site of the place where you work?

Step 3: Experiment with browser settings

Enlarge the font in the browsers then go back through some of the same sites. Most browsers have some method for doing this, usually in the "View" menu. Open documents in new tabs in Firefox (Ctrl + T in Windows) or Opera (Ctrl + N in Windows). How is "tabbed" browsing different than multi-window browsing?

Opera

Opera allows you to enlarge the entire web page. How do web pages look at 200%? 500%? 1000% What do you notice when the pages are enlarged? Do you have to scroll from side to side? Try clicking on the "fit to window width" button (shown in screen shot below). How does this change the appearance of the page when enlarged? How do the graphics appear when enlarged?

In Opera you can switch to user-defined styles quite easily. click on the "user mode" button, then experiment with some of the styles in the drop-down list. Many web pages will look radically different. The real question is not how the web page looks but whether any information is lost when styles are turned off. View sites with the tables turned off (available in drop-down list), with images turned off (you can turn images off by clicking the "show images" button to the right of the "user mode/author mode" button.

You can also quickly turn off Java, JavaScript, and other features from the "Tools" menu option.

How do sites look and act with JavaScript disabled? Can you access your online email program without JavaScript?

Firefox

You can add extensions to Firefox from the "Tools" menu.

If you just installed Firefox for the first time, you won't have any extensions installed. Click on the "get more extensions" link to look at what's available.

You can find many different kinds of extensions to do all kinds of things. One of the most useful for the purposes of this class is the Web Developer toolbar, available from http://chrispederick.com/work/webdeveloper/. In fact, this is one of the best tools for web developers to come along in a long time, and it's free. Go ahead and install the toolbar. Experiment with as many of the options as you can. Find out what this toolbar can do. You might want to refer to an article about Evaluating Web Sites for Accessibility with the Firefox Web Developer Toolbar for some ideas.

Step 4: Use the browsers without a mouse

Now try using the tab key and the enter key to move around web sites (use tab to go forward through links and shift+tab to go backwards through links). No fair using the mouse. In fact, you might want to literally turn the mouse upside-down so you're not tempted to use it. In Opera type "a" or "q" to do the same thing. The tab key in Opera goes between form elements, not from link to link. Here's a challenge: go to your web-based email program and send an email to somebody, without ever using your mouse, not even when you get stuck. Can you do it? Maybe you can and maybe you can't. Are some parts of the process harder than others?

Step 5: Reflect on this experience

What's the use of doing all of these exercises? Maybe you're thinking to yourself, "well I'm always going to use a mouse" or "I'm never going to turn off JavaScript" or "I'm always going to leave the styles alone." Maybe you're right. But the point of this exercise is that there are many ways of viewing web content. There is no one right way. There is no one right method, or style. There is no one right browser. The beauty of the web is that it's available to everyone all the time, to access it however they like. Later on we'll talk about some of the reasons why user preferences are so important. For now, it's enough to know that there are many types of users with many different kinds of preferences and needs. Hopefully this exercise begins to show you what some of the possibilities are.

Part 5: Read an "Introduction to Web Accessibility"

Read "Introduction to Web Accessibility" http://www.webaim.org/intro/

As you read the article, consider these points:

• Never before, throughout the entire history of the world, have people with disabilities been able to access so much information independently as they can now, with the help of computers and assistive technologies. This is truly a remarkable day and age for people with disabilities.
• Web developers can take advantage of the enormous potential of the web for people with disabilities, or they can waste the opportunity by not taking accessibility into account.
• If you don't now have a disability, consider how you might approach this subject differently if you could not use your hands, or if you could not see the computer screen, or if you could not hear videos on the web, or if you had some other condition that altered your web experience.

I encourage you to post your thoughts and observations in the discussion board.