Accessibility Tutorials
Making Accessible Web Pages
When building accessible web pages the main goal is to keep things well structured and properly labeled. The following is a list of tips to help you make pages more accessible to your audience who may be using different size/resolution of monitor, PDA's, cell phones, text based browsers, or screen readers to view your site. If your site is in the Cascade Content Management System, many of these suggestions are already in place on your site.
Properly Title all of your pages
Make sure all of your pages have a unique title within the head tag similar to the following:
<title>SIUE Web Publishing - Building Accessible Web Pages</title>
This title should also include some or all of the content from the (one and only one) <h1> tag and preferably the first <h2> tag on your page. The more descriptive your title, the more likely you are to show up high on the list within search engines.
Properly use header elements to define your content
Make sure that when you use header elements, that they are properly structured or nested. Such as:
h1…h2…h3
or:
h1…h2, h3, h3… h2, h3, h3
not:
h2…h1…h3
or:
h2…h1, h3, h3…h3, h1, h2
Properly Label all of your form controls
If you create any forms on your page, make sure to stick to these guidelines.
-Always use labels that match the id of the element
-Always use place holder text
The following examples should cover anything you will run into.
Text Box: These fields need to have a value attribute as well as an id attribute that matches the label. They also need a place holder value. This value can be set to disappear once clicked by using: onfocus="this.value='' "
<input type="text" id="realname" value="Enter your name here" onfocus="this.value=''"><label for="realname"> Name</label>
Select Controls: Select controls need one id attribute that matches the label as well as one of the options selected by default with selected="selected".
<label for="color">What is Your Favorite color?
<select name="color" id ="color" >
<option value="blue" selected="selected">Blue</option>
<option value="red">Red</option>
</select>
</label>
Radio Buttons/Check Boxes: Radio buttons and checkboxes need one id attribute that matches the label as well as one of the options selected by default with selected="selected".
<legend><h2>What is your favorite color?</h2></legend>
<ul>
<li><label for="blue"><input type="radio" name="color" id="blue" checked="checked" /> Blue</label></li>
<li><label for="red"><input type="radio" name="color" id="red" /> Red</label></li>
</ul>
Text Area: Text areas need a label corresponding to an id attribute as well as a place holder for the text which is within the textarea tags. In this example, the place holder is "Please Enter Your Comments."
<label for="comments">Comments</label>
<textarea name="comments" id="comments" rows="10" cols="40" onfocus="this.value=''">
Please Enter Your Comments.
</textarea>
Use a header element to describe any navigation bars or menus
It is good practice to precede any navigation bars or menus on your page with a header element. This is helpful to anyone viewing your page, without style sheets or using a screen reader, so they can quickly and easily navigate through your site. An example is shown below.
<h2>Main Site Navigation</h2>
<ul>
<li class="red"><a href="/apply/index.shtml">Apply Now!</a></li>
<li class="grey"><a href="/about/index.shtml">About SIUE</a></li>
<li class="grey"><a href="/contact/index.shtml">Contact SIUE</a></li>
<li class="grey"><a href="/maps/index.shtml">Maps & Directions</a></li>
<li class="grey"><a href="/search/index.shtml">Search SIUE</a> </li>
</ul>
If you would prefer not to show the header on the page, you can hide it using styles. This allows you to leave the appearance on your site you already have, while increasing your site's accessibility. An example is shown below.
<h2 style="position: absolute; left: -200em; top:-20em;">Main Site Navigation</h2>
