WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: RE: Skip navigation and frames

for

Number of posts in this thread: 2 (In chronological order)

From: Zwack, Melanie
Date: Thu, Sep 05 2002 9:39AM
Subject: RE: Skip navigation and frames
No previous message | Next message →


On the web site below:
http://www.whitehousedrugpolicy.gov/about/index.html
<http://www.whitehousedrugpolicy.gov/about/index.html>;

If you hover on the top mast between the seal on the left, and the "About
ONDCP" on the Main mast, you can see the URL with #skipnav, if you select
(click on this) this it will take you right below the navigation buttons.

We did this by making a 1 pixel width sliver in the mast in the content
frame part of the page and put an anchor around this to link to the object
of the ancher placed right below the navigation buttons.

The code is shown below:



<title>About - ONDCP</title>

<body marginheight="0" topmargin="0" leftmargin="0" marginwidth="0"
text="#333333" link="#330099" vlink="#330099" alink="#330099"
bgcolor="#ffffff">

</head>


<table border="0" cellspacing="0" cellpadding="0" width="516" valign="top">
<tr valign="top">

<td width="516" align="left" valign="top"><a href="#skipnav"><img
src="../images/mast_xpix_blue.jpg" width="1" height="89" alt="Skip
Navigation" border="0"></a><img src="../images/mast_about2.jpg" width="430"
height="89" alt="About" border="0"><img src="../images/rnav_red.jpg"
width="85" height="89" alt="About ONDCP" border="0" vspace="0" hspace="0"
usemap="#right_nav"><br>

<table cellpadding="1" cellspacing="0" border="0" width="516">
<tr>
<td align="left" valign="top"><a href="
<http://www.whitehousedrugpolicy.gov/index.html>;
http://www.whitehousedrugpolicy.gov/index.html" target="_top"><img src="
<http://www.whitehousedrugpolicy.gov/images/ondcp_home_button.gif>;
http://www.whitehousedrugpolicy.gov/images/ondcp_home_button.gif" width="72"
height="30" alt="ONDCP Web Site" border="0" vspace="0" hspace="0"></a></td>
<td align="left" valign="top"><a href="
<http://www.whitehousedrugpolicy.gov/about/index.html>;
http://www.whitehousedrugpolicy.gov/about/index.html" target="_top"><img
src=" <http://www.whitehousedrugpolicy.gov/images/ondcp_about_button.gif>;
http://www.whitehousedrugpolicy.gov/images/ondcp_about_button.gif"
width="72" height="30" alt="About ONDCP" border="0" vspace="0"
hspace="0"></a></td>
<td align="left" valign="top"><a href="
<http://www.whitehousedrugpolicy.gov/news/index.html>;
http://www.whitehousedrugpolicy.gov/news/index.html" target="_top"><img
src=" <http://www.whitehousedrugpolicy.gov/images/ondcp_news_button.gif>;
http://www.whitehousedrugpolicy.gov/images/ondcp_news_button.gif" width="72"
height="30" alt="News and Public Affairs" border="0" vspace="0"
hspace="0"></a></td>
<td align="left" valign="top"><a href="
<http://www.whitehousedrugpolicy.gov/policy/index.html>;
http://www.whitehousedrugpolicy.gov/policy/index.html" target="_top"><img
src=" <http://www.whitehousedrugpolicy.gov/images/ondcp_policy_button.gif>;
http://www.whitehousedrugpolicy.gov/images/ondcp_policy_button.gif"
width="72" height="30" alt="Policy" border="0" vspace="0"
hspace="0"></a></td>
<td align="left" valign="top"><a href="
<http://www.whitehousedrugpolicy.gov/drugfact/index.html>;
http://www.whitehousedrugpolicy.gov/drugfact/index.html" target="_top"><img
src=" <http://www.whitehousedrugpolicy.gov/images/ondcp_facts_button.gif>;
http://www.whitehousedrugpolicy.gov/images/ondcp_facts_button.gif"
width="72" height="30" alt="Drug Facts" border="0" vspace="0"
hspace="0"></a></td>
<td align="left" valign="top"><a href="
<http://www.whitehousedrugpolicy.gov/publications/index.html>;
http://www.whitehousedrugpolicy.gov/publications/index.html"
target="_top"><img src="
<http://www.whitehousedrugpolicy.gov/images/ondcp_pubs_button.gif>;
http://www.whitehousedrugpolicy.gov/images/ondcp_pubs_button.gif" width="72"
height="30" alt="Publications" border="0" vspace="0" hspace="0"></a></td>
<td align="left" valign="top"><a href="
<http://www.whitehousedrugpolicy.gov/links/index.html>;
http://www.whitehousedrugpolicy.gov/links/index.html" target="_top"><img
src=" <http://www.whitehousedrugpolicy.gov/images/ondcp_links_button.gif>;
http://www.whitehousedrugpolicy.gov/images/ondcp_links_button.gif"
width="72" height="30" alt="Related Links" border="0" vspace="0"
hspace="0"></a></td>
</tr>
<tr>
<td align="left" valign="top"><a href="
<http://www.whitehousedrugpolicy.gov/prevent/index.html>;
http://www.whitehousedrugpolicy.gov/prevent/index.html" target="_top"><img
src="
<http://www.whitehousedrugpolicy.gov/images/ondcp_prevention_button.gif>;
http://www.whitehousedrugpolicy.gov/images/ondcp_prevention_button.gif"
width="72" height="30" alt="Prevention" border="0" vspace="0"
hspace="0"></a></td>
<td align="left" valign="top"><a href="
<http://www.whitehousedrugpolicy.gov/treat/index.html>;
http://www.whitehousedrugpolicy.gov/treat/index.html" target="_top"><img
src="
<http://www.whitehousedrugpolicy.gov/images/ondcp_treatment_button.gif>;
http://www.whitehousedrugpolicy.gov/images/ondcp_treatment_button.gif"
width="72" height="30" alt="Treatment" border="0" vspace="0"
hspace="0"></a></td>
<td align="left" valign="top"><a href="
<http://www.whitehousedrugpolicy.gov/science_tech/index.html>;
http://www.whitehousedrugpolicy.gov/science_tech/index.html"
target="_top"><img src="
<http://www.whitehousedrugpolicy.gov/images/ondcp_science_button.gif>;
http://www.whitehousedrugpolicy.gov/images/ondcp_science_button.gif"
width="72" height="30" alt="Science and Technology" border="0" vspace="0"
hspace="0"></a></td>
<td align="left" valign="top"><a href="
<http://www.whitehousedrugpolicy.gov/enforce/index.html>;
http://www.whitehousedrugpolicy.gov/enforce/index.html" target="_top"><img
src="
<http://www.whitehousedrugpolicy.gov/images/ondcp_enforcement_button.gif>;
http://www.whitehousedrugpolicy.gov/images/ondcp_enforcement_button.gif"
width="72" height="30" alt="Enforcement" border="0" vspace="0"
hspace="0"></a></td>
<td align="left" valign="top"><a href="
<http://www.whitehousedrugpolicy.gov/statelocal/index.html>;
http://www.whitehousedrugpolicy.gov/statelocal/index.html"
target="_top"><img src="
<http://www.whitehousedrugpolicy.gov/images/ondcp_state_button.gif>;
http://www.whitehousedrugpolicy.gov/images/ondcp_state_button.gif"
width="72" height="30" alt="State and Local" border="0" vspace="0"
hspace="0"></a></td>
<td align="left" valign="top"><a href="
<http://www.whitehousedrugpolicy.gov/international/index.html>;
http://www.whitehousedrugpolicy.gov/international/index.html"
target="_top"><img src="
<http://www.whitehousedrugpolicy.gov/images/ondcp_intl_button.gif>;
http://www.whitehousedrugpolicy.gov/images/ondcp_intl_button.gif" width="72"
height="30" alt="International" border="0" vspace="0" hspace="0"></a></td>
<td align="left" valign="top"><a href="
<http://www.whitehousedrugpolicy.gov/funding/index.html>;
http://www.whitehousedrugpolicy.gov/funding/index.html" target="_top"><img
src=" <http://www.whitehousedrugpolicy.gov/images/ondcp_fund_button.gif>;
http://www.whitehousedrugpolicy.gov/images/ondcp_fund_button.gif" width="72"
height="30" alt="Funding" border="0" vspace="0" hspace="0"></a></td>
</tr>
</table>



<blockquote>


<font size="2" face="arial, helvetica, sans-serif">


<!-- Content begins-->
<a name="skipnav"><img src="
<http://www.whitehousedrugpolicy.gov/images/clear.gif>;
http://www.whitehousedrugpolicy.gov/images/clear.gif" width="1" height="1"
alt="Start of Main Content" border="0"></a><br>



<p>The White House Office of National Drug Control Policy (ONDCP), a
component of the Executive Office of the President, was <a
href="legislation.html" target="_top">established</a> by the Anti-Drug Abuse
Act of 1988. </p>





The skip nav code is shown below:
<a href="#skipnav"><img src="../images/mast_xpix_blue.jpg" width="1"
height="89" alt="Skip Navigation" border="0"></a>

The code for the object of the anchor is shown below and is placed below the
navigation buttons:
<a name="skipnav"><img src="
<http://www.whitehousedrugpolicy.gov/images/clear.gif>;
http://www.whitehousedrugpolicy.gov/images/clear.gif" width="1" height="1"
alt="Start of Main Content" border="0"></a>




I've heard some people do this with an image map, but I've heard that
doesn't work.



-----Original Message-----
From: Steve Vosloo [mailto: = EMAIL ADDRESS REMOVED = ]
Sent: Thursday, September 05, 2002 7:13 AM
To: WEBAIM FORUM
Subject: Skip navigation and frames


In a site where navigation frames are separated from the content frame, how
is Skip navigation implemented?

Thanks
Steve

Steve Vosloo
Division Manager
Usability Junction

Tel: + 27 (0) 21 409 7961
Fax: + 27 (0) 21 409 7050
Cell: + 27 (0) 83 463 0012
Web: www.usabilityjunction.com <http://www.usabilityjunction.com/>;



----
To subscribe, unsubscribe, or view list archives,
visit http://www.webaim.org/discussion/

From: Steve Vosloo
Date: Fri, Sep 06 2002 12:38AM
Subject: RE: Skip navigation and frames
← Previous message | No next message

Thanks. It looks as if your Skip Nav is within each frame -- so there's
one on the content page. I'm going to do the same for the content pages.


Steve



> -----Original Message-----
> From: Zwack, Melanie [mailto: = EMAIL ADDRESS REMOVED = ]
> Sent: 05 September 2002 06:33 PM
> To: ' = EMAIL ADDRESS REMOVED = '
> Subject: RE: Skip navigation and frames
>
>
>
> On the web site below:
> http://www.whitehousedrugpolicy.gov/about/index.html
> <http://www.whitehousedrugpolicy.gov/about/index.html>;
>
> If you hover on the top mast between the seal on the left,
> and the "About ONDCP" on the Main mast, you can see the URL
> with #skipnav, if you select (click on this) this it will
> take you right below the navigation buttons.
>
> We did this by making a 1 pixel width sliver in the mast in
> the content frame part of the page and put an anchor around
> this to link to the object of the ancher placed right below
> the navigation buttons.
>
> The code is shown below:
>
>
>
> <title>About - ONDCP</title>
>
> <body marginheight="0" topmargin="0" leftmargin="0"
> marginwidth="0" text="#333333" link="#330099" vlink="#330099"
> alink="#330099" bgcolor="#ffffff">
>
> </head>
>
>
> <table border="0" cellspacing="0" cellpadding="0" width="516"
> valign="top"> <tr valign="top">
>
> <td width="516" align="left" valign="top"><a
> href="#skipnav"><img src="../images/mast_xpix_blue.jpg"
> width="1" height="89" alt="Skip Navigation"
> border="0"></a><img src="../images/mast_about2.jpg"
> width="430" height="89" alt="About" border="0"><img
> src="../images/rnav_red.jpg" width="85" height="89"
> alt="About ONDCP" border="0" vspace="0" hspace="0"
> usemap="#right_nav"><br>
>
> <table cellpadding="1" cellspacing="0" border="0"
> width="516"> <tr> <td align="left" valign="top"><a href="
> <http://www.whitehousedrugpolicy.gov/index.html>;
> http://www.whitehousedrugpolicy.gov/index.html"
> target="_top"><img src="
> <http://www.whitehousedrugpolicy.gov/images/ondcp_home_button.gif>;
> http://www.whitehousedrugpolicy.gov/images/ondcp_home_button.g
> if" width="72" height="30" alt="ONDCP Web Site" border="0"
> vspace="0" hspace="0"></a></td> <td align="left"
> valign="top"><a href="
> <http://www.whitehousedrugpolicy.gov/about/index.html>;
> http://www.whitehousedrugpolicy.gov/about/index.html"
> target="_top"><img src="
> <http://www.whitehousedrugpolicy.gov/images/ondcp_about_button.gif>;
> http://www.whitehousedrugpolicy.gov/images/ondcp_about_button.gif"
> width="72" height="30" alt="About ONDCP" border="0"
> vspace="0" hspace="0"></a></td> <td align="left"
> valign="top"><a href="
> <http://www.whitehousedrugpolicy.gov/news/index.html>;
> http://www.whitehousedrugpolicy.gov/news/index.html"
> target="_top"><img src="
> <http://www.whitehousedrugpolicy.gov/images/ondcp_news_button.gif>;
> http://www.whitehousedrugpolicy.gov/images/ondcp_news_button.g
> if" width="72" height="30" alt="News and Public Affairs"
> border="0" vspace="0" hspace="0"></a></td> <td align="left"
> valign="top"><a href="
> <http://www.whitehousedrugpolicy.gov/policy/index.html>;
> http://www.whitehousedrugpolicy.gov/policy/index.html"
> target="_top"><img src="
> <http://www.whitehousedrugpolicy.gov/images/ondcp_policy_button.gif>;
> http://www.whitehousedrugpolicy.gov/images/ondcp_policy_button.gif"
> width="72" height="30" alt="Policy" border="0" vspace="0"
> hspace="0"></a></td> <td align="left" valign="top"><a href="
> <http://www.whitehousedrugpolicy.gov/drugfact/index.html>;
> http://www.whitehousedrugpolicy.gov/drugfact/index.html"
> target="_top"><img src="
> <http://www.whitehousedrugpolicy.gov/images/ondcp_facts_button.gif>;
> http://www.whitehousedrugpolicy.gov/images/ondcp_facts_button.gif"
> width="72" height="30" alt="Drug Facts" border="0" vspace="0"
> hspace="0"></a></td> <td align="left" valign="top"><a href="
> <http://www.whitehousedrugpolicy.gov/publications/index.html>;
> http://www.whitehousedrugpolicy.gov/publications/index.html"
> target="_top"><img src="
> <http://www.whitehousedrugpolicy.gov/images/ondcp_pubs_button.gif>;
> http://www.whitehousedrugpolicy.gov/images/ondcp_pubs_button.g
> if" width="72" height="30" alt="Publications" border="0"
> vspace="0" hspace="0"></a></td> <td align="left"
> valign="top"><a href="
> <http://www.whitehousedrugpolicy.gov/links/index.html>;
> http://www.whitehousedrugpolicy.gov/links/index.html"
> target="_top"><img src="
> <http://www.whitehousedrugpolicy.gov/images/ondcp_links_button.gif>;
> http://www.whitehousedrugpolicy.gov/images/ondcp_links_button.gif"
> width="72" height="30" alt="Related Links" border="0"
> vspace="0" hspace="0"></a></td> </tr> <tr> <td align="left"
> valign="top"><a href="
> <http://www.whitehousedrugpolicy.gov/prevent/index.html>;
> http://www.whitehousedrugpolicy.gov/prevent/index.html"
> target="_top"><img src="
> <http://www.whitehousedrugpolicy.gov/images/ondcp_prevention_b
> utton.gif>
> http://www.whitehousedrugpolicy.gov/images/ondcp_prevention_bu
> tton.gif"
> width="72" height="30" alt="Prevention" border="0" vspace="0"
> hspace="0"></a></td> <td align="left" valign="top"><a href="
> <http://www.whitehousedrugpolicy.gov/treat/index.html>;
> http://www.whitehousedrugpolicy.gov/treat/index.html"
> target="_top"><img src="
> <http://www.whitehousedrugpolicy.gov/images/ondcp_treatment_bu
> tton.gif>
> http://www.whitehousedrugpolicy.gov/images/ondcp_treatment_button.gif"
> width="72" height="30" alt="Treatment" border="0" vspace="0"
> hspace="0"></a></td> <td align="left" valign="top"><a href="
> <http://www.whitehousedrugpolicy.gov/science_tech/index.html>;
> http://www.whitehousedrugpolicy.gov/science_tech/index.html"
> target="_top"><img src="
> <http://www.whitehousedrugpolicy.gov/images/ondcp_science_button.gif>;
> http://www.whitehousedrugpolicy.gov/images/ondcp_science_button.gif"
> width="72" height="30" alt="Science and Technology"
> border="0" vspace="0" hspace="0"></a></td> <td align="left"
> valign="top"><a href="
> <http://www.whitehousedrugpolicy.gov/enforce/index.html>;
> http://www.whitehousedrugpolicy.gov/enforce/index.html"
> target="_top"><img src="
> <http://www.whitehousedrugpolicy.gov/images/ondcp_enforcement_
> button.gif>
> http://www.whitehousedrugpolicy.gov/images/ondcp_enforcement_b
> utton.gif"
> width="72" height="30" alt="Enforcement" border="0"
> vspace="0" hspace="0"></a></td> <td align="left"
> valign="top"><a href="
> <http://www.whitehousedrugpolicy.gov/statelocal/index.html>;
> http://www.whitehousedrugpolicy.gov/statelocal/index.html"
> target="_top"><img src="
> <http://www.whitehousedrugpolicy.gov/images/ondcp_state_button.gif>;
> http://www.whitehousedrugpolicy.gov/images/ondcp_state_button.gif"
> width="72" height="30" alt="State and Local" border="0"
> vspace="0" hspace="0"></a></td> <td align="left"
> valign="top"><a href="
> <http://www.whitehousedrugpolicy.gov/international/index.html>;
> http://www.whitehousedrugpolicy.gov/international/index.html"
> target="_top"><img src="
> <http://www.whitehousedrugpolicy.gov/images/ondcp_intl_button.gif>;
> http://www.whitehousedrugpolicy.gov/images/ondcp_intl_button.g
> if" width="72" height="30" alt="International" border="0"
> vspace="0" hspace="0"></a></td> <td align="left"
> valign="top"><a href="
> <http://www.whitehousedrugpolicy.gov/funding/index.html>;
> http://www.whitehousedrugpolicy.gov/funding/index.html"
> target="_top"><img src="
> <http://www.whitehousedrugpolicy.gov/images/ondcp_fund_button.gif>;
> http://www.whitehousedrugpolicy.gov/images/ondcp_fund_button.g
> if" width="72" height="30" alt="Funding" border="0"
> vspace="0" hspace="0"></a></td> </tr> </table>
>
>
>
> <blockquote>
>
>
> <font size="2" face="arial, helvetica, sans-serif">
>
>
> <!-- Content begins-->
> <a name="skipnav"><img src="
> <http://www.whitehousedrugpolicy.gov/images/clear.gif>;
> http://www.whitehousedrugpolicy.gov/images/clear.gif"
> width="1" height="1" alt="Start of Main Content" border="0"></a><br>
>
>
>
> <p>The White House Office of National Drug Control Policy
> (ONDCP), a component of the Executive Office of the
> President, was <a href="legislation.html"
> target="_top">established</a> by the Anti-Drug Abuse Act of 1988. </p>
>
>
>
>
>
> The skip nav code is shown below:
> <a href="#skipnav"><img src="../images/mast_xpix_blue.jpg"
> width="1" height="89" alt="Skip Navigation" border="0"></a>
>
> The code for the object of the anchor is shown below and is
> placed below the navigation buttons: <a name="skipnav"><img
> src=" > <http://www.whitehousedrugpolicy.gov/images/clea>; r.gif>
>
>
>
http://www.whitehousedrugpolicy.gov/images/clear.gif" width="1"
height="1" alt="Start of Main Content" border="0"></a>




I've heard some people do this with an image map, but I've heard that
doesn't work.



-----Original Message-----
From: Steve Vosloo [mailto: = EMAIL ADDRESS REMOVED = ]
Sent: Thursday, September 05, 2002 7:13 AM
To: WEBAIM FORUM
Subject: Skip navigation and frames


In a site where navigation frames are separated from the content frame,
how is Skip navigation implemented?

Thanks
Steve

Steve Vosloo
Division Manager
Usability Junction

Tel: + 27 (0) 21 409 7961
Fax: + 27 (0) 21 409 7050
Cell: + 27 (0) 83 463 0012
Web: www.usabilityjunction.com <http://www.usabilityjunction.com/>;



----
To subscribe, unsubscribe, or view list archives,
visit http://www.webaim.org/discussion/


----
To subscribe, unsubscribe, or view list archives,
visit http://www.webaim.org/discussion/