- From: Lisa Seeman <seeman@netvision.net.il>
- Date: Thu, 24 Jun 2004 17:33:52 +0300
- To: 'Jim Thatcher' <jim@jimthatcher.com>, 'WAI-GL' <w3c-wai-gl@w3.org>
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