SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    gimme the uuuuuuuuuuu duuudie's Avatar
    Join Date
    Feb 2004
    Location
    Switzerland
    Posts
    2,253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    a typical page... how can I improve accessibility?

    Hi

    here a typical webpage of mine:
    how could I improve accessibility?
    thanks in advance for your tips and tricks.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
    <div id="container"> 
       <div id="pageHeader">
          <a name="top"></a>   
       </div>
       <div id="hozSeparation">
          <br />
       </div>
       <div id="mainContent">
          <div id="leftCol">
             <p>
                <a href="http://localhost/" accesskey="h">Home</a>
             </p>
             <p>
                <a href="http://localhost/language.php?language=french&from=/index.php" accesskey="f">Français</a>
             </p>
             <p>
                <a href="http://localhost/language.php?language=english&from=/index.php" accesskey="e">English</a>
             </p>      
          </div>
          <div id="content">
             <h4>
                Welcome.
             </h4>
             <p class="pAlignLeft">
                The default language for this website is the english.
             </p>
             <p class="pAlignLeft">
                You can read the texts 
                <a href="http://localhost/anguage.php?language=french&from=/index.php" accesskey="f">
             in their french version
                </a>.
             </p>
             <p class="pAlignLeft">
                For your conveniance, you will be able switch the languages at any time during your visit.
             </p>
             <p>
                <a href="http://localhost/consulting.php" accesskey="1">Consulting</a>
             </p>
             <p>
                <a href="http://localhost/cfs.php" accesskey="2">Cfs</a>
             </p>
          </div>	
       </div>
       <div id="footer">
          <p>
             Contact us - 
             <a href="http://localhost/privacypolicy.php" accesskey="p">Privacy       Policy Statement</a> - 
             <a href="http://localhost/accesskeys.php" accesskey="k">Accesskey Details</a> - 
             <a href="#top" accesskey="t">Top</a>
          </p>
          <p>
             &copy info 2004
          </p>   
       </div>
    </div>
    </body>

  2. #2
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    By using the id attribute for the fragments identifier also marking up the French and English versions with something like; xml:lang="fr"

  3. #3
    SitePoint Addict
    Join Date
    Jun 2004
    Location
    UK, London
    Posts
    312
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Furthermore, use lists for the navigations instead of paragraphs and links. This way it is a lot easier to see what is copy and what is a navigation item and it allows for easier navigation with screen readers.

    If you use accesskey, it might be a good idea to go with the standards, F for example is used by some agents for other things, like search.

    Using contextual selectors instead of classes in your elements would also make it a lot easier to apply user stylesheets.
    Chris Heilmann
    Blog | Articles | Binaries

  4. #4
    gimme the uuuuuuuuuuu duuudie's Avatar
    Join Date
    Feb 2004
    Location
    Switzerland
    Posts
    2,253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks a lot for the replies!
    Quote Originally Posted by codepoet
    Using contextual selectors instead of classes in your elements would also make it a lot easier to apply user stylesheets.
    more info? what is a contextual selector?


  5. #5
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Contextual selectors consist of several simple selectors separated by white space, e.g. UL LI { font-size: small } where LI is a descendant of UL and the font-size: small is applied to the LI.

  6. #6
    gimme the uuuuuuuuuuu duuudie's Avatar
    Join Date
    Feb 2004
    Location
    Switzerland
    Posts
    2,253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    mh..... I'm not sure I get it... sorry about that

    if you have a few extra minutes one of these days, could you maybe post a little piece of code? that would be great!

    thanks in advance

  7. #7
    I am obstructing justice. bronze trophy fatnewt's Avatar
    Join Date
    Jul 2002
    Location
    Ottawa, Canada
    Posts
    1,766
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you have an unordered list, and you want to apply styles to every child list item, you don't need to specify a class for each one. In this example, there's a list with the class "navigation".

    HTML Code:
      <ul class="navigation">
      	<li>Item 1</li>
      	<li>Item 2</li>
      	<li>Item n</li>
      </ul>
    This CSS will apply to all list items (li) that are a child of unorderd lists of "navigation" class:

    Code:
      ul.navigation li {
      	color: #000;
      	font-weight: bold;
      }
    Colin Temple [twitter: @cailean]
    Web Analyst at Napkyn


  8. #8
    I am obstructing justice. bronze trophy fatnewt's Avatar
    Join Date
    Jul 2002
    Location
    Ottawa, Canada
    Posts
    1,766
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by duuudie
    Code:
              <p class="pAlignLeft">
    This isn't so much accessibility improvement, but a coding tip.

    You might want to make your class name more semantic, rather than referencing how they'll be displayed.

    For example, let's say you have a class of <h2> that you use to present more information. You have it at the bottom of many pages on your site. In your current design, it's blue, and right-aligned.

    You might be tempted to assign an easy-to-remember class if you're thinking visually, and call the element <h2 class="rightBlue"> ... or something like that.

    The problem is, if you ever change your design, and say you want those 'learn more' headers to be left-aligned and black, suddenly your class names make no sense. If you want to change them, you need to change every page on your site.

    However if you chose a class name that describes the function rather than the appearance (such as class="moreInfo"), you need only change the CSS file and the class name still makes sense.
    Colin Temple [twitter: @cailean]
    Web Analyst at Napkyn


  9. #9
    gimme the uuuuuuuuuuu duuudie's Avatar
    Join Date
    Feb 2004
    Location
    Switzerland
    Posts
    2,253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks a lot for your help

  10. #10
    SitePoint Member
    Join Date
    Oct 2004
    Location
    Loughborough
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Alt tags

    I know its an obvious one but good descriptive alt tags help a great deal. Also name the table contents as it makes it easier fro screen readers.

    Henry

    www.rhubarbmedia.com

  11. #11
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by henryfoole
    I know its an obvious one but good descriptive alt tags
    attributes...attributes...attributes...

    Also name the table contents as it makes it easier fro screen readers.
    only do so (via the summary attribute) for data tables, though.
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •