Build Easy

Saturday, September 02, 2006

title iconNeat'n'Nice accessibility advice that are easy to follow

More accessible website! Why not? People love it, and search engines love it! Let's go!

  1. See your HTML sources, if there's no <!DOCTYPE ... > in the beginning, specify a document type for it. You can achieve this by choosing one of the examples below:

    HTML 4.01

    HTML Strict DTD
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    HTML Transitional DTD
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    HTML Frameset DTD
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

    XHTML 1.0

    XHTML Strict DTD
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    XHTML Transitional DTD
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    XHTML Frameset DTD
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

  2. Identify your language by adding a property to the html tag. Let's assume your website is in English, then write the beginning html tag like this:

    <html lang="en">


    Refer to Code for the Representation of the Names of Languages for more language codes. If you are using XHTML document types, add one more property so it looks like:

    <html xml:lang="en" lang="en">

  3. Construct descriptive page titles that make sense of the content, optionally with more hierarchical information.
  4. Use real HTML built-in links rather than pseudo-links such as one that's powered by JavaScript.
  5. Provide titles to your links, at least to those whose texts are not adequatly descriptive of the target linked to, like this:

    <a href="http://www.kavoir.com/" title="Build Easy">A blog on web building</a>

  6. Try not to open up new windows. If it's necessary, throw a warning.
  7. Make good use of the semantic features of HTML. For instance, real tables should always be equipped with <caption></caption>, <thead></thead>, <tbody></tbody>, and <tfoot></tfoot>. Plus, a proper summary property to the table tag would also be nice:

    <table ... summary="this table is about ... ">
    ...
    </table>

  8. Similarly, make good use of the headers tag, h1, h2, h3, h4, h5, and h6 for your content.
  9. Lists should always be favored for lists. No tables. No manually numbered fake list with <br />, please.
  10. Always provide a alternative text for images in the following manner:

    <img src="..." alt="me and my grandma" />

  11. It's the same with image maps, don't forget to add an equivalent alt="" property to the <area ... /> tags.
  12. Label your form elements:

    <input id="ss1" ... ></input><label for="ss1">label information for ss1 goes here ... </label>

Above are the quickest steps you can take to achieve a more accessible website, for more suggestions on making your website accessible, Mark's Dive into Accessibility is a good start. Good luck and be accessible!

discuss iconposted by yang yang at 10:22 PM
permalink  

»Post a Comment

0 Comments:

»Post a Comment

Links to this post:

Create a Link

« Home