Today I did a review over my school’s website, http://www.francistuttle.edu. More specifically, my school’s home page. Even more specifically, the coding structure and possible errors in the coding of my school’s home page. In order to do this, I used two separate tools as an aid to check the coding and to see if there were any errors, warnings, or little missing things. The tools I used are Wave (wave.webaim.org) and AChecker (www.achecker.ca/checker). Here are the problems that were found:
Both web sites (Wave and AChecker) spotted that the image links on the left side of the main content lacked alt=”” tags. For those of you who don’t know what alt tags are, they are short descriptions of a particular image that appear when the image itself is unable to load. In this example, the image link of the “Blackboard Login” on the school home page would just show a blank square with a little red “x” symbol if the image couldn’t load. However, if there were an alt tag, it would still show the little red x, but would provide a description of what the image is or where the link goes. Example: alt=”Blackboard Login”.
Another problem spotted by both web sites is that there are several areas with input tags, but no label in which to contain the input tags. Now for those of you who don’t know what this means, it probably doesn’t matter. However, to someone who wants their web site to validate, it’s a big deal… or, at least, a deal deal…
After using the W3C’s (World Wide Web Consortium) code validator to get a better look at what validates and what needs to be changed, I found a lot more problems. However, most of the problems found would actually not be problems if the document type wasn’t “strict”. So, because those aren’t exactly the kind of errors I’m looking for, I’m deciding to ignore those. The biggest problem the validator truly had was the alt tag. So, I decide to look at the source code and see what is happening. Here’s a copy of the line of code, dealing with the Blackboard image link I mentioned before.
<a target=”_blank” href=”http://bb9.francistuttle.edu/” alt=”Login to Blackboard”><img src=”http://www.francistuttle.edu/Media/Website Resources/images/banners/bblogin.png” border=”0″ alt=”” /></a>
If you’ll notice, there is an alt tag within the anchor element, however, not in the img element. That’s where the problem lies. All that needs to be done is the alt tag that says: alt=”Login to Blackboard”, needs to be copied to the empty alt tag (alt=””) in the img element. Blam! Problem solved!
Well, that’s my review of the Francis Tuttle home page. Using Wave, AChecker, and just a dash of code validation, I was able to find some key errors and specific locations in the code for those errors, and was able to figure out how to fix them! All-in-all, the school’s home page is pretty well built. A few things could be added, and it wouldn’t hurt for someone to change the document type… (Changing the document type to transitional from strict then revalidating it shows 4 warnings and 1 error, as opposed to 18 errors and 2 warnings.)
Tyler Shipe, out!
ShipeHappens 