Accessibility Is Not CSS!

The biggest barrier to creating an accessible Internet is not browser support or badly designed syntax, but rather people's false beliefs of what accessibility is; what it means to 'be accessible'. For many people, being accessible means switching from font tags to CSS, using em tags for italics, and replacing tables with divs. THAT IS NOT ACCESSIBILITY!

Accessibility has nothing to do with stylesheets; indeed it can be seen specifically as creating pages that will display sensibly without stylesheets. Creating an accessible page means using tags that give appropriate meaning to the content they enclose, and that is not done by blinding replacing <i>italics</i> with <em>emphasis</em>, or changing from a grid layout to a meaningless mess of divs.

The purpose of accessibility is to ensure that a page maintains the meaning that the writer intended, regardless of how the page is output. It is not about simply complying with standards, graceful degradation, etc - it is about ensuring the contents of the page makes sense to all its readers.

I will repeat myself once more to help clarify the point I am trying to make:

To help illustrate this, here are three examples of the same form.

Example 1

The first is coded using traditional misused table tags to produce a grid layout.

<form action="somepage.html" method="post">
	<table border="0" cellspacing="0">
		<tr>
			<td colspan="2">Personal Details</td>
		</tr>
		<tr>
			<td colspan="2"></td>
		</tr>

		<tr>
			<td><b>Name</b></td>
			<td>
				<input type="text" name="name"/>
			</td>
		</tr>
		<tr>
			<td colspan="2"><font size="1">Please provide your name so we know what to call you.</font></td>
		</tr>

		<tr>
			<td>Age</td>
			<td>
				<input type="checkbox" name="age" value="-17"/> 0-17
				<input type="checkbox" name="age" value="18-30"/> 18-30
				<input type="checkbox" name="age" value="31-64"/> 31-64
				<input type="checkbox" name="age" value="65+"/> 65+
			</td>
		</tr>
		<tr>
			<td colspan="2"><font size="1"><i>this field is optional</i></font></td>
		</tr>

		<tr>
			<td><b>Location</b></td>
			<td>
				<input type="text" name="location"/>
			</td>
		</tr>
		<tr>
			<td colspan="2"> </td>
		</tr>

		<tr>
			<td colspan="2"></td>
		</tr>
		<tr>
			<td colspan="2">
				<input type="submit" value="ok"/>
				<input type="reset" value="cancel"/>
			</td>
		</tr>
	</table>
</form>

Example 2

The second is simply a conversion of this into divs, which makes the layout more flexible but is no more accessible.

<form action="somepage.html" method="post">

	<div class="formSection">Personal Details</div>


	<div class="formField">
		<div class="formLabel"><strong>Name</strong></div>
		<input type="text" name="name"/>
	</div>
	<div class="formHint">
		<small>Please provide your name so we know what to call you.</small>
	</div>


	<div class="formField">
		<div class="formLabel">Age</div>
		<input type="checkbox" name="age" value="-17"/> 0-17
		<input type="checkbox" name="age" value="18-30"/> 18-30
		<input type="checkbox" name="age" value="31-64"/> 31-64
		<input type="checkbox" name="age" value="65+"/> 65+
	</div>
	<div class="formHint">
		<small><em>this field is optional</em></small>
	</div>


	<div class="formField">
		<div class="formLabel"><strong>Location</strong></div>
		<input type="text" name="location"/>
	</div>


	<br/>

	<div class="formControls">
		<input type="submit" value="ok"/>
		<input type="reset" value="cancel"/>
	</div>

</form>

Example 3

Finally we have an example of one way to create accessibility, with the markup providing clear information about what each part of the form is.

<form action="somepage.html" method="post">

	<fieldset class="std">
		<legend>Personal Details</legend>


		<div class="required field">
			<label class="indiv header" for="name">Name</label>
			<input type="text" name="name" id="name"/>

			<small class="hint">Please provide your name so we know what to call you.</small>
		</div>


		<div class="optional field">
			<label class="header" for="age">Age</label>

			<input type="checkbox" name="age" id="age_0017" value="-17"/>
			<label class="indiv" for="age_0017">0-17</label>

			<input type="checkbox" name="age" id="age_1830" value="18-30"/>
			<label class="indiv" for="age_1830">18-30</label>

			<input type="checkbox" name="age" id="age_3164" value="31-64"/>
			<label class="indiv" for="age_3164">31-64</label>

			<input type="checkbox" name="age" id="age_6599" value="65+"/>
			<label class="indiv" for="age_6599">65+</label>
		</div>


		<div class="required field">
			<label class="indiv header" for="location">Location</label>
			<input type="text" name="location" id="location"/>
		</div>

	</fieldset>


	<fieldset class="controls">
		<input type="submit" value="ok"/>
		<input type="reset" value="cancel"/>
	</fieldset>

</form>

DISCLAIMER: I am not claiming this final example is perfect, but it is hopefully sufficient to demonstrate what I've been saying

By using accessibility we are making it easier for people to understand our content, regardless of their method of accessing that content. And if that isn't motivation enough, making your pages accessible will greatly improve your search engine rankings too.