The Twelve Days of an Accessites Christmas
On the first day of Christmas, my website gave to me
And DOCTYPE va-a-alidity!
On the second day of Christmas, my website gave to me
Two different stylesheets,
And DOCTYPE va-a-alidity!
On the third day of Christmas, my website gave to me
Three alt texts,
Two different stylesheets,
And DOCTYPE va-a-alidity!
On the fourth day of Christmas, my website gave to me
Four list items,
Three alt texts,
Two different stylesheets,
And DOCTYPE va-a-alidity!
On the fifth day of Christmas, my website gave to me
Five hyper links,
Four list items,
Three alt texts,
Two different stylesheets,
And DOCTYPE va-a-alidity!
On the sixth day of Christmas, my website gave to me
Six heading levels,
Five hyper links,
Four list items,
Three alt texts,
Two different stylesheets,
And DOCTYPE va-a-alidity!
On the seventh day of Christmas, my website gave to me
Seven IE versions,
Six heading levels,
Five hyper links,
Four list items,
Three alt texts,
Two different stylesheets,
And DOCTYPE va-a-alidity!
On the eighth day of Christmas, my website gave to me
Eight data tables,
Seven IE versions,
Six heading levels,
Five hyper links,
Four list items,
Three alt texts,
Two different stylesheets,
And DOCTYPE va-a-alidity!
On the ninth day of Christmas, my website gave to me
Nine marked-up labels,
Eight data tables,
Seven IE versions,
Six heading levels,
Five hyper links,
Four list items,
Three alt texts,
Two different stylesheets,
And DOCTYPE va-a-alidity!
On the tenth day of Christmas, my website gave to me
Ten user agents,
Nine marked-up labels,
Eight data tables,
Seven IE versions,
Six heading levels,
Five hyper links,
Four list items,
Three alt texts,
Two different stylesheets,
And DOCTYPE va-a-alidity!
On the eleventh day of Christmas, my website gave to me
Eleven spammers spamming,
Ten user agents,
Nine marked-up labels,
Eight data tables,
Seven IE versions,
Six heading levels,
Five hyper links,
Four list items,
Three alt texts,
Two different stylesheets,
And DOCTYPE va-a-alidity!
On the twelfth day of Christmas, my website gave to me
Twelve graders grading,
Eleven spammers spamming,
Ten user agents,
Nine marked-up labels,
Eight data tables,
Seven IE versions,
Six heading levels,
Five hyper links,
Four list items,
Three alt texts,
Two different stylesheets,
And DOCTYPE va-a-alidity!
…so now you want to know what our twelve days represent? It is important to realise that in many cases the number associated with each is not in itself meaningful, and simply has been chosen because it scans (or was the best I could come up with) are as follows:
DOCTYPE validity
DOCTYPE validity is the practice of ensuring that your web pages comply with the “flavour” of HTML that you have chosen to use. In order for a site to pass our initial criteria and make it onto the grading list, it must successfully validate against a Strict DOCTYPE.
Different style sheets
Many websites of have more than one style sheet available for use, and provide a style sheet switcher which can be used by the site visitor (normally relying on a cookie to store information) to change their preferences. Alternate style sheets may be provided for aesthetic purposes — to simply provide a different design — or for reasons of accessibility, to offer a larger font or higher contrast version of the site.
Alt text
An alt text is short for an alternative text and simply means that where non-text information is presented (an image, embedded object or similar) you should provide a text alternate for that in case the user cannot access the primary information. The text alternative should provide the equivalent information to that presented elsewhere.
If the image is decorative or only provides information that is already available elsewhere in the text, a null alt text should be provided alt=”" so that assistive technology is aware that you are deliberately declaring the value as empty, rather than simply forgetting to include it!
Lists
There are three types of lists:
- Ordered lists
- Unordered lists
- Definition lists
- Ordered Lists
- An ordered list is used where you have a series of list items in which the order in which they appear is important. An example of this could be the steps necessary to bake a cake in a recipe book — try them in a different order and things might not turn out so well!
- An ordered list will use the
<ol>element to declare the list as a whole and<li>elements for each individual list item. - Unordered Lists
- An unordered list is used where you have a series of list items in which the order is unimportant. Following on the cake baking concept, the list of ingredients could be presented as an unordered list.
- An unordered list will use the
<ul>element to declare the list as a whole and<li>elements for each individual list item. - Definition List
- A definition list is a list where you have a series of key/value pairs. A strictly semantic interpretation is that the definition list is used to provide descriptions of specific terms — as indeed in this case where a definition list is used to provide information about types of lists — but it is common practice for a definition list to be used for many types of key/value pairs (including the presentation of dialogue).
- A definition list is introduced using the
<dl>element, with the definition terms or key values being presented by a<dt>element, and the definition description or further information being presented within the<dd>element.
Hyperlinks
Hyperlinks are of course the glue that holds the internet together. Well, they’re not so much glue as a series of hypothetical threads that join different web pages (or parts of the same page) together. To over-simplify the point, they are the underlined things you click on…
Six heading levels
Well, there actually are six heading levels, using <h1> through to <h6> as appropriate. The lower the number, the higher the level of importance on the page. You should ensure that your documents are structured with an appropriate hierarchy and that more important headings are not found within less important headings (e.g. the area indicated by an <h3> should not contain a <h2>.
Other examples of good practice with heading use (that is to say, you don’t always have to do it this way, but have a good reason if you don’t want to) is to have only one <h1> element per page, and not to skip any heading levels — i.e. don’t jump from <h1> directly to <h3>.
Seven IE Versions
IE is of course the abbreviation for Internet Explorer, Microsoft’s web browser. While the most up to date version of Internet Explorer is version 7.0, there have been more than seven versions to date, with many “minor versions” such as Internet Explorer 5.5, and the fact that the Mac versions of Internet Explorer were different in many cases from the Windows versions.
The first version of Internet Explorer was released in August 1995, with the official release of Internet Explorer 7.0 occurring in October 2006.
Data Tables
Data tables. One of the common misconceptions is that accessibility gurus, evangelists and/or zealots do not believe tables should be used on web pages. This is not true. Tables should not be used for presentation, as the same effects can be carried out using CSS, but if you have a data set that you wish to present, it may well be perfectly reasonable and appropriate to present it in a tabular format — just make sure you’ve got your table headings marked up correctly!
Labels
Labels are used on forms to ensure that the control on a form (a dropdown box, input box or so on) has an appropriate text message. This is not as simple as providing text that appears next to the control when it is rendered on-screen — you need to associate that text with the control using the label element so that users of assistive technology are able to clearly understand which label is associated with which control.
The for attribute of the label should be associated with the id attribute of the code in question to ensure that the forms controls and labels have an explicitly stated association:
<label for="txtSurname">Surname:<br /> <input id="txtSurname" type="text" size="22" maxlength="50" /> </label>
User agents
One of the things that is important to us here at Accessites is that websites should be able to be accessed by as wide a number of user agents as is practically possible. This does not mean ensuring that our website looks exactly the same in Internet Explorer 4.0 as Firefox 2.0, what is does mean is doing all that is practical to ensure that users can access our content, regardless of how they are accessing the site.
The term “user agent” in this context is broader than simply “browser;” a user agent will also encompass robots and spiders that might want to visit our site, or people that are using assistive technology such as screen-readers to visit our site.
Spammers
As someone with an internet connection you’ve probably come across the spam phenomenon. Maybe you’ve won a lottery you hadn’t even realised you’d entered, maybe the widow of president Ngangi has $18 million she needs to funnel into your bank account, or maybe your bank themselves, or maybe PayPal would just like you to confirm your account details owing to suspicious activitiy on your account. These are all examples of unsolicited email spam.
We at Accessites experience a slightly different form of spam. We get the “every time I see a space to enter a URL I’m going to include my site details regardless” type of spam.
Of course, there is a theoretical dilemma here… what would we do if a spam-related online pharmacy or porn site met our criteria and was accessible? We’ve actually had this discussion and decided that if we believe the site to be illegal, immoral, or unethical, or that it could be perceived as such, we reserve the right to reject it.
Not that this stops the spammers submitting their entries to us, though…
Accessites Graders
Ah; the heavenly host of the twelve Accessites graders. If you look at the Team Access members you will see that there are currently thirteen members. However, one of those does not grade websites, which means that we have twelve graders who grade websites. That’s us. That’s what we do — as well as contributing articles.
At the time of writing, we’ve had 226 genuine submissions, of which 153 failed to meet our basic criteria. Of the remaining 73, 52 have been awarded a grade ranging between the Accessites Notable Site award and the Accessites Classic Award and can be seen in our showcase, 13 are currently in the grading queue and 9 sites passed our initial criteria but didn’t quite do well enough to receive an award.
Want to sing along (or view comments)?
