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 entities

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

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)

↑ Back to top

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

  1. 1

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

    0
  2. 2

    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.

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

    I began to write a long review of this article but chose to just delete what I wrote. So much of this article is so wrong, so misguided, and so betraying a lack of even basic knowledge of accessibility and how disabled people use the web that Smashing Magazine would be better off removing the article altogether and replacing it with a more useful, clear, and accurate article.

    0
  52. 52

    @Mia
    as I already mentioned in my comment #42, decorative images should not be img’s in the xhtml, but rather background-images in the css.

    0
  53. 53

    *Edit: forget it, I can’t add HTML to state my point!

    Good article, 53rd!!!!

    0
  54. 54

    a page should not only be valid…it should offer good usability without any css. then – in my opinion – you can talk of accessibility

    0
  55. 55

    Fantastic work! Thanks very much. Its a very useful article.

    0
  56. 56

    To all the folks that disagreed with me, and even the one who went to my site and tried validating it: I respect your opinions. Regarding the validation – check back in about a week and validate that. You’ll be impressed.

    I’m not on any sort of pedestal… I’m just stating my opinion. Don’t attack me if you’re not secure enough in yourself to respect my opinion and just let it be.

    Smashing Mag is my favorite design/web/etc blog aside from all that. Like I said in my first comment, thank you for the post.

    0
  57. 57

    @Linda – There will always be instances where a background image isn’t possible. You would be right in saying that where possible, decorative images should be placed into CSS, but where this is not possible, there are much better ways of presenting it to screen readers than having no ALT text.

    It’s a very narrow-minded view if you believe that all decorative images must be in CSS to validate, or be ‘good’ code – it’s really not true.

    0
  58. 58

    Maybe this article is not perfect. It might even be inaccurate, or maybe it’s just poorly titled. But since so many commentators here are such experts on accessibility, why don’t you get off your pedestals and submit a better article? I’d like to read it.

    1
  59. 59

    Marco Battilana

    June 18, 2009 7:50 am

    The more I read this, the more concerned I get for those starting off in the field of accessibility. Please don’t go by these points. This really has nothing to do with furthering the accessibility cause.

    If you’re just starting out, do your research into the current accessibility standards, who is familiar with them and how they are being used.

    More importantly, look at the successes/challenges that have and are currently being faced by users with all different types of disabilities. You want to get into the mindset of the typical user, then you need to understand what the user has to go through. Only then you can truly understand and design for the different scenarios.

    The best way to empower someone is starting them off on the right foot. Sorry, this article is not the place to start.

    0
  60. 60

    I don’t know what id language of my country…
    where can I find it?

    0
  61. 61

    Ok guys,
    everyone has expressed his/her truth; now let’s go back to work.

    0
  62. 62

    I liked the article, but the summary blew

    0
  63. 63

    @Andy

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

    If an image is decorative and not part of the content then you shouldn’t be able to add an alt tag to it because the image *should* be in the css and not in the page

    @Tom
    “It’s a very narrow-minded view if you believe that all decorative images must be in CSS to validate, or be ‘good’ code – it’s really not true.”

    I would say nothing to do with good validation or good code – it’s good design.

    0
  64. 64

    @bakazero Google ISO 639-1 Language Codes.

    0
  65. 65

    XHTML 1.1 is recommended?! You must be joking… Almost everyone recently has been recommending that you avoid XHMTL unless you have a specific reason to use it.

    0
  66. 66

    Why only one H1 for accessibility? A proper heading structure: that’s right.

    0
  67. 67

    For every person who must use a screen reader to explore the internet, please do not follow the advice in this article to alt attribute everything! Would you want to spend your valuable time reading “sunset,” “header image,” “footer image,” “bullet icon,” etc. rather than spending your time reading the actual content of the page? Think of that when designing and only use the alt attribute when an image affects the readability of the page. Otherwise, there is nothing wrong with an empty alt.

    0
  68. 68

    the only meta tags you need in your <head> section:

    <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8*” />
    <title>…</title>
    <meta name=”description” content=”…”/>

    *UTF-8 or the one you may need, it is just an example

    more than this is not going to help your site rank better at search engines

    0
  69. 69

    Michael Irigoyen

    June 18, 2009 8:34 am

    I would like to say that this article was originally titled “10 Ways to Make your XHTML Site Accessible Using Web Standards.” The XHTML got dropped by the editors so that is the reason I didn’t include any information about HTML 4.01. I apologize for the confusion there.

    Honestly, this article was intended to be more of a “first step” in preparing your site to become more accessible. Since I work within the state of Illinois, we must follow the Illinois Information Technology Accessibility Act (IITAA) which is direct initiative of the Americans with Disability Act. Section 1.1 of the IITAA states “Use valid, standard web programming code.”However, just because this law is specific to the state of Illinois, that doesn’t mean it can’t be used or applied in general as best practices. All web sites you create should be standards compliant and standards compliance will NEVER make your web site less accessible.

    That being said, the purpose of this article was to point out standards that, may be common sense to many people, but are commonly overlooked time and time again that directly influence the first steps of making a site more accessible. These steps will NOT make you site 100% accessible, and I never intended that to be inferred from the article, so I apologize if that is how it was perceived.

    I was in the process of writing a second article, showcasing sites that fail common accessibility flaws, but it is clear to me that what the Smashing community really would like to see is an article that really dives into the things that really count towards accessibility. That is the direction I am going to take this. Please look at this as a “Step One” to a series of articles that will help you make your site truly accessible.

    Side note: That <br> tag in the last example wasn’t in my original article. Could we please get an edit on it to remove it or turn it into a proper <br/> ?

    0
  70. 70

    It’s funny that this article states that you should validate the code, but it contains invalid code.

    At 3. on the keyword meta tag you need to add a comma to separate the keywords …
    Space is not accepted.

    The keyword meta tag is ignored anyway by the main search engines now, but that doesn’t mean you’re allowed to write it without the commas.

    0
  71. 71

    Carlos Eduardo Testa (a.k.a ceth)

    June 18, 2009 8:50 am

    A good article, basic, but really interesting good of all form.

    I believe that a point that was outside, and that is of extreme importance, it was the question of the units of relative measures, as:

    http://www.w3.org/TR/WCAG10-CSS-TECHS/#units

    Who knows for a next article?

    And for the moment pra who to want greaters information:

    http://www.w3.org/TR/WAI-WEBCONTENT-TECHS/

    ps: sorry for the english, i am brazilian..

    0
  72. 72

    Would be really interesting to read an exhaustive article about H1 from someone who knows the W3C standard as good as I know the Back to the future trilogy. Frankly, I’d never make a step toward accessibility in this matter if I gets in conflict with SEO.

    As far as I know the H1-doctrine comes from Google. I don’t appreciate it. It should never become a standard, because the hierarchy of headlines goes the opposite way in every nonfictional and scientific printed text, starting from h1 as the most generall topic down to the most specific, thus for instance 13.2.3.7.3.4 equal H16. Making H1 the most concrete essence of the page content is actually anti-semantic. What Google is teaching us about H1 should be in the title of the page, whereas H1-7 should follow the rules of logics and hierarchy. I can tell you where Googles pervert view came from: Google takes notice of the folder names and the path.

    0
  73. 73

    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.

    I have been a Java developer for 15 years, have a degree in Math and Computer Science and have worked on large scale web sites – both client and server frameworks. My experience is that everyone can use refreshers and there is no harm in going back to basics. I like this site because I see new things and get ideas.

    When you get on an airplane, I bet you are one of those who is too high and mighty to actually listen to the person tell you how to find your life jacket. As one other said… get off your pedestal.

    0
  74. 74

    Can someone please explain why it’s recommended that people use xhtml 1.1

    I’ve never seen this used – SM doesn’t even use it. Most sites I see use xhtml 1.0 transitional or strict (I usually go with transitional) and I’ve never even heard xhtml 1.1 mentioned before – let alone seen it recommended or used.

    0
  75. 75

    @Michael: “All web sites you create should be standards compliant and standards compliance will NEVER make your web site less accessible.”

    IMO this statement alone betrays a fundamental failure to understand what accessibility is and perpetuates the misunderstanding about what standards compliance does. Make no mistake: I believe in writing semantic, standards compliant markup. Nevertheless, I could write websites all day that pass validation and yet are wholly inaccessible. In fact, I could write markup that not only passes validation but also passes checks by every single automated accessibility checking tool on the market and yet would still be inaccessible.

    The vast majority of the items written about in this article are either wrong or have no impact on accessibility whatsoever. For example: the discussion of doctypes: Assistive technologies are not user agents, so they don’t care which doctype you choose, don’t care if you’ve used lowercase markup, and don’t care if you’ve properly encoded ampersands in your URLs.

    You would have been far better off concentrating on, as others have said, things like keyboard access, text equivalents for non-text content, proper table markup and so on than attempting to pass off an article like this one as being a discussion of accessibility.

    0
  76. 76

    Michael Irigoyen

    June 18, 2009 9:25 am

    @Karl
    As I said before, these are the basic “first-steps” of creating a more accessible web site keeping the standards in mind. Consistency is the name of the game with accessibility. Your site has to function and render EXACTLY the same way in every possible way someone can visit it. These semantic standards exist exactly for that reason. If a browser of any type chokes up on one thing and renders your site incorrectly, there is more chance for failure. Are chances of failure high? No. For example, most screen readers have built techniques for dealing with bad code. However, nothing is 100% fail-proof. All we’re doing in this article is limiting the possibility of unexpected failures.

    My next article is going to assume that your site is 100% compliant with W3C and dive into actual accessibility issues. Topics will include keyboard skips for static content, access keys, colorblindness and contrast ratios, and other items such as that. It’s obvious to me now that that’s the direction I should have originally taken.

    I’m grateful for all the comments and suggestions. For submitting my first article, I wasn’t sure what to expect.

    0
  77. 77

    Well, I was actually very disappointed by this article. I expected some guidelines about how to set your code up in a sentimatic way. By that I mean WHERE to use which tags and WHY. If you turn off CSS on your website it should still be accessible and viewable.

    0
  78. 78

    very nice,most rules i already know!

    0
  79. 79

    @Helen
    “…I can tell you where Googles pervert view came from…”

    That’s a gorgeous statement.

    Thanks for the article, for those of us relatively new to web design it’s great to have a collection of the information we find scattered across the web in one place. Looking forward to the next one!

    0
  80. 80

    Good article, accessibility is a deep going science, but this is a nice basic article. Missing some important things though, especially when focussing on such a low level of user experience. Things like always use unobstructive javascript or beware using flash. Also a bit more about on how screenreaders work would have been usefull.

    0
  81. 81

    “Your site has to function and render EXACTLY the same way in every possible way someone can visit it.”
    Whoa. If author does think so, it does not even make sense, why promoting xhtml instead of html 4.01 (or html5) is a bad idea.
    How do you render site exactly the same on voice browser? Text browser without support for images.
    Sorry but (X)HTML is not about how your site is rendered, it is about how your documents’ structure is marked up.
    And by the way it is very very easy to have valid site which completely fails in accessibility.
    Validity is only a matter of quite simple grammar. It is easy to write grammatically correct text which does not make any sense.

    0
  82. 82

    Not only should XHTML 1.1 be served as application/xml+xhtml, no version of Internet Explorer can render any kind of XHTML served that way. Only modern browsers (anything but IE) can properly handle XHTML served as true XHTML. This is another example of Microsoft and Internet Explorer holding back the web.

    0
  83. 83

    @Michael:
    “Your site has to function and render EXACTLY the same way in every possible way someone can visit it.”

    And in that one sentence, you’ve emphatically shown you do not understand the nature of web accessibility, and the implications of how people with disabilities use the Web.

    This isn’t a first step article, unless you consider reversing a car through someone’s lounge a first step in learning how to park said car. Going backwards isn’t the right direction for step 1.

    When notable accessibility experts (Jared Smith, Patrick Lauke, Joe Dolson) are telling you that this article is wrong, maybe they are right? This article is damaging to web accessibility, despite your best intentions and good faith. This is not good material for beginners who want to know about web accessibility.

    I call on Smashing Magazine to remove this article. Or remove all references to accessibility within it. The advice is misleading, and in a number of circumstances wrong. If you insist on editing it, then delete everything except point 8, and rewrite point 2 do just deal with the language attribute.

    Seriously.

    0
  84. 84

    I agree with Rob and some of the other people who have commented on html 4.01.
    XHTML isn’t even rendered the correct way by IE (the most popular browser).

    I don’t see why xhtml is any better than html 4.01 strict. XHTML will be an attempt to make a commonly accepted standard which will fail. HTML5 will replace html 4.01 and xhtml will only be used by a small number of websites.

    0
  85. 85

    nice read ! helpful too … thnx for sharing !

    0
  86. 86

    Validating this page: Errors found while checking this document as XHTML 1.0 Transitional!
    ARGH!
    Good post, anyway!

    0
  87. 87

    @rob #59: “why don’t you get off your pedestals and submit a better article?”

    Many of those people you mention ALREADY HAVE written better articles. Go to webaim.org for some of them, or just seach the net for accessibility, and I’m sure that you’ll find many more accurate articles about accessibility.

    0
  88. 88

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

    What a pompous reply. Did it ever occur to you that young people may be just beginning to learn about web design?.. furthermore professional soccer players don’t just stop practicing dribbling and passing because it is basic and fundamental.. Should piano players stop practicing scales after they learn them? on and on.. Off the pedastel.. Off I say!

    0
  89. 89

    Thanks, I’ll use some of yout tips :-)

    Mistake: XHTML 1.1 DTD ist the XHTML 1.0 one ;-)

    0
  90. 90

    can anyone recommend a good book or a comprehensive site on the subject of accessability? I need to start dealing with this properly.

    0
  91. 91

    Correct me if I’m wrong, but for number 6…
    You escaped the ampersand in the url. Won’t that actually link to http://www.example.com?page=1&view=top, when what you want it to link to is http://www.example.com?page=1&view=top ?

    For another example, go to http://www.google.com/search?hl=en&q=ampersand
    then go to http://www.google.com/search?hl=en&q=ampersand

    0
  92. 92

    Erm 6. No need to escape everything if you are using utf-8. Quotes, ampersands and stuff is needed, but no umlauts for example and stuff like that. You should have mentioned that as well…

    0
  93. 93

    @name,
    Book: Joe Clark, Building Accessible Websites
    Website: http://webaim.org/ and http://www.paciellogroup.com/

    0
  94. 94

    For anyone wondering if they need to use xhtml, read the following:

    http://www.dustindiaz.com/skinny-on-doctypes/
    and
    http://themaingate.net/dev/html/all-you-need-is-doctype-html

    In short, you don’t, unless you feel some need to “validate” your page, which doesn’t really prove anything.

    0
  95. 95

    There are 2 h1 tags on this page. The logo and the Headline. Not being too nick picky but just a simple observation from the source code.

    0
  96. 96

    As others have pointed out, the quality of this article is sorely lacking with quite a bit of misinformation.

    0
  97. 97

    #7. Use Only Lowercase Tags And Attributes –

    Dreamweaver can be a big headache on this one. Dreamweaver wants to put onClick in by default, surprised they did not fix this in CS4. You can change this pretty easily by going to Preferences > Code Format.

    0
  98. 98

    Typically, the way we find out how a site will look to different users is to test it. That’s why I have 6 different browsers installed.

    How can we test to see how blind users experience a site. That sort of information would be much more useful than simply beating the standards horse.

    On an unrelated note, "e; in place of “? seriously?

    0
  99. 99

    Yeah, sorry but this article is a bit of a shocker – compared to SM’s usually high standards. This is an article I’d expect to see on Site Point.

    As already mentioned is the situation with alt attributes (yes, attributes not tags – man that annoys me). Have you ever listened to a screen reader rolling off alt attributes for 300 meaningless images? “Picture of sunset… Picture of auntie frank… Footer corner… Footer corner two…” (not that you should be putting layout images in designs but amateurs – who this article is aimed at, don’t always get this right)

    Also, in real-world application (ie, clients getting their grubby hands on the site), treating a site as pure XML is simply bad news. The moment, they forget to properly close a BR tag, the entire site is offline, making you as a developer look very bad.

    I personally write in XHTML strict but don’t ever have intention of treating it as strict XML. The number of issues I’ve had in the past with clients would be like peeing on an electric fence more than once. You learn the first time.

    Cheers!

    0
  100. 100

    It’s a bit disappointing to see XHTML still being touted as intrinsically superior to HTML when in the vast majority of cases it’s served and treated by browsers as the unfashionable old language that people love to look down on. There’s no reason HTML 4.01 can’t be written (and validated) just as correctly as the X rated variant.

    I also think it’s impractical to say that all decorative images should be placed with CSS. Sometimes that will be possible, a lot of times it won’t. An empty (not missing) alt attribute is perfectly acceptable.

    0
  101. 101

    Hi, I have a question about #8. In the picture provided, how do I put a label in the DAY and YEAR input fields? I’m guessing the label BIRTHDAY would only be associated with the MONTH select tag.

    Thanks :)

    0
  102. 102

    I couldn’t be bothered searching whether anyone else had already responded to this but the first comment/response to this article is incorrect.

    w3 specification shows that width and height are optional tags. I include them to make IE happy.

    See img tag definition and usage here http://w3schools.com/tags/tag_img.asp

    0
  103. 103

    Regarding accessibility and web standards, I am all for it, but in the nature of being competitive with local web designers, whatever is fast to develop and barely works is the best practice. Worrying about accessibility and web standards doesn’t pay the bills. Outbidding some straight-outta college dreamweaver using kid does. Customers, at least in my area, could care less about accessibility and standards, and I have heard them tell me this. Good habits would make standards and accessibility a part of every project, but it is sometimes necessary to break habits and make a buck.

    0
  104. 104

    I would argue that it is a competitive advantage to care about and employ accessibility in your web development. Many of the fundamentals of accessibility and web standards help make your site more search engine friendly.

    0
  105. 105

    Good foundation article which should lead on to further reading – a few questionable points (use of XHTML1.1 can be debated all day but I’m with Ian – having your site not display at all because a client made a minor mistake, hmmm…) but on the whole IMO a good article for those who aren’t in the know – and that is over 90% of web developers out there today.

    @ all those who criticised – most quite unnecessarily – ask yourself if that kind of attitude helps anyone and why you’re here? Are you genuine developers who want to see a better web or are you trolling?

    @ Chris – I think you asked for that mate to be honest though any steps you make to improve your site should be applauded – the world’s blind and disabled users DO appreciate any steps web developers make towards more accessible sites.

    @ Brian Temecula – perhaps you’re just doing it wrong mate? I’ve found that developing standards-compliant sites is not only easier and quicker but will reward those who make the effort for a long time to come with improved search rank and readability. Once explained in simple terms – have yet to meet a client who said, ‘no, build me a bad site that ranks poorly and a lot of people can’t use’ – think about it. It sounds to me like you’re in the wrong end of the market and if you don’t bother about the quality of what you do, are likely to stay there. There will always be the el’ cheapo crowd but if you don’t want to be part of it, be prepared to produce quality work and find a way to sell it to the right people – or of course there will always be a lot of demand for sub $1,000 websites for which I wish you the best of luck.

    @name – start with ‘Designing with Web Standards’ by Zeldman then move onto the others – Joe Clark etc. Zeldman will show you the how and why and is a book which 5 years ago convinced me to get on the right path. I think there’s a 3rd edition coming or already available. ‘Dont make me think’ by Steve Krug, ‘Bulletproof Web Design’ and ‘Web Standards Solutions’ by Dan Cederholm are others that I consider essential reading.

    Readers should remember that everyone’s got to start somewhere and regardless of how exactingly correct (or not) this article may be – or how relevant the title is – it is a good start and there’s something to learn in there for everyone if you get off your high horse for one minute and read it. After that, go forth and discuss, but do it maturely and add something to the debate rather than just blast those who are trying to make a difference…

    Thanks Michael

    0
  106. 106

    @Damien,

    It’s not that I would stop making quality code, and I know that compared to the competition my code is quality, but I guess I just get upset when I have reasonable bids turned down because the majority of bids are coming from crap web designers who are probably living with parents and don’t have anything to lose.

    For instance, a week or so ago I had a jewelry store contact me about developing/designing a eCommerce site for them, and when I gave them my estimate, which was between $2500 and $3000, I was told that the they hadn’t received another bid higher than $600! I guess I could just install osCommerce and tell them I’m done… but WTF? This is what I’m up against, and trying to explain that I do quality sites doesn’t seem to matter.

    0
  107. 107

    I was expecting some good guides to make my sites accessible for all the screen readers and disabled – like access keys, correct font size, narrator-ready texts and elements etc.

    The article itself is ok, although has some incorrect information. But the title is too bad.

    This needs a serious revision.

    0
  108. 108

    Good Article…
    I want to know more regarding this kind of tips
    Thanks a lot.

    0
  109. 109

    The old saying “One mans trash is another mans treasure” – I am sure this has answered a question or two for someone out there.

    Who would have thought that so many coders out there had so much “fire in the belly” – pent up anger from sitting behind a computer for soo many hours, waiting to be unleashed. Bring on a few more average articles!

    Now is probably a good time to get up from your chair, take some deep breaths, stretch and relax. :)

    0
  110. 110

    @Brian – don’t be sad, you’re just targetting the wrong people. $2500 for an e-commerce site is beyond reasonable, and the clients you want are not the ones who expect a standards compliant, lovingly crafted, beautifully coded website for >$600. Truly. You should be glad that you’re not busting your gut for minimal return, and focus on other markets who will happily pay appropriately – and even appreciatively.

    0
  111. 111

    I think that there are way too many web developers out there that haven’t approached or even glanced at the official W3 specs for xml/html/xhtml/css/wcag etc etc, it almost seems obvious but really most people have never sat down and read them.

    Not to bash on the article, but if everyone would just read these documents, articles like this would be completely unnecessary! Go forth and educate yourselves.

    ~MJR

    0
  112. 112

    David Hucklesby

    June 18, 2009 9:47 pm

    Has anyone information on the accessibility or otherwise of the new HTML 5 elements? They seem more “semantic” – but does that make them easier to interpret with assistive technology?

    0
  113. 113

    Massimo Bastianon

    June 18, 2009 10:47 pm

    @Dimitar Yanev

    images width and height are usefull to avoid page scrolling when page is loading..

    0
  114. 114

    @JasonG01
    You asked how to test if a site is accessible for blind people. A good place to start is installing Fangs, a screen reader emulator (firefox plug in). http://sourceforge.net/projects/fangs
    Jaws is the most popular screen reader, and I usually test using this. You can get Jaws from http://www.freedomscientific.com/products/fs/jaws-product-page.asp It’s not free, but you can get a demo for free. You can also try out a web-based screen reader for free, from anywhere, without installing anything. Go to http://www.accessibilityisaright.org
    For an introduction to how screen readers work I reccomend this video: http://video.yahoo.com/watch/514676/2686894
    How a Braille display works: http://www.dingoaccess.com/accessibility/refreshable-braille-and-the-web/
    Introduction to screen magnification software: http://video.yahoo.com/watch/633844/2985804
    But the absolute best way to test is to actually get some blind people to use your site as part of a user testing session.

    0
  115. 115

    RE: point 9: It’s an “alt attribute” not an “alt tag”. I don’t understand why so many people confuse the two.

    All these points should be practised at a bear minimum regardless of if accessibility is going to be a concern or not.

    Great article. Beginners should bookmark it for sure.

    0
  116. 116

    image width and height are to be specified just to make the rendering faster.
    This is a standard I guess and mentioned in Google Webmasters Tools

    0
  117. 117

    As others have said above, the info on the alt ‘attribute’ isn’t right! For SEO you might not want it empty, but for screen readers (so accessibility) sometimes you do! This is what the UK RNIB (Royal National Institute for the Bilnd) has to say on the subject: http://www.rnib.org.uk/xpedio/groups/public/documents/PublicWebsite/public_alttext.hcsp

    Basically, as one blind web designer friend told me: If it’s eye candy – leave it blank!

    0
  118. 118

    Chris McCorkle i think you should get out of web design your site is whack. Im suprised you even get any work with that kind of showcase. Plus your ugly.

    0
  119. 119

    Nathalie Allard

    June 19, 2009 12:51 am

    I agree with lots of the comments above, so I won’t repeat what’s already been said. Your article is misleading newbies into believing that:

    1) web standards=accessibility, well no! You placed too much emphasis on web standards and code validation. All cacti are succulents but not all succulents are cacti. It’s easy to get a page to validate but it’s a lot of hard work to ensure that your website is accessible to a group of people with a range of disabilities.

    2) If they follow these 10 points, their website will be accessible. I wish that was true because my job would be so easy! Considering there were 65 checkpoints in WCAG 1.0 (now WCAG 2.0), not to mention that these checkpoints could be broken down into sub-guidelines, you’re miles away if you stick to your 10 ways.

    3) You state “The alt tag attribute must include text and cannot be left blank.” That only applies to contextual images, you should leave it blank (i.e. alt=”") for decorative images, in other words you should always add an empty alt attribute and YES it should be left blank. Imagine how irritating it can be for someone who is blind to repeatedly listen to something like “bullet”? I would add that it helps to add a full stop at the end of alt description because it tells the blind person that this is the end of the image description.

    I don’t agree with your statement “All heading tags (, , etc.) should have textual content. Alt tags on images do not count.” Saying that ”

    I don’t agree with the statement that ” is incorrect and that you should instead use this Smashing Magazine . To add structural meaning to image-based headings, when using a graphic as a heading, you should enclose the image tag in the appropriate structural markup:

    – For screen readers users such as Jaws, the text in the alt attribute will be recognised as a heading, thus retaining its structural meaning. Notice that I’ve added the widht and height tag, if you omit these it will take longer to download (not an accessibility issue but it’s important).

    It’s a basic article that has some good points, I would suggest rewriting the title to make it less misleading.

    0
  120. 120

    As user “dork” suggest, the section “Add a element to each field in your form” is illustrated with a beautiful but erroneous example picture. It draws our attention to that, how hard can it be to (satisfy standards AND follow best-practices AND produce aesthetic design).

    @dork:
    A possible (and hopefully practical) solution can be:
    <p><span class="FormLabel">Your <label for="name">name</label> and <label for="surname">surname</label>:</span><input type="text" id="name" /><input type="text" id="name" /></p>
    Although the element flow is non-linear and it requires a special CSS description, both forms of presentation should be usable — blind users will hear a proper label after selecting an input field with TAB key, deaf users will see a continuous label for the name and surname fields array.

    Could you, please, point any weaknesses of such solution?

    0
  121. 121

    NULL (sorry)

    0
  122. 122

    Matthew Pennell

    June 19, 2009 2:10 am

    @Damien: “all those who criticised – most quite unnecessarily – ask yourself if that kind of attitude helps anyone and why you’re here?”

    Seriously? Yes, of course pointing out misleading and incorrect information on the web, especially when published by a “respectable” magazine site, helps people. Those that know better have a responsibility to correct mistakes so that others don’t follow the poor advice.

    0
  123. 123

    @Brian – I hear ya mate – we get it all day every day too but you’ve just got to rise above it – the fact is there will always be people who don’t value quality in every industry you work in and in the web industry the reality is that most clients just dont know any better.

    I understand and share your frustration – I got an email from jobstodo.com.au this week from a guy wanting a huge flash site (which we dont do anyway) referencing a stunning site which I would value at a minimum $10k – his budget, wait for it… $100-200 – seriously.

    All you can do is show people the benefits, demonstrate the differences – perhaps start blogging and marketing the advantages to your market base and hopefully you’ll see some results from that.

    @Matthew – Perhaps I should have worded that better – you’re right in pointing out incorrect information – I was more concerned with the attitude some of the commenters to what is in my opinion not a bad article. I prefer a more encouraging approach is all. Perhaps you can outline (and correct) some of the points you disagree with so everyone can learn something from it.

    0
  124. 124

    The article is not /that/ bad. But it is poorly titled, and a bit mis-guided. I think the main principle people are disgreeing wiith here (and rightly so) is that the author equates standards with accessibility.
    He also said “All web sites you create should be standards compliant and standards compliance will NEVER make your web site less accessible.”
    This, unfortunately, is wrong. At least if you follow his own examples – where alle images must have an alt attribute.
    I’m currenty working on a website where someone obviously has read somwhere that all images must have an alt attribute. The site is full of “helpful” alt text like “top shadow” and “click to view larger image” (the alt attribute is only diplsyed if the image cannot be viewed, so obviously it won’t help to click either…if a blind person is using a screenreader they care very little that you have provided two sizes of the image, they still can’t view it. Or that the logo has a top shadow).
    The idea that the author is promoting is that “if you follow these check points for standards compliance your website will be accessible” which is very far from the truth. Accessability is about users, and to make a site accessible you cannot just tick of tings like “dtd specified”, “alt attributes filled in”, as this tells you nothing about how John Doe will mange to use the site. I think WCAG2.0 reflects this, there’s no longer a “to do list” of things you can tick of to make a site accessible.

    Perhaps an article about how to make a website more accessible following the WCAG 2.0 guidelines, and how to test for accessability would have been more approprate for an article with this title.
    And that this article should have been called “XHTML for beginners – how to make your site validate (so you can stick a cool badge on it)”

    EDIT: I happen to handcode in XHTML1.0 Strict, and I always check that my sites validate (and it makes me happy inside when I see green). But if I had to choose between validation and usability I’d chose usability. Every time.

    0
  125. 125

    The only thing I never really cared about was the meta tags. Like, I always used them for obviously http-equiv=”content-type” but I never cared about anything else. I know some people go out of there way to make it know that they are the author, the date it was created. Like the person who taught me about web design. Granted, she still uses an outdated Doctype and doesn’t care about validating her website (her code is atrocious!). She said that the meta tags didn’t matter. I use XHTML 1.1 and I have the W3C doctype on there, but I never bothered. So this article was helpful and to those who say to ‘get out of web design’… this article is great for those learning. Like at one point in your life… you were learning and this would have been helpful for you too.

    But I do say, alt… those can be pesky for those who don’t need it. And those who do need it… they don’t need every image telling them something. (Those who are blind most likely have a computerized reader… and it can get annoying if (like the comment above mine) says shadow drop or something stupid like that. They care about the actual CONTENT not the image.) With that being said, you’d have to be an idiot to make the content into the image. Even I know that one.

    0
  126. 126

    @Victoria who said “With that being said, you’d have to be an idiot to make the content into the image. Even I know that one”.

    So Smashing Magazine are idiots for having their name (logo) as an image? Or for having social bookmark icons? Would you have prefered boring text? Images can be used for content, and in many ways can be more usable than just plain text. They need a fallback though, like the alt attribute.

    I love icons. Much easier to recognize the RSS icon than scan text for it, for example.

    0
  127. 127

    point 9 – Supply alt for images

    1 – it’s attribute, not tag
    2 – For images that are used purely for decoration and/or visual formatting, the alt attribute must be provided and the value must be left blank.

    point 10 – using id in the doc:

    (id and class – are selectors, not attributes)
    the info here is misleading:

    an id selector can only be applied to only one element within a given document ie. it must be unique within the document.

    0
  128. 128

    I’m sorry, but about #7:
    The onclick example is not right either, as it is not encouraged to use inline Javascript. With Javascript libraries these days (jQuery, Prototype, Mootools, …) it’s not so hard to do this without inline scripting.

    Nice article though!

    0
  129. 129

    Why the hell are there break tags in your doctypes?

    0
  130. 130

    ‘alt’ attribute is recommended for all non-text elements. They are required for sites to be classified as ‘accessible’ IIRC they should be 2-80 characters long, and give a brief description of the elements purpose. My practice for the dreaded spacer.gif is alt=”" until I can eliminate the need for the image. Be mindful of the fact that a broken image link will render this text as a placeholder. Keep them brief. It is also recommended that specific alt content is used only once per page. For elements being inserted via other methods (eg object, applet), you should place the content inside the tag (alt text)
    ‘longdesc’ is a longer version of alt, which allows you to get into detail about the image.
    ‘title’ can be used on nearly all html elements, and is where to target SEO.
    My best analogy for heading tags is to think back to school and doing outlines of reports

    0
  131. 131

    The #1 best technique was left off the list. Simply use assistive technologies for yourself to get an idea of how they work.

    There are so many misconceptions about how screen readers work. A while ago (haven’t checked recently) you could very cheaply get a copy of Jaws for Windows for evaluation purposes. It would only work for 45 minutes at a time which is enough for testing. Also, there’s “orca” which can be run from an Ubuntu live CD. Try using a text-based browser such as lynx and also browse the web with your font size set very high.

    It will open your eyes.

    0
  132. 132

    Nathalie Allard

    June 19, 2009 12:27 pm

    Yes I’ve got the Jaws demo too, but you need some training on how to use it. But I agree it’s the best thing to understand the problems blind users are faced when trying to access web pages that are not designed fully (or at all) for screen readers. It’s quite a challenge trying to design fro screen readers.

    0
  133. 133

    Sanchit Thakur (ILLUMINZ)

    June 19, 2009 12:44 pm

    Its good to check out the basics again.. :)

    0
  134. 134

    I disagree with Dimitar about specifying height and width in code. Set the size in your graphics program. Doing it in code is expensive and can lead to distortion. And what do you do if you have a huge .jpg file right out of the camera and reduce it in code. It takes forever to load.

    My two cents.

    j

    0
  135. 135

    Powerof2, I never said actual resizing has to be done in the html code. Resizing images with html is huge mistake, but when talking about accessibility these attributes should be in place.

    0
  136. 136

    If it hasn’t been mentioned—Jared, thanks for posting—there’s no firm rule that says two h1 tags can’t be used. It’s been debated but even professional firms like Happy Cog employ it when it’s appropriate.

    I agree, this article should be pulled.

    0
  137. 137

    Total waste of time. The old song “oh, make me compliant, quick”. How long it will take people to understand that there is no practical benefit on doing so?!? Not even a bit!

    0
  138. 138

    Good article, but I would argue with a few things!

    1) I don’t see why couldn’t we use the HTML 4.1 or XHTML 1.0 doctype (or any other which are included in the standards). I don’t see what makes XHTML 1.0 so special! If there is a differance between DOCTYPEs I think it’s more in the Strict/Transitional or Frameset that make the big differance not the ‘x’ – Again sometimes Frames are useful! For instance Google Maps and a lot of other embeded little webapps use iFrames, which is not a depriciated element if I’m not mistaking!

    2) Sometimes it’s hard to specify the width and height value for our img tags! What if we have a dynamic gallery that display every new image which is uploaded into a folder on the server, and the img tags src attribute is a PHP variable, and we always want to show the fullsize image? You would have to write a new PHP function to get the images dimensions and put it into the width and height attribute (not very difficult but time consuming and meaningless, I think…) – Not to mention you can use CSS to specify an inline image’s dimensions!

    0
  139. 139

    “Chris McCorkle (June 18th, 2009, 5:28 am)
    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.”

    This information is more than likely intended for new designers and developers. No one knows everything without reading about it first. No need to get out of web design just because you don’t know it all. ;-)

    Thank you for the post. I found it informative and useful.

    0
  140. 140
  141. 141

    Floris Fiedeldij Dop

    June 20, 2009 8:49 pm

    Just applying these basic rules will mean you are already ahead of your competition who doesn’t .. it’s always good to go through a “checklist” like this. :) tnx sm

    0
  142. 142

    Why is the doctype declaration for XHTML 1.1 in first code snippet identical to the one being used for declaring XHTML 1.0? Shouldn’t it be:


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

    And what’s with the <br> tags in the code snippets as well?

    0
  143. 143

    Yeah I am not surprised more people have not said something about the br tags in the doctypes. Craig I am pretty sure it is a messup.

    0
  144. 144

    Great article on some basics for the more behind the scenes knowledge. The program I am enrolled in does touch on accessibility issues but there were some gems in this article that had not been touched on.

    I myself am just starting out as a web designer and think it is great that a resource like this site exists.
    I think that the more advanced desingers that turn there nose at articles like this should realize, it’s all useful information and everybody has been a beginner at some point!

    0
  145. 145

    I agree with Andy (post 17), this is a good start. I hope we see more articles on accessibility.

    0
  146. 146

    Wow, this is great post. Thank you very much!

    0
  147. 147
  148. 148

    This article doesn’t validate on W3C validator.

    0
  149. 149

    Damien van Holten

    June 22, 2009 9:57 am

    “The element should match all or part of your element.”
    How will this help accessibility or web standards?

    “When using CSS attributes, use each “id” only once on a page. Use each “class” as much as you want.”
    This one is plain weird. ID’s should be unique for validation, sure… but how the hell is this related to accessibility?

    “The alt attribute must include text and cannot be left blank.”
    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’).

    This is the first time I’ve seen Smashing Magazine failing like this. This article is full of mistakes. Stick to design inspiration and icons guys…

    0
  150. 150

    “This is the first time I’ve seen Smashing Magazine failing like this. This article is full of mistakes. Stick to design inspiration and icons guys…”

    I agree… these articles are not accurate. Misleading information.

    0
  151. 151

    @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

    0
  152. 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 :)

    0
  153. 153

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

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

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

    it’s not true

    0
  156. 156

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

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

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

    0
  159. 159

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

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

    0
  161. 161

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

    0
  162. 162

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

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

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

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

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

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

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

    0
  169. 169

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

    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

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top