SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Evangelist dhtmlhelp's Avatar
    Join Date
    May 2003
    Posts
    575
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Anchors and Usability

    The world never sleeps ... and so do I

    I need a small help with anchors and accessibility. I am trying to have a content anchor using:

    <a accesskey='S' href='#content'></a>

    and then in the content section:

    <span id='content'></span>

    it doesn't look right to me...

    DH

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    It is right though , but you may want to put some text between your opening and closing <a> tags.

  3. #3
    SitePoint Evangelist dhtmlhelp's Avatar
    Join Date
    May 2003
    Posts
    575
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks vinnie, Is that indispensable? I need ot use it for screenreaders only.

  4. #4
    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)
    two common methods:

    - use a 1px x 1px transparent gif
    Code:
    <a accesskey="S" href="#content"><img src="/images/trans.gif" width="1" height="1" alt="Skip to content" /></a>
    - use a normal text link, but have CSS hide it
    Code:
    #skiplink {
        display: none;
    }
    
    <a accesskey="S" href="'#content" id="skiplink">skip to content</a>
    problem with the second method: the latest (?) version of JAWS has a flaw which means that it completely ignores "display: none" elements (it should read them out, regardless of CSS...but it doesn't, due to its hybrid approach of scraping the screen and looking at the source code of an HTML page). workaround include not setting "display: none", but opting for a text color that's the same as the background, for instance...

    a variation on the second method is also:
    Code:
    <a accesskey="S" href="'#content" id="skiplink" title="skip to content">S</a>
    or whatever (the S here stands for some short, unobtrusive visible text...the key here is the title attribute which is read out by the screenreader).

    after a lot of testing, i actually opted for method number one, with the small gif...
    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

  5. #5
    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)
    ah...forgot: in any case, you do need something in between you <a> tags...as otherwise some text browsers/screenreaders may simply ignore the empty link.
    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

  6. #6
    SitePoint Evangelist dhtmlhelp's Avatar
    Join Date
    May 2003
    Posts
    575
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi redux,

    thanks for the advice.

    DH

  7. #7
    Forensic SEO Consultant Webnauts's Avatar
    Join Date
    Jun 2003
    Location
    European Union
    Posts
    1,491
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Isn't necessary including besides the "id", also "name" for backward compatibility?

  8. #8
    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 Webnauts
    Isn't necessary including besides the "id", also "name" for backward compatibility?
    yes...although i have to admit that even lynx understands the id thing. it's only version 4 browsers and below that have a problem with it.
    you could do a "double-cooked" method of having
    Code:
    <div id="content">
        <a name="content"></a>
        blah blah blah
    </div>
    as i think the browsers that don't understand the id also need to have proper A anchors to target...
    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

  9. #9
    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)
    Yes, that is the case with Netscape 4.7x as far as I remember.


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
  •