w3c standards compliance · help

Why "standards compliance"? Why "accessibility"?

First, because one leads to another. A standards-compliant website will, most of the time, be an accessible website... As simple as that.

Second, because not everyone is lucky enough to have the latest Internet browser installed on the latest OS on the latest top of the line machine, with a 30" monitor and fiberoptic connection. Not to mention that there are many unfortunately disabled by nature, such as blind or paralyzed people, who cannot use the machine in the way that is thought to be 'usual'. But they all have the right and need to access the Internet and be able to interact with it easily and productively.

What does "standards compliance" mean?

Putting it simply, it means that all the markup used to build every page of a web site is "grammatically" and "orthographically" correct when compared to the standards recommended and/or required by the World Wide Web Consortium.

Of course, "grammar" or "orthography" or "punctuation" are not the most appropriate terms to refer to the structure of the markup, but - by association with any other human language (and keeping in mind that this is a layman's terms guide, peeps) - there are similar aspects. For example, a "grammatically" correct markup will only contain tags that have a structural purpose (i.e. elements that serve as containers for the various contents of the document) and will not contain tags that have to do with the aesthetic aspect of the contents (i.e. the ancient <font> or <center> tags, which are deprecated). On the same note, an "orthographically" correct markup will only contain tags writen in lower case, elements containing both the start tag and the </end> tag, all correctly nested and so on.

As a conclusion - and an answer to the inevitable "but how do I add some eye candy to my pages?" question - a standard compliant markup should be able to be described by the following attributes:

[For more details, see the links below]

What does "accessibility" mean?

Simply, any user - including people with disabilities - using any kind of Internet browser on any kind of machine or device at any connection speed gets to view the web page in good condition, interact with it easily and without any obstacles.

A strong relationship is being developed between standards compliance and accessibilty, in that today's web design standards are, in their majority, rules and guidelines that - together with the proper response of the user agent - ensure the user-friendly, accessible character of the Internet contents.

Quick Tips to Accessible Web Pages

Provide alternative contents

  1. Always use the alt attribute to describe the function or give additional and/or alternative info for the images.

    Example: <img src="../images/image_name.jpg" alt="short description of the image" width="x" height="y" />
    Side note: <img src="../images/image_name.jpg" alt="short description of the image" title="additional info can be given through the title attribute (tool tip box, which appears when MouseOver the image)" longdesc="link (the URI address) to an external document providing a long description of the image" width="x" height="y" />
  2. Always use the noscript and noframes elements to avoid gaps in contents created by the lack of features present in older browsers or specific settings user-side.

    Example 1: <script type="text/javascript">
    <!-- a Javascript string for whatever purpose you might need //-->
    </script>
    <noscript>Alternative contents (such as a link to a page that doesn't use Javascript or a warning message that appears when a browser that cannot process Javascript accesses the page) for users that cannot view Javascript controlled contents</noscript>

    Example 2: <iframe src="external_document.html" name="frame" scrolling="auto">short description of the frame purpose/function</iframe>
    <noframes>alternative contents (such as links to pages without frames, target="_blank" type of links towards the documents that usually appear inside the frame etc...) for the users that cannot/or chose not to allow framesets to be used - in their browsers</noframes>

  3. Use the summary attribute and, whenever possible, the caption and th elements to provide additional info on the table contents.

    Example: <table summary="short description of the table contents">
     <caption>short description of the table function or contents</caption>
      <tbody>
       <tr>
        <th>title of the column, if applicable to the contents</th>
        ·
        ·
        ·
       </tr>
      </tbody>
     </table>

Organize the page correctly

  1. Always use the hn elements in logical sequence, to reflect the structure of the contents.

    Example: <h1>The Page Title<h1>
    ·
    ·
    <h2>Subtitle<h2>
    ·
    ·
    <h3>chapter title<h3>
    ·
    etc...
    Do not use the hn element as aesthetic tool (eg. big fat lettering). Let the style sheets give color and style to the contents.
  2. For listing items (or links etc...), use the <ol> and <ul> elements; that's what they're for :)
  3. Use the <p> element to properly contain the contents (Example 1) and not as a spacer (Bad example 2).

    Example 1: <p>For easier reading or separation between various ideas etc., use the paragraphs the way they use them in books and other printed documents...</p>
    <p>There is no lower or higher limit for the number of words or lines in a paragraph, it is absolutely flexible to meet your needs. However, do not use paragraphs to contain images only or titles</p>...

    Bad example 2: <p>Page title</p> <-- incorrect use
    <p>&nbsp;</p> <-- incorrect use
    <p>&nbsp;</p> <-- incorrect use
    <p>&nbsp;</p> <-- incorrect use
    <p>Contents etc...</p>

Always check your work

  1. Validate the markup, using the various online validators (eg. W3C's online Validator). Fix the errors pointed out by the validator >:)
  2. Validate the style sheets. Same here, there are many online validators to help you do that (eg:W3C's online CSS Validator).
  3. If possible (and, for a real web designer, it should be) view your pages using different browsers on various platforms. Or ask a friend to visit your page and point out any errors, ugly gaps etc...
  4. Try to be flexible in accepting that it is more important that the page can be viewed by as many users as possible than the fact that sometimes, too much eye candy might be not that useful or beautiful, on the contrary. In other words, simple and easy to use weighs a lot more than exquisitely beautiful and filled with scripts and tricks ;)

[For more details, see the links below]

Reference

Tutorials · Resources

Accessibility

HTML and XHTML

CSS


Online Tools

XHTML 1.0 Valid! CSS Valid!