Re: Tuesday, Aug 8 Team B Meeting

Hi Loretta,

> Techniques 1 and 3 are described in Jim Thatcher's materials, but technique
> 2 is not.
>
> One question is whether technique 2 is actually a technique that we want to
> list, given that it doesn't appear to be in common use.

It's a common scenario, but is probably deliberately overlooked as
skip links are obtrusive to the design. The simplest method would be
to provide a chain from one list of links to the next - something
like:

<h2>Main Navigation</h2>
<ul>
	<li><a href="#subnav">Sub Navigation</a></li>
	<li><a href="/a/">Link A</a></li>
        ....
</ul>

<h2 id="subnav">Sub Navigation</h2>
<ul>
	<li><a href="#ultranav">Ultra Sub Navigation</a></li>
	<li><a href="/suba/">Sub A</a></li>
	...
</ul>

<h2 id="ultranav">Ultra Sub Navigation</h2>
<ul>
	<li><a href="#content">Content title</a></li>
	<li><a href="/ultraa/">Ultra A</a></li>
	...
</ul>

<h2 id="content">Content title</h2>

That would work, except there is a bug with the way IE deals with
in-page navigation. I'm surprised that Jim doesn't mention the bug in
his tutorial, as I first encountered the bug through him. The bug is
that IE places focus on the first ancestor of the target for which the
hasLayout (a proprietary Microsoft property) is true. There are
several ways of dealing with it [1], such as wrapping a div around
each section, and providing a width in CSS to force the hasLayout
property to be set in IE. An ugly hack, but as IE is very widely used,
and in-page navigation is important, it's unfortunately unavoidable.
The complete workaround is below, and can be tested online:

http://juicystudio.com/experiments/skipper.html

<p>
<a href="#content">Content title</a>
</p>

<h2>Main Navigation</h2>
<ul>
	<li><a href="#subnav">Sub Navigation</a></li>
	<li><a href="/a/">Link A</a></li>
	<li><a href="/b/">Link B</a></li>
	<li><a href="/c/">Link C</a></li>
	...
	<li><a href="/j/">Link J</a></li>
</ul>

<div>
<h2 id="subnav">Sub Navigation</h2>
<ul>
	<li><a href="#ultranav">Ultra Sub Navigation</a></li>
	<li><a href="/suba/">Sub A</a></li>
	<li><a href="/subb/">Sub B</a></li>
	<li><a href="/subc/">Sub C</a></li>
	...
	<li><a href="/subj/">Sub J</a></li>
</ul>
</div>

<div>
<h2 id="ultranav">Ultra Sub Navigation</h2>
<ul>
	<li><a href="#content">Content title</a></li>
	<li><a href="/ultraa/">Ultra A</a></li>
	<li><a href="/ultrab/">Ultra B</a></li>
	<li><a href="/ultrac/">Ultra C</a></li>
	...
	<li><a href="/ultraj/">Ultra J</a></li>
</ul>
</div>

<div>
<h2 id="content">Content title</h2>
<p>
Lorem ipsum ...
</p>
</div>


[1] http://juicystudio.com/article/ie-keyboard-navigation.php

Best regards,

Gez




On 08/08/06, Loretta Guarino Reid <lguarino@adobe.com> wrote:
> Gez, this is a nice example, especially since it combines several techniques
> simultaneously. I definitely would like to add it to our unwritten HTML
> technique, Creating HTML links to skip blocks of content,  and to H69
> (Providing Heading elements at the beginning of each section of content).
>
> Currently, there are three Skip navigation techniques using links:
> 1. Provide a link to the main content
> 2. Provide a link at the beginning of each repeated block to the end of that
> block
> 3. Provide a set of links to each area of content
>
> If there is only one navigation area and one main content area, these
> techniques are effectively all the same.
>
> If there are two navigation areas and one main content, then these
> techniques would be:
> 1. Provide a Skip to Main Content link at the top of the page. If you want
> to get to the second Navigation area, you must tab through the first.
> 2. At the beginning to each navigation area, provide a link to the end of
> that area. The link for the first area might be title "Skip to end of
> Navigation Area 1" or it might be titled "Skip to Navigation Area 2". The
> links let you jump from area to area, so it takes two tab to reach the main
> content.
> 3. At the top of the page provide a table of links to both navigation areas
> and the main content
>
> Techniques 1 and 3 are described in Jim Thatcher's materials, but technique
> 2 is not.
>
> One question is whether technique 2 is actually a technique that we want to
> list, given that it doesn't appear to be in common use.
>
> Another question is whether the techniques should include guidance about
> when it is better to use one or the other.
>
> Loretta
>
>
> On 8/8/06 2:47 AM, "Gez Lemon" <gez.lemon@gmail.com> wrote:
>
> > On 07/08/06, Loretta Guarino Reid <lguarino@adobe.com> wrote:
> >> 2.      Review status of items sent back to Team B at last WG meeting
> >> (LC-701, LC-915, LC-969)
> >
> > For LC-701:
> >
> > I had trouble trying to understand the comments, including the
> > original comment. Could we use something like the following as an
> > example (first link in the block bypasses the rest of the block):
> >
> > <ul id="navigation">
> > <li><a href="#content">Content title</a></li>
> > <li><a href="/a/">Link A</a></li>
> > <li><a href="/b/">Link B</a></li>
> > <li><a href="/c/">Link C</a></li>
> > ...
> > <li><a href="/j/">Link J</a></li>
> > </ul>
> >
> > <h2 id="content">Content title</h2>
> > <p>
> > Lorem ipsum ...
> > </p>
> >
> > This kind of approach allows people dependent on keyboard navigation
> > using regular graphic browsers to skip large groups of repeated
> > content, whilst facilitating heading navigation with AT where it's
> > supported.
> >
> > Best regards,
> >
> > Gez
>
>


-- 
_____________________________
Supplement your vitamins
http://juicystudio.com

Received on Tuesday, 8 August 2006 15:05:15 UTC