BrowserShots.org allows you to specify the URL of a target website and then proceeds to take “pictures” of how the page will look in each of the browsers you selected. This is a great way to do the final testing on how well your pages work without having multiple browsers loaded on your machine.
Here’s what the home page looks like:
Click for a larger view
There is also a link that will validate your CSS code as well as your XHTML code.
The top graphic a look at my home page which is a valid (strict) XTHML page. Notice how text and images don’t show up on all the browsers including the new IE 8.0
Special thank to Tim for telling me about this valuable web site.
I was just asking about Jason Niebuhr a few weeks ago. Today I see there is an article in the local newspaper describing Jason’s success as a computer repair business person. (Part One of the article. Part Two of the article) Jason is a student I had the first year I began teaching. He is totally blind. Using headphones and a program named JAWS, he would listen to the computer and my lectures at the same time. A common adage is that teachers learn more than their students and Jason taught me a lot!
He showed me how to use the resources you have no matter what. He made me very aware that there’s more to teaching than just showing a PowerPoint to a group of people. Even though I am a strong visual learner I understood that different people learn different ways. However, Jason made me really apply this concept showing me how we all learn through multiple channels. Whenever I presented something that was only visual Jason would immediately ask me what was there. It didn’t take me long to figure out how important the multi-channel teaching is and to include an auditory channel in everything I presented. (Because of JAWS I could easily do this using text on a web page. It didn’t mean I had to be talking all the time.)
But, all of these are common lessons. I learned something even more important from Jason. A lesson about judgment. I remember a particular conversation when several teachers were talking together about Jason’s chances for success. "How will he be able to tell which wire is hot?" one teacher asked. (Being blind, Jason can’t discern the difference between a red, black, or white colored-coded wires.) "How will he keep from being electrocuted? What if he reaches in and touches one of those capacitors!" another exclaimed. I don’t remember my exact response but I vaguely remember either agreeing with the group or remaining silent. I know I did not speak up for Jason’s abilities.
A few years later I had another student. He had stopped taking his medications and had become very paranoid. His behavior toward faculty and other students became rude and aggressive. Again, we all agreed that even though he had extremely high grades, his behavior would exclude him from having any job that we could think of. After a few traumatic semesters (for the student as well as for faculty!) he got his medications in balance again, finished his degree with an A+ average, and is now working as a successful software engineer.
It’s difficult writing about our judgments as teachers. We aren’t supposed to do that. And it is the success of Jason Niebuhr as well as many other students who have taught me a very important lesson: I can never know when the passion and personal perseverance of a student will help him or her overcome all odds (and judgment calls). And, the next time I hear folks forecasting someone’s future as bleak and hopeless, I know I will speak up and offer these two very good examples of people who surprised us and created their own success.
Congratulations Jason and thanks for teaching me some very important lessons!
I’m forever doing the USB dance. Each time I start to insert a USB device I flip it back and forth wondering which way is up. I was complaining out loud during a meeting the other day. "Why don’t USB manufacturers use two different colors of plastic or a large symbol that we can feel?" I asked everyone. Someone pointed out that there is the USB symbol, but it is so small and I shouldn’t have to put my glasses on to figure out which side of a plug goes up.
I got an idea later that day and went and got a bottle of my wife’s fingernail polish. Here’s a shot showing how I marked the "up side" of each of my USB plugs. And, now a week later I’m pleased to report that this has made my life just a little smoother.
Now, if we could only get architects to design doors so you could tell by looking if you should be pushing or pulling… Instead of fingernail polish everyone has to put up signs telling us to push or pull. That’s great until you are in a country where you don’t know the language. Why not just design things properly so their use is obvious? Push or Pull ?
We shouldn’t have to resort to fingernail polish and push/pull signs.
Accessible Web Pages. Imagine having your computer read the text of your page to you with the monitor off. You have no mouse. All navigation has to be done using the keyboard. How accessible is your web page?
This is how the blind and search engine spiders “read” your web pages.
Two factors are bringing accessibility to the forefront. First is the realization that search engine spiders are blind. The second is the recent ruling that Target, a private company, can be sued for not having an accessible web site.
Search Engines are Blind – Blind people cannot see graphics, Flash presentations, or colors on a web page. When a blind person browses the Web they listen to the page using software such as JAWS which read the text and convert it to speech. (Earle Harrison from Triumph Technologies demonstrated this during one of my Web Programming I classes.) Search engines are the same. They do not care about how pretty a page looks or how many graphics it has. All a search engine spider wants to know are (1) what are the key words and (2) what ratio is the ratio of keywords to the overall text of a web page. It turns out that creating accessible web pages increased SEO (Search Engine Optimization). By moving all those color, font, and table tags out of the <body> element and into the CSS Style section, you not only make the page easier for JAWS to read, but you increase the ratio of keywords to content.
Private companies can be sued for not having accessible web sites. A recent ruling by the courts states that:
U.S. District Court for the Northern District of California ruled yesterday that a retailer may be sued if its website is inaccessible to the blind. The ruling was issued in a case brought by the National Federation of the Blind against Target Corp. The suit charges that Target’s website is inaccessible to the blind and therefore violates the Americans with Disabilities Act (ADA), the California Unruh Civil Rights Act, and the California Disabled Persons Act.
Up until this ruling only government agencies were held accountable to Section 508 of the ADA. Now everyone must be aware of the ramifications of excluding non-visual browsers from their site. This especially involves JavaScript tools such as AJAX as well as Flash.
The key is to create a web page that has layered options. The basic web page should contain all essential information. All essential information in the graphics should be also represented as plain text either in the alt=” ” attribute or as part of the text of the page (preferably both). The next layer would be CSS which will take the plain-text page and make it more readable and interesting to visual browsers. And finally, the multimedia layer which includes Flash, movies, and slide shows which should be thought of as the “frosting on the cake”. Not essential, but nice to have for all the folks that like lots of sugar. Any essential information presented in this layer should already be included in the text of the page. By building your pages in this manner everyone will have access to the key information of the page, your client will get a higher SEO, and you can sleep at night knowing you won’t have to be dealing with a lawsuit based on inaccessible web pages.
A short aside. A mouseless world really sank in when I offered Earle Harrison, a person who is blind, a mouse pad as a thank you for presenting to my class. He very graciously declined, reminding me that he doesn’t use a mouse pad. He doesn’t even use a mouse because he cannot see the cursor… Even Earle could see the light bulb go on over my head as it all clicked into place.
Technorati : target accessibility SEO development webProgramming
Del.icio.us : target accessibility SEO development webProgramming
Ice Rocket : target accessibility SEO development webProgramming
Buzznet : target accessibility SEO development webProgramming
I’ve been reading the Practical Webdesign magazine from England and paying attention to the newest innovations on web work. Everything is being done with CSS (Cascading Style Sheets) now. No more tables. It all comes down to SEO – Search Engine Optimization…
The idea is to feed the search engines like Google pure content without diluting it down with font, color, or table tags. It also makes the page more accessible to people with visual disabilities.
Here’s how it works: Each major area in a page is separated out using the div element. Than an external CSS file is used to format each block. I decided to try these new techniques out by redesigning my syllabus page.
Here’s the original using tables to layout the text.
And here’s the new design using CSS and div elements. Select view/source from your browser menu to see the div elements in action.
The original version has lots extra clutter which confuses the search engines as well as anyone listening to the page using JAWS or any other type of text-to-speech program.
The new version is pure text. All of the design elements are in another file, away from the content. You view the CSS file. Notice the sections for head, content, and the nav (navigation) bar.
This is my Web Programming I Summary Page that uses the same techniques. I built this page from scratch by simply typing in the text. No formatting. I used the h1 element to designate the main header of the page because search engines are looking for keywords in the main header and matching them with keywords in the body. (The rule here is not to use the h1 to make text larger. It should be used to label the text as the main idea of the page.) I used the h2 for subheads, or secondary ideas. Then I adjusted the height, color, style of the headers is being controlled by the CSS file.
The menu is simply an unordered list with hyperlinks in it. Very simple to change. All the styling is done with CSS stored in another, external file. Nothing around to distract the search engines!
Once I had all the text in I separated it using div elements.
Finally I started working with the CSS code, adding a line of CSS code and then checking the results in the browser.
The end results are search engine accessible web pages and a nice looking page all in the same package.
One of my students, Gil Hanson, just finished creating a volunteer web site for SMILES, an organization that works with people with disabilities, helping them live more independantly. Gil has been taking classes here at South Central for several years and never stops learning.
I’m pleased to see him helping out non-profit organizations in this way and want to point out how well-crafted his code is. Here’s there new web site: http://www.smilescil.org/
Gil used a menu system from Milonic. Their policy is to make their tools free for any non-profit corporation. This is a great thing to know about whenever you have a non-profit client you are creating web pages for.
Great job Gil!
PS – SMILES is the organization that first connected me with Earle Harrison. See my Accessiblity entry from a week ago.
How do blind people “see” a web page?
In 2005 Earle Harrison from Triumph Technology visited my Web Programming I class. He spoke about building accessible web pages and demonstrated JAWS, System Access, and several other interesting programs that convert HTML markup into speech.
You can listen to his presentation on your computer or any MP3 player such as an iPod or iRiver. I’ve broken the presentation into two parts. Here are the files:
earleHarrison1.mp3
earleHarrison2.mp3
Here is a transcript Julie Peek typed up from the recording.
My thanks to Earle for allowing me to publish this material as well as Julie for taking the time to type out a transcript.
