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 Link

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 Link

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 Link

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 Link

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 Link

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 Link

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 Link

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 Link

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 Link

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 Link

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! Link

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 Link

  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.

Advertisement
  1. 1

    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.

    -8
  2. 2

    All images need to have width=”” and height=””.
    img src="picture.png" alt="A warm sunset"
    is incorrect too.

    0
  3. 3

    third … basic but usefull :) thanks !

    0
  4. 4

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

    The vast majority on Smashing could be considered simple, foundational stuff. You may want to get off your pedestal and realize this information is most likely for people who aren’t very far into web design to begin with.

    Thanks for the article.

    4
  5. 5

    thanks for this article!

    0
  6. 6

    Good article covering the fundamentals, but regarding point 9: It’s not an Alt ‘Tag’ it’s an Alt Attribute!

    1
  7. 7

    Great article and everybody should get to know this stuff, but I’m most definitely on the html side of the xhtml vs html debate. Use 4.01 strict!

    0
  8. 8

    Very basic and resumed, but useful for newbies.

    ps. Why are these in the example codes?

    0
  9. 9

    Now that’s a good article….Although, all the tips are quite basic and known by many of us but its nice to see them in a single compilation. I also about to write somewhat same article. Nice explanations Michael… Thanks for sharing!!

    DKumar M.
    @instantshift

    0
  10. 10
  11. 11

    Nothing new… But my site meets all of these points ))
    Thanks SM!

    0
  12. 12

    Just a few notes:
    – The type attribute is not required for script tags, and is in fact ignored by all browsers.
    – The http-equiv=”Content-type” meta tag should always be the first element inside the head tag. It should be followed by the title element, and then any additional meta tags. It looks like WordPress actually gets this wrong – if you view the source of this page you will see.

    0
  13. 13

    I’d say it’s pretty basic knowledge :)

    0
  14. 14

    Great Article! Expecially because you can consider each tipp as a seo-tipp either!

    0
  15. 15

    Nothing new, but interesting. I want to have more like this… :)

    0
  16. 16

    Shahriat Hossain

    June 18, 2009 5:58 am

    This article seems old one and best practice for the beginners who want to learn markup from the scratch though nice post.

    0
  17. 17

    There’s only a few points here that would actually help with accessibility. Web standards does not necessarily = accessibility. You can have a 100% valid page that is a nightmare for disabled users. And I’m pretty sure – from having done testing with disabled users – that you don’t have to have an alt tag for every image. if it’s decorative, and doesn’t form part of the content, don’t alt tag it. Yes it may cause your automatic validation to fail, but that’s my point – web pages can be accessible without being 100% valid.

    Web standards are important, but please don’t think a valid web page will also by default be an accessible one.

    1
  18. 18

    Raj Kumar Maharjan

    June 18, 2009 6:04 am

    I am thinking advance way to make web standard (more than that). It’s basic way to make web standard page. Hope will post advance way too.

    0
  19. 19

    You forgot to mention that you shouldn’t use xhtml 1.1 as it SHOULD NOT be served as html (rather some form of xhtml or xml) but Internet Explorer won’t understand. That’s an accessibility and standards compliance conflict.
    http://www.w3.org/TR/2002/NOTE-xhtml-media-types-20020801/#summary

    0
  20. 20

    Chris McCorkle wrote:

    “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, you must be the worst fool out there.

    Your own site doesn’t even validate and the errors show that you got even some of the “very basic, simple, foundational stuff” wrong.

    http://validator.w3.org/check?uri=http%3A%2F%2Fchrismccorkle.com%2F&charset=(detect+automatically)&doctype=Inline&group=0

    If youre so cocky, you should follow your own advice.

    You sir, are a FAILURE.

    S

    2
  21. 21

    Regarding Chris McCorkle and Nick’s debate, you’re both arguing the wrong point. Surely if you’re doing HTML/XHTML and CSS then you’re doing web development and not web design. It irritates me when both terms are used interchangeably and incorrectly.

    0
  22. 22

    Pretty basic stuff, but what is with the 2 accessibility validators you listed – they both suck.

    Only a few of the tips you provided were really concerned with disabled ‘accessibility’, which is a shame because it is by far the most neglected area of accessibility.

    And I’m with Chris McCorkle – if, as a web designer, you dont already do all of these things, or you don’t have a really good reason for not doing them (laziness and ignorance not amongst them) – you’re not doing your job.

    -1
  23. 23

    Make sure someone at Microsoft reads this.

    0
  24. 24

    Amazing read! This will change my life forever! :)

    0
  25. 25

    Why do you say that XHTML 1.1 is recommended?

    0
  26. 26

    21st ! woohoo, i’m 21st !!! … @mdzo : please grow up…

    always keep the basics in mind ! useful recap ;) thx

    0
  27. 27

    I have to add that XHTML Strict should be server from server with header application/xhtml+xml.

    0
  28. 28

    This sure is a great guide especially for those who begin to learn more bout XHTML.

    0
  29. 29

    Hmmm… where to start…

    Doctype, namespaces, and meta tags don’t really do anything for accessibility. Always a good idea, but a page that doesn’t have any isn’t “inaccessible”. Description and keywords are not used by any screen reader I’ve ever seen.

    H1 does not have to match the title. It usually will, but there’s no rule that says it has to.

    Images with alt text in headings are perfectly valid and accessible. BAD advice here!

    Unescaped ampersands are read fine by screen readers. Again, not really an accessibility issue, but good advice to encode them.

    No modern screen reader has issues with unescaped javascript or uppercase tags/attributes. Not an accessibility issue.

    It’s the alt attribute, not alt ‘tag’. The alt attribute CAN be empty and SHOULD be empty for decorative images or images that have content conveyed already through text. Your incorrect example with the spacer image is flat out incorrect. This is exactly how you’d code it. CSS is better, but alt=”” is a necessity for many images.

    The ADA says nothing about the web, let alone web accessibility. The W3C has guidelines, as does Section 508 of the Rehabilitation Act.

    While validation is important and supports accessibility, accessibility goes well beyond code validation. Accessibility is a complex area – one that the author clearly needs to research some more. PLEASE do your own research and do not blindly implement the poor advice in the article.

    1
  30. 30

    what a poor article… what’s about HTML 4.01 strict / transitional as the most common doctypes?

    and again – w/o knowing this basics, one shouldn’t develop websites.

    cx

    -1
  31. 31

    Great post! Thanx

    0
  32. 32

    The breaking of the hyperlink as shown in item 7: <a href="#" rel="nofollow">Send us a message</a> is not a good example in an article about making your site more accessible.
    The opposite is true, I think that in this article it is well worth mentioning the use of unobtrusive javascript.

    0
  33. 33

    Smashingmag (like the most sites) isn’t using the h1-Tag in a proper way: It represents the branding and the slogan, not the topic.

    “All heading tags (, , etc.) should have textual content. Alt tags on images do not count”. Hmm.. Why not?

    0
  34. 34

    Nice article.

    For all of you who have said ‘w/o knowing the basics, don’t develop sites..’ or whatever – remember that you were once a beginner…. Get over yourselves and spend your time on other sites if you don’t have anything positive to add.

    0
  35. 35

    Answer to the first post :

    Everybody here knows that the tag has two required attributes: src and alt.

    So why, talking about accessibility, do you say width and height attributes are required ?

    Cause, for me, width and height attributes are only for “normal” browsers to “prepare” the sapce taken by picture while loading it (or scale it, of course).

    Regards,
    Julien

    0
  36. 36

    If your site is for uk visitors then you are also obliged by law to make you sites accessible http://www.w3.org/WAI/Policy/#UK

    Does anyone know of a user group for visually impaired internet users?

    0
  37. 37

    patrick h. lauke

    June 18, 2009 6:39 am

    can i just say, as somebody who’s worked in the accessibility field for years, that almost all of your advice has either nothing to do with accessibility, or actually provides misleading information? this is a piece of confused fluff.

    0
  38. 38

    “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.”

    They have to learn about it somewhere. Don’t they? this article is a nice little collection of accessibility tips. It’s also nice to see them updated with modern examples and doctypes. Most all of this information I find when needing a reference is outdated and makes me question the relevance of it.

    Also, re: image width and height – neither attributes are required, and in fact height is deprecated.

    0
  39. 39

    @Chris,

    No one is saying dont learn how to develop sites if you dont know this – that would be silly – but people actually sell services as a web designer/developer when they dont know the most basic stuff. Those sites are normally of a poor quality, which reflects badly on the rest of us. How many times have the freelancers amongst us lost potential customers because the last ‘freelancer’ they dealt with screwed them over?

    0
  40. 40

    Nice recap thanks !
    But I was wondering why width and height attributs are so important for images ?

    0
  41. 41

    William Lawrence

    June 18, 2009 6:44 am

    I’d say that this article falls under the good initiative but bad judgement category.

    I’d argue that these are great points, however the title ought to be changed to something more appropriate, e.g. some random ten things one can do to be more of a web standardista, per se.

    I’m just saying. Meanwhile, Keep up the good work.

    0
  42. 42

    @Andy
    I think as a general rule img should have an alt attribute, if you’re considering dropping the alt because the image is more decorational than providing content, it shouldn’t be an img in but a background-image in the css.

    If for some reason the image can’t be in the css, then just have an empy alt attribute (alt=””)

    0
  43. 43

    I agree very much with what Jared said above. Not really accesability features listed here, more like things you should know. This really was not a good make-up post from the last terrible article about “horror pictures” which to me was the worst posted here on SM. Running out of content for a blog can sometimes really suck… but posting crap will turn people away…. what is going on ? I am obviously not the only one that feels this way either…..

    0
  44. 44

    Agree with Jared, Patrick and William (comments 27, 34, 38). This article must be revised.

    0
  45. 45

    Clearly the author, like way too many others in the field, cannot tell the difference between accessibility and usability. You may want to ask for a dictionary for your next birthday and attend a summer school english class before you write publicly again.

    Then again, it’s an article like this that keeps some of us inundated in work; we keep fixing all the problems and bad advice found in articles like this one.

    0
  46. 46

    Nice try, but as Jared Smith discusses above, you’ve almost completely missed the point of accessibility. As much as a few of the points mentioned above are valid, most of them have nothing to do with accessibility and some of them are flat out harmful to the accessibility of a page.

    0
  47. 47

    Matthew Pennell

    June 18, 2009 6:59 am

    This is a terribly titled article. At least change the name to something more appropriate, like “The Basics of Web Standards” or “10 Fundamentals of Web Standards.” Most of them have NOTHING to do with accessibility, and some of the advice is flat-out wrong.

    0
  48. 48

    Interesting read, but hardly anything about accesability. Besides Xhtml is a failed standard.
    Especially since you first say the content is xhtml and tell the browser the render it as html.

    0
  49. 49

    Great article. But since we are talking about proper valid mark-up, you made one mistake in number 10. Your “Correct” version of the mark-up, you forgot to close the br tag. Should be and NOT

    0
  50. 50

    Hi,

    You give some inaccurate information in this article. As has been stated before, you actually should use empty alt attributes for images like spacers that do not convey meaning, because somebody who uses a screen reader hears every piece of alternative text. Hearing “spacer” “spacer” “spacer” is not helpful. But leaving off the alt attribute means the screen reader user will hear “spacer.gif” “spacer.jpg”, etc, because when the alternative attribute is not used, a screen reader defaults to speaking the name of the graphic file being used.
    So best practice is:
    Use the alt attribute for all images. For decorative or layout images (spacers, squiggles, border designs, etc.) use the empty “” attribute. Otherwise provide a brief description of the image.

    The one inaccuracy that hasn’t been addressed is in your explanation of why you should use labels on form inputs. You mention people who use screen readers and the mouse, when the truth is that most screen reader users don’t use the mouse to navigate at all. They use the keyboard, specifically the tab key, to gain keyboard focus on each form element. The label tag clearly identifies to a screen reader what information that form control is to be identified with.
    The mouse information may be true, but it has nothing to do with screen reader accessibility.

    A key thing that is not identified here is that it is vital that all elements that can be clicked with the mouse (links, form elements, buttons, etc.) can gain keyboard focus and can be interacted with from the keyboard as well as by using a mouse.

    Please be a little more careful before publishing inaccurate information. Web site accessibility is confusing enough to enough web developers, and web sites are hard enough to navigate for many disabled users, without making it harder for everyone to do what they need to do to make things better.

    0

↑ Back to top