RE: [techs] Revised , skipping to main content, and more

There are other  interesting ways to, with in a page, allow for in page
navigation such as skip links

Some interface we are playing with are page maps which describe the
sections of content on a page. These can be textual or graphical. They
allow people to jump to the section of the document that they want.

In a standard page this does let you jump to the main content , but of
course it lets you do a lot more jumping around, and have , in general,
a non linear experience of a page.

Examples...

a outline of page content such as  a page map interface
http://www.ubapps.com/pagemap/www.nds.com/solutions_and_services/solutio
ns_and_services.html#

(sited folks -select show page map)

A graphical page map, a bit like a spider diagram -(requires, uses, SVG)
http://www.ubapps.com/svg/www.w3.org/TR/WCAG20

:)

The SVG one is grate for us Learning disabled types, who hate the
extensive reading required to get to the section you need.

Note this link might  go down soon, I just ran them through for this
email.

Now to the question...

Do these count as a skip links link?

Are they a skip links technique?


keep well
Lisa


> -----Original Message-----
> From: w3c-wai-gl-request@w3.org 
> [mailto:w3c-wai-gl-request@w3.org] On Behalf Of Jim Thatcher
> Sent: Wednesday, June 23, 2004 5:32 AM
> To: 'WAI-GL'
> Subject: RE: [techs] Revised
> 
> 
> 
> Here is a revised Skip links discussion base on several 
> comments on the list. 
> 
> Changes: 
> (2) id attribute instead of name attribute in anchor element [2].
> (3) table of contents idea [3].
> (4) that headings navigation works in Opera [4].
> (5) added some comments on when skip links should be used [5].
> 
> 
> Action item to deal with Bugzilla bug #241 [1]. 
> 
> Skip Navigation Techniques
> 
> The idea is to provide a method for skipping over groups of 
> mostly repetitive navigation links to get to the main content 
> of the page. The problem is typified by http://www.cnn.com 
> where there is a lead story in the center middle of the page. 
> But there is a tremendous amount of information
> (links) that precedes that main story when listening to the 
> page or when tabbing through the links. Visually the main 
> story, always with a lead picture, is immediately obvious. 
> CNN does have a skip navigation link.
> 
> When should skip links be used? If there are five or more 
> navigation links and/or other content that comes before the 
> main content of the page then the skip navigation technique 
> should probably be used. If there are twenty links and other 
> elements before the main content, one of these techniques 
> definitely should be used.
> 
> What about skipping to different parts of the page say the 
> local navigation links, the search field, recent news, and 
> main content, like a short table of contents at the top of 
> the page? Many sites do have short "jump tables" at the top 
> of the page and clearly this can be useful so long as the 
> number of links is kept very small - say four or less. Adding 
> more than that is defeating the purpose of the skip link. 
> Better than such a "jump table" would to be to markup the 
> sections with headings markup - see technique 3. below. 
> Sometimes there seems to be no Main Content, maybe the page 
> is all links. If that is the case you probably should not 
> have a skip link and perhaps you will want to consider adding 
> more structure to your page so content can be grouped and 
> labeled with headings markup.
> 
> 
> 1. Skip Navigation Link 
> 
> The link should be at or very near the top of the page; it is 
> a link with a local target just before the beginning of the 
> main content.
> 
> <!-- at or very near the top of the page -->
> <a href="#main">Skip Navigation</a>
> <!-- many navigation links -->
> <a id="main" /a>
> <!-- beginning of main content -->
> 
> User agent issue: IE5 and 6 have a serious bug for all 
> in-page links when those links are activated from the 
> keyboard. Although visual focus (point of
> regard) correctly changes, input focus may not; instead it 
> may revert to the top of the page. There are two workarounds 
> for this problem. 
> 
> (a) Make sure the target (the named anchor) is in a table 
> cell! This work-around explains why this problem has gone 
> without notice for so long. When tables are not used for 
> layout, a table just for the target of the skip link will work: 
> 
> <table summary="Begin main content"><tbody><tr><td>
>    <a id="main" /a></td></tr></tbody></table>
> 
> The disadvantage of this work-around is that this is not 
> using the table markup for its intended purpose.
> 
> (b) When the target named anchor is a link, the input focus 
> will work properly. You can make the empty target a link like this:
> 
> <a id="main" href="#main" title="main content" /a>
> 
> The disadvantage of this work-around is that, depending on 
> the screen reader settings, it may result in an empty link in 
> the tab-order and in a links list. 
> 
> 2. Hiding the skip link. 
> 
> Some designers would prefer not to have the skip link visible 
> to all users. There are several techniques used to hide the skip link.
> 
> (a) Unimportant image: Use an image that otherwise needs no 
> text equivalent and place the link text as alt text on that image.
> 
> <a href="#main">
>    <img src="spacer.gif" width="1" height="1" alt="Skip 
> Navigation"></a>
> 
> When using the tab key the link text will be heard by a 
> screen reader and without a screen reader the href can be 
> observed in the status bar of IE.
> 
> (b) Color styling: Use the same foreground and background 
> colors on the link text (assume back text on white background 
> in code example) 
> 
> <a href="#main" class="skip">Skip Navigation</a> 
> 
> CSS: a.skip {color: #FFFFFF; background-color: #FFFFFF;}
> 
> When using the tab key the link text will be heard by a 
> screen reader and without a screen reader the href can be 
> observed in the status bar of IE.
> 
> 
> (c) Color styling so visible when active: The same technique 
> as (b) except in addition make the link visible when the 
> mouse is moved over the link or the link receives focus with 
> the tab key.
> 
> <a href="#main" class="skip">Skip Navigation</a> 
> 
> CSS: a.skip        {color: #FFFFFF; background-color: #FFFFFF;}
>      a.skip:active {color: #000000; background-color: #FFFFFF;}
>      a.skip:hover  {color: #000000; background-color: #FFFFFF;}
> 
> When using the tab key the link text will be heard by a 
> screen reader and
> seen in the graphical view when focused.     
> 
> (d) Hide the skip link by positioning it off screen.
> 
> <a href="#main" id="main" class="skip">Skip Navigation</a>
> 
> CSS: a.skip {position: absolute; left: -1000em; width: 20em;}
> 
> When using the tab key the link text will be heard by a 
> screen reader and without a screen reader the href can be 
> observed in the status bar of IE.
> 
> 
> (e) Hide the skip link using the display property; either 
> display:none or display:hidden. Screen readers will not speak 
> text with display:none and sometimes will not speak text with 
> display:hidden. Therefore this technique does not work since 
> the main intended beneficiaries of the skip link idea are 
> screen reader users.
> 
> 3. Using headings instead of skip links
> 
> If the first heading in the natural reading order of the page 
> is at the top of the main content, then the heading provides 
> an excellent method for screen reader users to skip the 
> navigation links because headings navigation is so simple 
> (the H key). However this technique is of no use for people 
> using IE and not using screen readers because IE lacks 
> keyboard navigation of headings.
> 
> It is a fact that screen readers (and IBM Home Page Reader) 
> depend on Internet Explorer, but if a screen reader is not a 
> requirement, headings navigation is available in Opera (S for 
> forward, W for backwards). 
> 
> 4. Layout so that skip navigation unnecessary. 
> 
> If with CSS the main content is at or near the top of the 
> document or for a page with table layout the navigation links 
> all follow the main content, then a skip navigation link may 
> be unnecessary. Example structure:
> 
> <!-- navigation on the right -->
> <table><tbody><tr>
>   <td>Main Content</td>
>   <td>Navigation</td>
> </tr></tbody></table>
> 
> <!-- With CSS -->
> <div id="content">Main Content</div>
> <div id="navigation">Navigation</div>
> 
> One can reasonably argue in both these cases it would be very 
> helpful for screen reader users to have a "skip to 
> navigation" link implemented by one of the techniques above.
> 
> 
> Some Examples
> 1. Visible and inoperable http://www.acb.org. 
> 2. Invisible (on image) and inoperable http://www.w3,org/wai. 
> 3. Invisible (on image) and operable http://www.ibm.com. 
> 4. Invisible by color and visible when active (2c) and 
> operable by its own table (1a) http://webaim.org. 
> 5. Invisible by color and visible when active (2c) and 
> operable because of layout tables http://ittatc.org. 
> 6. Invisible by color and size (not mentioned above) 
http://www.firstgov.com. 

[1] http://trace.wisc.edu/bugzilla_wcag/show_bug.cgi?id=241.
[2] http://lists.w3.org/Archives/Public/w3c-wai-gl/2004AprJun/0673.html 
[3] http://lists.w3.org/Archives/Public/w3c-wai-gl/2004AprJun/0678.html 
[4] http://lists.w3.org/Archives/Public/w3c-wai-gl/2004AprJun/0679.html 
[5] http://lists.w3.org/Archives/Public/w3c-wai-gl/2004AprJun/0683.html

Received on Thursday, 24 June 2004 10:46:55 UTC