10 Ways To Make Your XHTML Site Accessible Using Web Standards

Advertisement

Without argument, one of the most important things to consider when creating a website is that it be accessible to everyone who wants to view it. Does your website play nice with screen readers? Can a user override your style sheet with a more accessible one and still see everything your website has to offer? Would another Web developer be embarrassed if they saw your code? If your website is standards-compliant, you could more confidently answer these questions.

Accessibility

Let’s take a look at 10 ways to improve the accessibility of your XHTML website by making it standards-compliant. We’ll go the extra mile and include criteria that fall beyond the standards set by the W3C but which you should follow to make your website more accessible. Each section lists the criteria you need to meet, explains why you need to meet them and gives examples of what you should and shouldn’t do.

1. Specify The Correct DOCTYPE

Specify the correct DOCTYPE

Criteria.
The Document Type declaration (DOCTYPE) is an instruction that sits at the top of your document. The DOCTYPE is required to tell the browser how to correctly display your page.

Why do I need it?
Without a proper DOCTYPE declaration, the browser tries to automatically assign a DOCTYPE to the page. This can slow down the rendering of your page and cause the page to be displayed inconsistently or incorrectly in different browsers. Consistency is the name of the game when it comes to accessibility.

Okay, so what do I do?
Include a proper DOCTYPE at the top of each page of your website. XHTML 1.1 is recommended, but XHTML 1.0 Strict is an option as well.

  • XHTML 1.1
    This is the cleanest way to code your website. All style for the website is contained in external CSS files. Be sure to add the XML declaration at the top, which is essential because XHTML 1.1 is considered to be true XML.
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    Note: if you are using XHTML 1.1, you cannot include the XML declaration for visitors who are using Internet Explorer 6. Instead, to support IE6 users, you should conditionally display the XML declaration.

  • XHTML 1.0 Strict
    An alternative to XHTML 1.1. The technical differences between the two are minor, but using XHTML 1.1 is recommended to accommodate future website growth.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Two other XHTML 1.0 declarations exist for niche uses. But using either of these DOCTYPEs is discouraged.

  • XHTML 1.0 Transitional
    This is used for pages that need to be viewed on legacy browsers that don’t support CSS. Transitional allows inline styles to be applied to elements.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • XHTML 1.0 Frameset
    Use Frameset only on websites that require HTML frames. Of course, static CSS divisions should be used instead of HTML frames, right?
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

2. Define The Namespace And Default Language

Define the Namespace and Default Language

Criteria.
The XHTML namespace and default language of your page must be included in the <html> element.

Why do I need it?
XHTML websites should define the default namespace. A namespace defines all of the elements you can use within the page. Setting a default language allows a screen reader to tell the visitor which language the page is in without even seeing the content. It is also required by W3C standards.

Okay, so what do I do?
Append the xmlns and lang attributes to the <html> element. In XHTML 1.1, the lang attribute is xml:lang.

  • XHTML 1.1
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  • XHTML 1.0
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en">

3. Supply Proper Meta Tags

Supply proper Meta tags

Criteria.
Supply the http-equiv, language, description and keywords meta tags in the <head> element on your page.

Why do I need it?
The http-equiv meta tag is by far the most important. Used in conjunction with the DOCTYPE, it helps the browser display your page correctly. The language meta tag is important for non-English websites, but it has become common practice to include it on every page, despite the language. The description and keywords meta tags are required more for accessibility than to meet standards because they are commonly used by screen readers.

Okay, so what do I do?
Include these four meta tags in the <head> element on your page.

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="language" content="en" />
<meta name="description" content="Updating Windows using Microsoft Update" />
<meta name="keywords" content="updating, windows, microsoft, update, techworld" />

Make sure the language you specify in the <html> element is the same one you define in the language meta tag. Also, if you are using XHTML 1.1, make sure the encoding specification in the XML declaration matches the charset in the http-equiv meta tag.

4. Use Accessible Navigation

Use accessible navigation

Criteria.
Allow users to easily identify what page and sub-section of a page they are viewing.

Why do I need it?
A majority of websites today use a combination of text, colors and graphic styles to organize and display information. Many people with disabilities cannot see or use graphics and thus rely on screen readers, custom style sheets and other accessibility tools to retrieve information. Regardless of who visits your website, implementing an accessible navigation system helps them quickly and accurately find the information they are looking for.

Okay, so what do I do?
Create a descriptive title for your website, and then split the page into sub-sections using the heading elements.

  • Include exactly one <title> element within the <head> element:
    <title>Smashing Magazine</title>
  • Include exactly one <h1> element on the page. The <h1> element should match all or part of your <title> element:
    <h1>Smashing Magazine: We smash you with the information that makes your life easier. Really!</h1>
  • All heading tags (<h1>, <h2>, etc.) should have textual content. Alt tags on images do not count.

    Incorrect:

    <h2><img src="logo.png" alt="Smashing Magazine" /></h2>

    Correct:

    <h2><img src="logo.png" alt="Smashing Magazine" />Smashing Magazine</h2>

5. Properly Escape JavaScript

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

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 &amp;
  • Replace " with &quot;
  • Replace < with &lt;
  • Replace > with &gt;
  • Other HTML entities1

Example:

<a href="http://www.example.com?page=1&amp;view=top">A &quot;Cool&quot; Link</a>
<code>&lt;div id=&quot;content&quot;&gt;Test information.&lt;/div&gt;</code>

7. Use Only Lowercase Tags And Attributes

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 so2.

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

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

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

Correctly use CSS attributes "id" and "class"

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>

Summary: Validate, Validate, Validate!

Using all the techniques in this article, you’ll be well on your way to a more accessible, standards-compliant website. But don’t stop there! Continually validate your website and address problems immediately. Here is a list of validators you should run on every page you create:

(al)

Footnotes

  1. 1 http://htmlhelp.com/reference/html40/entities/special.html
  2. 2 http://www.w3.org/TR/xhtml1/#h-4.2
  3. 3 http://validator.w3.org/
  4. 4 http://jigsaw.w3.org/css-validator/
  5. 5 http://www.cynthiasays.com/
  6. 6 http://fae.cita.uiuc.edu/

↑ Back to top Tweet itShare on Facebook

Michael Irigoyen is a Web developer and graphic designer for Computer Infrastructure Support Services at Illinois State University.

Advertising
  1. 1

    @Damien – #151

    “Actually, when an image only has a decorative function it’s fine to use the alt attribute like this: alt=” “. A space will satisfy the W3 validator and you’re not bothering visually impaired users with useless information (e.a. ‘drop shadow’).”

    Almost, Damien. :-) A null value (alt=””) is better for decorative images so screen readers won’t read the value as “space”.

    The article’s not about accessibility b/c most items don’t affect accessibility. Even if you call it building from the “first steps” it misses the mark. Yeah, you should address web standards and good coding on any site, but do real accessibility. Some really good accessibility info at 456bereastreet.com, jimthatcher.com, wait-till-i.com, & webaim.org

    1
  2. 152

    Can’t believe I just read “alt tag” in an article on Smashing Magazine… for once and for all: it’s an attribute not a tag!
    Apart from that (a pet peeve of mine) a fine article :)

    1
  3. 303

    “Thanks for the post… but if you don’t know this very basic, simple, foundational stuff and still make websites — get out of web design.” – Chris McCorkle

    I think its important to remember that you have to start somewhere mate….

    anyway thanks for this post, always useful to know this stuff, especially if you are learning all the time like me.

    0
  4. 454

    So in other words, make your shit xhtml valid. I think I have that down. I’m gonna go back and check though. ;) Thanks for posting this.

    0
  5. 605

    All images need to have width=”” and height=””.

    it’s not true

    0
  6. 756

    I will not escape the script tag.
    We were told to escape the script tag long ago because older browsers could not recognise it.
    I am not coding for older browsers and I am doing my best to “boycott” browsers which do not anticipate the script tag.

    Escaping the script tag adds additional keystrokes to my programming and creates visibility problems to my code. Therefore, I urge readers to ignore the advice to escape the script tag.

    I will not supply the doctype, because I expect browsers to understand basic html. I will not allow the “discooperativeness” of the browser industry to ruin my programming fun. I will not cooperate with their own poorly coordinated uncooperative standards. I will use GWT and write only for major browsers. If someone chooses not to use Firefox or IE, that is their funeral which I shall not attend.

    Except for the advice given to improve visibility of your pages, I urge readers not to give heed to the advice dished out here that panders to the disarray of the browser industry. Heeding to the advice here means applauding the bustling contribution toxic cleanup crew provides to the economy because we continue to allow the spilling of toxins onto the ground. Heeding such advice is like agreeing with GW Bush that we should buy SUVs to help whip up the economy.

    0
  7. 907

    Chris McCorkle,
    At post #57 you promised we’d be impresed with the validation of your site’s code… well, I am impressed to see it fails to validate. Six errors in the official W3C CSS Validator pal!
    I woulnd’t bother if you had not stated with big letters how excellent and compliant your sites are. Period.

    0
  8. 1058

    Using this content for a presenation to the top university in Thailand, to home in on Web Standards

    0
  9. 1209

    Sorry, but you’re incorrect there… tags need href and src, width and height are optional.

    0
  10. 1360

    If it’s used purely for visual style, it better be kept in the stylesheet, not included as an

    Otherwise, all tags must have an alt attribute, plain and simple.

    0
  11. 1511

    Great article. Thank you very much for putting it all together on one page.

    You don’t answer the most important question, though: How do I make my colleagues read this without appearing like a complete nitpick? ;-)

    0
  12. 1662

    I think you did a good job in explaining and laying it out. This information is very good to even attempt to explain to those non-technical people that sign our pay checks on the basics/accessibility requirements. Funny how people are taking this article apart and dissecting it as if you was trying to say “This is the only way – period.” Obviously that is not the case. I realize this was written awhile back – but it just came across in one of my emails.

    0
  13. 1813

    @Craig appears to be right — could you please update the article to reflect his comment? This is a fairly critical error.

    0
  14. 1964

    This is great for beginners, but for pros, nothing new, I recommend my friends to read this articles.

    0
  15. 2115

    You have a very nice set of tips here. Navigation is one of the main issues of web users and if the site is not easy to navigate they probably wont waste their time trying to figure it out. Thanks for sharing.

    0
  16. 2266

    Woo hoo, I read this article to see if I was missing something but I do it all correctly :-)

    I use CSE HTML Validator which tells me if I make any mistakes, deffo recommend it (admin feel free to remove that line if you think I’m trying to gain from it).

    Thanks.

    0
  17. 2417

    If you want saving cash with coupon requirements and also offers you will usually find the most recent coupons, bargains and also promotion rules from CleverCouponChick.com.

    -1
  18. 2568

    If you’d prefer saving cash together with coupon unique codes as well as offers you are going to always get the latest discount coupons, offers and campaign rules from CleverCouponChick.com.

    -1
  19. 2719

    If you love spending less along with coupon unique codes and offers you’ll usually find the latest coupons, bargains along with marketing unique codes with CleverCouponChick.com.

    -1
  20. 2870

    If you value spending less along with coupon rules along with deals you are going to usually discover the latest discount coupons, deals and also promotion requirements from CleverCouponChick.com.

    -1

↑ Back to top