Results 1 to 4 of 4

Thread: Skipping links assistance

  1. #1
    Join Date
    Feb 2006

    Skipping links assistance

    Last edited by 508; 04-26-2006 at 12:56 AM. Reason: NONE

  2. #2
    Join Date
    Dec 2002
    Manchester, UK
    Well you could do a lot more to tidy up that source code and make the page more accessible. For example, putting that list of navigation links into an unordered list and removing decorative images (such as deilogo.jpg and maroonline.jpg) from the HTML source and applying them as backgrounds to other elements using CSS. Using more descriptive alt text for the images that are content, because you actually have the same alt text four times for a group of different images and it's not very helpful, "GlenEchoPark", also note that there are three words there, but it's written as one.

    For your nav links I would suggest something like this:
    <ul id="navbar">
      <li id="skipnav"><a href="#content">Skip navigational links.</a></li>
      <li>[<a href="http://www.link1.com/">Mission</a>]</li>
      <li>[<a href="http://www.link2.com/">Services</a>]</li>
      <li>[<a href="http://www.link3.com/">General Experience</a>]</li>
      <li>[<a href="http://www.link4.com/">Private Sector Experience</a>]</li>
      <li>[<a href="http://www.link5.com/">Public Sector Experience</a>]</li>
      <li>[<a href="http://www.link6.com/">Permits Experience</a>]</li>
      <li>[<a href="http://www.link7.com/">Design and Permit Tools</a>]</li>
      <li>[<a href="http://www.link8.com/">Links</a>]</li>
      <li>[<a href="http://www.link9.com/">Contact Us</a>]</li>
    Then put all of the actual page content into a container <div> element, with id="content" on it, so that when the skipnav link is activated, the user will be taken straight to the content.

    You can use CSS to simply position the skipnav link somewhere off the page, like so:
    Users of graphical browsers won't see it, but screen readers will dutifully read it out.

    Note that I've also disposed of those <br> elements, you can use CSS to create new lines of links if you want, but a better alternative would be to apply a width to the parent <ul> and apply display:inline to all of the <li>'s. The <li>'s will then sort themselves out into multiple lines.

    You could also use the <ul> to display your logo. Just put some left padding on the <ul> then set the logo as a background image, and the maroon line could be replaced with a bottom border on the <ul>.

    I briefly mentioned it earlier, but I'll say it again, you never include any spaces in your alt text for the images. By not using spaces you're effectively shutting out blind users and search engines, because it won't make any sense when read out as a single word.
    Every fight is a food fight when you’re a cannibal.

  3. #3
    Join Date
    Apr 2005
    Hastings, Sussex, UK.
    I'd like to just pipe up and question the motives of what you're doing.

    Skip links are fine, but why hide them? If, sorry, when they receive focus, how does anyone know what to do with that focus? the link is hidden. This presents a usability problem. In terms of accessibility, if your content is marked up with headers then most assistive user agents will navigate a document by the headers making the skip link redundant. The point is to deliver content from the initial load of a page and skipping the navigation and any other stuff in the process. Headers above the content resolve this.

    There are many arguments for the pros and cons of skip links. Personally, I don't feel they're needed if the site is structured well. If you feel inclined to offer a skip link facility then show it. Sometimes, CSS part loads, some have this turned off and some devices offer narrow view so visible skip links offer a means of getting straight to the content without scrolling, something which is awkward on some PDA's and SmartPhones.

    Just some thoughts on the subject.

  4. #4
    Join Date
    Nov 2003
    Germany, Europe

    resolved Skip to main content tutorial

    Providing links that allow the user to skip directly to content, bypassing the navigation, enhances the accessibility of your web site. This is recommended for blind or visually impaired users, people who use screen readers, and also for text-browsers, mobile phones and PDAs (Personal Digital Assistants).

    These links are common on most US, UK, Irish, and other government websites, as well as many universities and private organizations.

    From the accessibility and usability point of view, it is recommended that you make such links visible. Why?

    In his article titled "Providing Skip Links", Frank Gayne of frontend.com explains:

    "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."

    How can you build such links? Immediately after the logo of your web site, insert the skip link: "Skip to main content". Does the link have to go after the logo? Many web sites have the "Skip to main content" links before the logo of the page, but a logo is the precursor of a web page. It lets the user know what website he/she is on.

    For example, if a Screen Reader user clicks an internal link on your page, your logo's alternate text attribute tells the user that he/she has not yet left your website. If the "Skip to main content" link is before this logo, then the user does not know immediately which website he/she is on.

    In many occasions, web site developers or their clients do not wish to have the "Skip to main content" link visible, with the excuse that it does not fit in their design. In this case they might use a technique wrapping the accessibility text or links in an HTML div setting it to display: none or visibility: hidden.

    The problem with this technique is that it does not always work as expected. Some screen readers do not speak material that is marked display: none or visibility hidden, and others depend on how the style is specified. To solve this problem, you could make them invisible with the technique of using transparent graphics.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



X vBulletin 4.2.2 Debug Information

  • Page Generation 0.14633 seconds
  • Memory Usage 2,867KB
  • Queries Executed 13 (?)
More Information
Template Usage (33):
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (2)bbcode_code
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (4)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (4)postbit
  • (4)postbit_onlinestatus
  • (4)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (70):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates