10 Ways To Make Your Site Accessible Using Web Standards
5. Properly Escape JavaScript
Criteria.
When including JavaScript directly on the page, you should properly escape it as character data.
Why do I need it?
In HTML, text in the <script> element is rendered as CDATA (character data). In XHTML, text in the <script> element is treated as PCDATA (parsed character data). PCDATA is processed by the W3C validator and, therefore, must be escaped properly as CDATA. In addition, while most screen readers are intelligent enough to ignore content within the <script> element, regardless of the type of data it contains, if the code isn’t correctly escaped, another potential point of failure is created in accessibility.
Okay, so what do I do?
Use the CDATA tags around any content in the <script> element. We also comment out the CDATA tags for legacy browser support.
Example:
<script type="text/javascript">
//<![CDATA[
$(function() {
$('#divone').tipsy({fade: true, gravity: 'n'});
$('#divtwo').tipsy({fade: true, gravity: 'n'});
});
//]]>
</script>
6. Properly Escape HTML Entities
Criteria.
Ampersands, quotes, greater- and less-than signs and other HTML must be escaped.
Why do I need it?
Using HTML entities, especially in URLs, can cause not only validation problems but also usability problems. For example, the ampersand (&) happens to be the initial character in HTML entities. If you do not properly escape the ampersand, the browser assumes you are telling it to show an HTML entity, one that doesn’t even exist.
Okay, so what do I do?
Escape HTML entities with their appropriate entity value.
- Replace & with &
- Replace " with "
- Replace < with <
- Replace > with >
- Other HTML entities
Example:
<a href="http://www.example.com?page=1&view=top">A "Cool" Link</a> <code><div id="content">Test information.</div></code>
7. Use Only Lowercase Tags And Attributes
Criteria.
All elements and element attributes must be lowercase. Attribute values can be both uppercase and lowercase.
Why do I need it?
Because the XHTML standard set by the W3C says so.
Okay, so what do I do?
Make sure you use only lowercase for all elements and attributes. A common mistake most developers make is using uppercase letters when giving an element JavaScript attributes (e.g. onClick, onLoad, etc.).
Incorrect:
<A href="#" onClick="doSomething();">Send us a message</A>
Correct:
<a href="#" onclick="doSomething();">Send us a message</a>
8. Label All Form Input Elements
Criteria.
All form elements should be given a <label> tag.
Why do I need it?
The <label> element adds functionality for people who use the mouse and a screen reader. Clicking on text within the <label> element focuses the corresponding form element. Screen readers can read the label so that visitors know what information to provide.
Okay, so what do I do?
Add a <label> element to each field in your form.
Example:
<p><label for="searchbox">Search: </label><input type="text" id="searchbox" /></p> <p><input type="checkbox" id="remember" /><label for="remember"> Remember</label></p>
9. Supply Alternative Content For Images
Criteria.
Every image on your page should be accompanied by a textual alt tag.
Why do I need it?
The alt tag tells visitors what an image is if it cannot be displayed or viewed. The Americans with Disabilities Act dictates that all images must have an alt tag.
Okay, so what do I do?
Include one with every image. The alt tag attribute must include text and cannot be left blank. If you use images in your design for stylistic reasons alone, find a way to achieve that style using CSS. And don’t forget to provide explicit values for width and height of your images.
Incorrect:
<img src="picture.png" /> <img src="spacer.gif" alt="" />
Correct:
<img src="picture.png" alt="A warm sunset" width="450" height="350" />
10. Use The "id" And "class" CSS Attributes Correctly
Criteria.
When using CSS attributes, use each "id" only once on a page. Use each "class" as much as you want.
Why do I need it?
Developers often get careless and include an "id" multiple times on a single page. This can create unexpected results across different browsers and get you a big red “Validation Failed” from the W3C.
Okay, so what do I do?
Be certain to use a particular "id" only once on a page. If you need the same style applied to mutliple elements, use the "class" attribute.
Incorrect:
<p id="leftNav">Home</p> <p id="leftNav">Contact</p>
Correct:
<p id="homeNav" class="leftNav">Home</p> <p id="contactNav" class="leftNav">Contact</p>