Assignment: turn off images, JavaScript, Stylesheets, fonts, colors and dump the mouse. I also magnified the pages by setting my browser's text size to the largest possible.
The purpose of this exercise is to give a person an idea of what it's like to have their access to the web restricted. It certainly does not duplicate the experience but it does give you a better understanding of what it might look/feel like.
Summary Quick Links:
URL 1 - Mainzpress.com
URL 2 - DWD
URL 3 - Amazon.com
URL 4 - W3C.org
URL 5 - Yahoo! Groups
Web Accessibility Class TOC
First I wanted to check out my internet Website that I use for my Web design business. I found that navigation was fairly easy. What I like about my site is that there are "Quick Links" to the different sections so a person can, at a glance, see what the major information is on a page and go there easily. My pages also contain "Back to Top" links after each main section and a "Home Page" link at the top and bottom of the pages, which facilitates navigation. There is one page on this site that does not have a "Back to Home Page" link at the top and I did not like that....guess I will have to add one.
The site is not a big one so that made navigation and orientation easy. There are not a lot of images on most of the pages, so there is not much distraction from the empty image place holders. The home page uses JavaScript which drops letters from the top of the screen and ends up spelling out the company name. Since JavaScript is turned off this presentation did not occur but that is no big deal since the company name is mentioned in the first line of the content.
The major problem I found with my site was on the home page. There is one image which has an especially long alt tag. This image is in a two-column layout table, with the navigation and images in the first column (left) and the main content in the second column (right). When the browser is set to "Always expand alt text for images" and view is on the largest text size this long description pushes the layout over causing the main information to be squished in a long, need-to-scroll, line. It's not so bad if the viewable text size is set smaller.
Plus - Links at the top and bottom of the internal pages and consistent placement of the navigation links facilitate movement around the site. Pages validate to formal published grammars. Use of stylesheets.
Minus - Long alt description in combination with the expanded ALT text displaces the main text and might be better as a Long Description and/or Descriptive link.
I could complete my task of finding out information on this business.
This is the Department that I work for, but I did not have any input on the Internet site. I WILL have input on the redesign, so this is a good exercise for me to do. I decided that I would pretend to be a person looking for a job.
The home page has a client-side image map as the header, and the image map has alt tags but I could not see anything as I tabbed through the header. The WAI guidelines say in Checkpoint 1.5 that until user agents render text equivalents for client-side image map links, you need to provide redundant text links for each active region of a client-side image map. [Priority 3] This was news to me, I had always assumed that the ALT text was visible in client-side image maps. The ALT text does show up by the cursor, but that text is not written on the image place holder so a person who is tabbing through the image map does not know what the links are about (unless the links are being read out loud by a screen reader).
I went from the home page to the Workers link. There was no way to skip the client-side image map header, which not only is on every page but as mentioned above, I cannot see what the header links are for. Right away I also noticed that on the second level pages, there are images used as spacers, but the ALT text was NOT done as empty quotes. Instead they have the ALT text that reads "Navigation Link Spacer" or "shim.gif (file size)" so each one shows up!
From there I picked the link that announced itself as the "Number One Source for Jobs in Wisconsin" in big letters. That was good, because I knew there was a Jobnet link somewhere and the big letters drew my attention to that link. But when I got there, I was in for a surprise. The Jobnet page has what I think is a Server-side image map (image maps are a priority 1 issue, Checkpoint 1.2). There is a big hole where a picture should be with these directions above it -
Please select a Region of the State or an Out-of-State Area. North East, North West, South East, South West, Iowa/Minnesota, Northern Illinois, Michigan Upper Peninsula, All AreasThe hole is an image of Wisconsin and surrounding states. Wisconsin is broke down into regions such as NE, NW, SE, SW etc. but without images turned on you have only a limited idea of what the boundaries are for these regions. The directions do have these areas as links, which take you to a page that list the counties included for each region. The problem is if you do not know where the county is, the map on the page will not help you because it is also an image showing the location of the counties.
Since I want a job in Dane or Columbia county, and I know these counties are in the southeast corner of the state, I clicked on the South East link listed in the directions. Guess what? Columbia County is listed in the South East, but not Dane.... interesting since Dane is directly under Columbia. I decided to try South West, and bingo there was Dane county. Looks like they carved Columbia into the SE and carved out Dane into the SW. Who would have guessed...
Jobs are more plentiful in Dane County so I started my job search there. All the counties are listed with the directions -
Please select a county. Adams, Buffalo, Crawford, Dane, Grant, Green, Iowa, Jackson, Juneau, LaCrosse, Lafayette, Monroe, Richland, Rock, Sauk, Trempealeau, Vernon, Wood. All of the Southwest region.But the counties appear to be one big long link! Looking at the source code shows that this is NOT the case. Each county is suppose to be a separate link that is sending back to the server, link specific ASP code. The page designer needs to read Checkpoint 10.5 HTML Techniques: Grouping and bypassing links which states that "until user agents (including assistive technologies) render adjacent links distinctly, include non-link, printable characters (surrounded by spaces) between adjacent links. [Priority 3]."
Clicking on the word Dane took me to a page that was easy to navigate. I had two methods available to find a job. Either I could fill in a search field or click on links that listed major occupational areas. Working my way down to the job listings for the computer field revealed a major problem with the page information. There are icons on the page that let a person know if the job is on a busline, if the job is an apprenticeship or if it is associated with an employment agency, and NONE of the icons have alt text. Many times images are not important to the content in the page, but in this case valuable information will be missed by some people.
I navigated around the Department's site, beyond looking for a job, and felt that the biggest problems with the site were in the inconsistent handling of image ALT text and due to the fact that the site is so big you easily got lost. I found that images were often used for section headings that might be better off as actual text (Checkpoint 3.3). Sometimes the heading images ALT text is the name of the image which includes the image size, and sometimes the heading image ALT text is a name like Job Seekers Tab and I am not sure why the word "Tab" needs to even be included. I found images with no ALT text at all and finally the opposite, spacer gifs that had ALT text when they should have been empty quotes.
The home page has some buttons that break the site down into major areas that might help direct a person by who they are (workers, employers, family/youth, staff and partners etc.) That was a good start, but the ALT text could be confusing. The button images ALT text says "DWD workers, DWD employers, etc." This could be confused to mean information for Department staff not clients, and to top it off DWD is not defined anywhere; Checkpoint 4.2 expand each abbreviation or acronym in a document where it first occurs.
I noticed at the foot of (almost) every page is a set of navigation links. The links are labeled "DWD Building Entry Map | Accessibility | Legal Information | DWD Webmasters". In my opinion, this prime location is being wasted with miscellaneous information and could be put to better use by linking to the major areas people are concerned with. I also felt that the header wasted prime navigation space (I cheated and turned the images back on for a second to see what I was missing.)
Lastly, this internet site does not use stylesheets (Checkpoint 3.3) and does not validate to any formal published grammar (Checkpoint 3.2).
Plus - Text size can be modified through the browser. Breadcrumbs at the top of some pages helped a little with site orientation. Good breakdown of information on home page. Good contrast between background and foreground (with colors turned on). The site itself is not too bad (if you get rid of the image ALT text issues) but problems arose when I tried to complete a task that required the use of a Web application. This is a good example of how standards need to be communicated to the programmers as well as the designers.
Minus - Confusing, inconsistent, unnecessary or missing ALT text on images. Difficult navigation due to size of site and not-the-greatest navigation techniques. Site does not validate to formal published grammars nor does it use stylesheets.
I could complete my task of finding a job, but there were some obstacles.
The first thing I noticed at the Amazon.com home page was that there are a BUNCH of images at the top of the page with no ALT text.....hummm what are they for? I turned the images back on and here were some very important links delivered as client-side image maps. I had asked the question up above, why the client-side image map ALT text was not appearing, but here on Amazon.com there is no ALT text used in their image maps. Anyway, it does appear that some of the image-map links are reproduced as regular links elsewhere on the page, but definitely not all of them.
Looking down the home page showed many images without ALT text, I found that surprising considering how big and popular the site is. Many of the images were labeled the same, "Icon". I turned images back on, thinking these were probably just bullet icons, but nope - another surprise. The icons represented categories of products as an additional aid to the descriptive text. The weird thing is the ALT text could have been descriptive of these categories also. These icons could have had ALT text that said "toys, DVD, VHS, electronic, health & beauty, book, etc."
The home page allows a person to search Amazon.com. There are two methods to search the site, a drop-down select list with major categories and a search field where you can enter keywords and hit the GO button. Only problem is that there are no directions on using the search field and the GO button is an image with no ALT text. (Checkpoint 11.4 Graphical Buttons)
Then I noticed that Amazon has a "Text-Only" link. These pages are way better for people who cannot or do not want to see the images. All the header links and the Go button are included in this page. BUT you must go all the way to the bottom of the graphics view mode page to FIND this Text-Only link and hey, guess what? Way down here by the Text-Only link is a search field with the same GO button image as appeared at the top of the page BUT it DOES have ALT text that says GO....GO FIGURE!
I tabbed through the header links that I could not see and could not skip (Checkpoint 13.6 Grouping and bypassing links) and got to the Books link. I worked my way down through the links to the database books that I was interested in. I felt that Amazon did a good job with the links and categories, but there are SO MANY links to tab through! I easily found what I was looking for, because I COULD SEE what I was looking for. There are breadcrumbs at the top of the pages that kept me orientated on where I was in relation to the entire site. The biggest problem on the graphics mode view is Amazon's lack of ALT text on many of the images. I turned images back on at this point, just to see what was missing, and found some important images were missing the ALT text - Add to Shopping Cart, Add to Wish List, Use One-Click Shopping, but I suppose Amazon feels I could be on the Text-Only site and then this would not be a problem.
So I switched over to the Text-Only page and went through the motions of buying a book. It was frustrating to tab through 43 header links, 5 form controls, the breadcrumb links, an Add Favorites button (which I clicked on to see what it would do and was taken to another page), OK you get the idea..... I had to click through a whole bunch more links to get to the book I wanted to order. And I might have gone deeper into the categories if I had NOT been able to SEE the book I wanted was on this page, just further over. And I have not even gotten to the point where I get to Add to Shopping Cart yet!
Plus - Text size can be modified through the browser. Breadcrumbs at the top of pages that helped with site orientation. Good break-down of categories. Uses some Stylesheet formatting.
Minus - Missing ALT text images. Difficult navigation due to size of site and the amount of links per page. If I was blind I think I would give up and get somebody to drive me to a bookstore. Must be a lot of work to maintain both a graphic mode view and a text-only view. Site does not validate to formal published grammars.
It was frustrating to order a book, and I am not sure if I could do it without being able to see the pages.
I picked the W3C next, because I was worn out by the last two sites :-)
Nice home page, not a lot of image placeholders and the ones that are there are well described in the ALT text. Links at the top of the page are repeated at the bottom so you do not need to return to the top for these links. I like the layout - main technologies listed on the left, with major news in the middle, and main categories on the right.
Checking out the Accessibility link showed these pages to be very accessible. They had skip links allowing a person to skip over header navigation, the only thing weird about this was that using this skipped you over the quick-links that laid out and allowed you to click straight over to the major discussion areas on the page. There was also a cool link that allowed a person to change the layout of the page from two-columns to a linear layout. Weird thing about this one is that somehow I would get caught in a loop trying to use the skip navigation bar link and the change column layout link, I kept getting hopped back to the start (the browser URL field).
One thing I did notice is that the W3C logo is used to take you back to the home page, probably it would be a good thing to include the words Back to the Home Page in the alt text.
Plus - Text size can be modified through the browser. Good organization on the home page. Limited use of images increases readability. Fairly consistent navigation from each main technology section to another. Consistent use of ALT text. Pages validate to formal published grammars. Use of stylesheets.
Minus - Some inconsistency among the different technology sections in concern to navigation (some sections were missing the back home W3C logo, some sections have quick links at the top and some do not), but on a whole I find this site to be enjoyable to navigate. I am a little amazed when you consider the VAST amounts of information that the W3C provides.
I could complete my task of reading up on Web standards.
I subscribe to the XHTML List, a Yahoo! groups forum. The home page for this group turned out to be interesting. First thing I noticed was I had to scroll from left to right. Yuck! Interestingly enough, this is how the site must always be I just never noticed because I don't use the junk in the far right hand column. I thought that the tables must have been set to absolute widths, which is an issue addressed in Checkpoint 3.4, but upon viewing the HTML I found all the tables set to 100%. So I am not sure why the scrolling occurs unless it has to do with all the no wrap attributes on the TD cells. Once you get off the home page the scrolling issue is better (less distance to scroll) and if you make the viewable text size smaller you can eliminate the scrolling all together (except on the home page).
There are some images with ALT text that is missing or not very descriptive. Take for example the image that says "Click Here". You click on the image and it takes you to some Airline ticket site. Crappy! I noticed the biggest image ALT tag offenders on the Yahoo! groups site are the banner ads.
There should definitely be skip links for the repetitive information on the left side of the pages and all the header links. It is frustrating to tab through all that to get to the messages. Then you choose a message and have to tab through all of them again before you can read the message text.
Plus - Text size can be modified through the browser. Good contrast between background and foreground when colors are turned on.
Minus - Missing or non-descriptive ALT text. Scrolling from left to right on home page (and on other pages if the browsers view text size is large). Lots of tabbing through repetitive links, the site would benefit greatly if there were skip links for these areas. Site does not validate to formal published grammars nor does it use stylesheets.
I could complete my task of reading the posted messages, but it was difficult due to all the repetitive tabbing. I am not sure if I could post and read all that I wanted to if I could not see.