This is part of a series on accessibility and usability. See the contents page for more.
The first step to creating accessible and usable websites is to create clean, semantically marked and validated up XHTML.
Well formedness, doctype, and validation
First, code should be well formed, and adhere to the doctype declaration at the top of the page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
The doctype declaration tells the browser what the code should look like. You can read more about doctypes here.
One of the aspects of good XHTML, is well formedness – which basically means that all the elements are nested correctly.
<html><body></body></html>
This is nested correctly
<html><body></html></body>
This is not nested correctly
You can validate your webpage using an HTML authoring tool, or for free online (more on that later). The fewer validation errors you have, the more accessible and usable your website will be.
Semantic Markup
Semantically marked up content refers to content that uses HTML tags as they were intended to mark up the content.
For instance, the <h1>, <h2>, and <h3> tags refer to first, second, and third heading, respectively. they are meant to be used much as one would arrange an outline.
As an example, take this page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Main Library, Anywhere USA-Upcoming Events</title>
</head>
<body>
<h1>Main Library, Anywhere USA</h1>
<h2>Upcoming Events</h2>
<h3>October</h3>
<h4>Week one</h4>
<h4>Week two</h4>
<h4>Week three</h4>
<h4>Week four</h4>
<h3>November</h3>
<h4>Week one</h4>
<h4>Week two</h4>
<h4>Week three</h4>
<h4>Week four</h4>
</body>
</html>
So, for every web page, you should have an <h1> tag, which is usually the title of the website, and use <h2> – <h6> tags as needed to separate the content.
The <title> tag in the header of the HTML is important as well – you should have a title that is unique to each page. Many websites use put the name of the site first, and then the name of the specific page your are on.
fig 1: Page without style
Other information on the page might include lists, tables and paragraphs. For instance, navigational elements are best presented as a list of items. Sub navigation could be represented as a sub list. Blocks of text should be enclosed in <p> paragraph tags. Tabular data should be presented in tables.
There are several old HTML tags that are no longer used because they have no semantic purpose – these include the <font>, <i>, and <center> tags. The <span> and <div> tags are semantically neutral, and this is how we add style – colors, fonts, sizes, etc., to our webpages.
One way to check the semantic markup of your webpage is to turn the styles off in your browser – while not foolproof, this gives a good indication of how well marked up your document is. You should see a neat page, white background, black text, which is easy to follow and linear – i.e. there shouldn’t be columns. (fig 1.)
For more information, see this Guide to Semantic Use of HTML Elements.
Images
You cannot avoid using images in your web page, but you can mark them up so users without sight (or users who have images off) can still know what the images are. Alt tags should be used only for images that have presentational meaning on the page. So, for instance, if you use an image for spacing (which should not be necessary anymore) you would use no alt text. An image may also have a title attribute where you can specify additional information about an image. The title tag will show up when a user mouses over an image. The alt tag will show up if the image cannot display (for instance, screen readers).
The title attribute is also useful for links. When it is not clear from linked text what you are linking to, or you are linking using an image, you should give additional information with a title attribute.
In short, the alt tag should be used for images that affect the meaning of the page, and the title tag should be used for additional information about decorative images.
<a href="help.html" title="Link to help page">
<img src="help_graphic.jpg" alt="Help Page" title="Your helpful librarian" />
</a>
More information on the alt and title tags.
One final note about images- whenever possible, don’t use an image in place of text on your website. Not only does it make the website harder to change, but it makes it harder for the user to do simple things with your content, like print out a nice copy or access the content with a screen reader. Sometimes, this might mean compromising on a design, but in the end, the accessibility boost is usually worth it. For limited amounts of images with text – say, a specific organizational logo, be sure to use alt text as described above.
CSS (Cascading Style Sheets)
I won’t go much into style sheets (you can take a course or read a book if interested), except to say when you use CSS to specify the font size, to use ems instead of font size. If you do this, the font size will be based off what the user has set – so if they have a large or small font size as their default, your page will reflect that. A good article on sizing text with ems can be found on A List Apart, “How to Size Text in CSS.”
Conclusion
The point of having clean, well formed, semantic XHTML is to present your content so that many different devices can access it. the upside to this is that this approach optimizes your site for accessibility (for instance, screen readers) and usability (for instance, you can easily create a version of your site for a mobile device). This also, incidentally, optimizes your site for search engines to find it, since the same principles that allow screen readers to parse your site also work to allow search engines to index your site. Once the code of your page is clean, it will also be easier to apply your design using CSS.
