SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    Forensic SEO Consultant Webnauts's Avatar
    Join Date
    Jun 2003
    Location
    European Union
    Posts
    1,491
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    "Skip Navigation" or "Skip to Content" link tutorial

    Skipping over navigation links tutorial

    Enhance your web site accessibility providing 'Skip to Content or Navigation' links.

    And from the usability for accessibility point of view, it is recommended to make such links visible.

    Why? Frank Gayne at infocentre.frontend.com explain's:

    "You must consider people with other types of impairments in this context also. Ask whether or not skip links would be useful for people who cannot easily use a mouse? Many of these people depend on tabbing in order to make progress through an interface and might appreciate a skip links feature to lighten the amount of work they have to do. If there is no visible focus to let these people know they have hit a link then this useful feature is lost to them."

    Read whole article here: http://infocentre.frontend.com/servl...article&id=150


    How can you build such links?

    Immediately after the logo of your web site insert the skip link:
    <a class="skiplink" href="#startcontent">Skip over navigation</a>

    If this is done do one of the following, depending on the MarkUp Laguage you are using:

    1. If you're using any variant of HTML 4, add this just before your main content:
    <a name="content"></a>

    2. If you are using any variant of XHTML 1.0, add this just before your main content:
    <a name="content" id="content"></a>

    3. If you are using XHTML 1.1, add this just before your main content:
    <a id="startcontent"></a>


    By the way, if it does not fit in your design, you could do them also invisible as described below:

    1. Create a transparent graphic 1X1 pixels, and name it "spacer.gif".

    2. At the top of you page add this: <a href="#content" accesskey="S"><img src="spacer.gif" alt="Skip to content - (access key = S)" width="1" height="1" border="0" /></a>

    3. At the begining of your content add this: <a name="content" id="content"></a>


    Another fact is, that many web sites have the "Skip Navigation" or "Skip to content" links, before the logo of the page.

    But is that usable?

    A logo is a precursor of a web page. It lets the user know what website he/she is on. You may have internal/external links on your page. If a "Screen Reader" user clicks an internal link, your logo's "alt tag" tells the user that he/she have not yet left your website.
    If the skip navigation link is before this logo, then the user does not know immediately which website he/she is on.


    For further reading:

    Skip repetitive navigation links: http://oc.nci.nih.gov/web508/tip2.html
    Skipping over navigation links: http://diveintoaccessibility.org/day...ion_links.html
    Skip to Main Content Link: http://www.washington.edu/accessit/AU/tutorial/ins.html

    By John Britsios, Web Accessibility and Usability Consultant
    at Webnauts Net

  2. #2
    SitePoint Evangelist ucahg's Avatar
    Join Date
    Apr 2001
    Location
    Sarnia, Ontario, Canada
    Posts
    434
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Another method I just implemented on my design-in-progress is to have the skip links in my header box (it's a solid bg color), set to the same color as the bg color, and clipped to a width of 1em. Then, using the :focus pseudo-class, the focussed link will appear fully and in high contrast.

    Advantages:
    • User tabbing through pages will see these first.
    • Invisible to all other users
    • Screen reader will read links

    Disadvantages:
    • Only works in browsers that support :focus (not IE, notably)


    However for this disadvantage, I might write up a quick javascript to add onfocus and onblur attributes to the skip link tags (for IE), and change the style accordingly. Of course this will require javascript to be turned on then, but it's still a step further than invisible skip links IMO.

    Any comments on this method?
    Love it? Hate it? Helpful? Useless?
    Use the rate button to let me know what you think of my post!

  3. #3
    Forensic SEO Consultant Webnauts's Avatar
    Join Date
    Jun 2003
    Location
    European Union
    Posts
    1,491
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ucahg
    Another method I just implemented on my design-in-progress is to have the skip links in my header box (it's a solid bg color), set to the same color as the bg color, and clipped to a width of 1em. Then, using the :focus pseudo-class, the focussed link will appear fully and in high contrast.

    Advantages:
    • User tabbing through pages will see these first.
    • Invisible to all other users
    • Screen reader will read links
    Disadvantages:
    • Only works in browsers that support :focus (not IE, notably)
    However for this disadvantage, I might write up a quick javascript to add onfocus and onblur attributes to the skip link tags (for IE), and change the style accordingly. Of course this will require javascript to be turned on then, but it's still a step further than invisible skip links IMO.

    Any comments on this method?
    I just felt that it is important to mention here, that setting text, links etc with the a same color as your background is considered by major search engines as spamming!!!


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
  •