"Skip to main content" link

Forum Moderators: open

Message Too Old, No Replies

"Skip to main content" link

Does Google see this as spam?

NickH

8:43 pm on Aug 14, 2003 (gmt 0)

I'm planning to add an anchor for a "Skip to main content" accessibility link to each of my pages. There are a couple of different ways I could do this. Does anyone know whether Google would regard the first method, shown below, as spam? (Possibly, because there is markup, and not pure text, within the <h1> tag?)

Is method 2 preferable, anyway, from a SERPS perspective?

Thanks,
Nick

<a href="#main">Skip to main content</a>
... navigation bar...
<h1><a id="main">Main heading</a></h1>
<a href="#main">Skip to main content</a>
... navigation bar...
<a id="main"></a><h1>Main heading</h1>

mipapage

7:10 am on Aug 15, 2003 (gmt 0)

I've seen both methods used.

We use this and rank #1 for several phrases; if you search with site:www.mysite.com -diuiuwhd on our site, the accessibility links do come up in the description.


<body class="home"> 
<div id="access"> 
<a href="#content" tabindex="10" accesskey="2">skip to content</a> 
&nbsp;Ś&nbsp; 
<a href="#navigation" tabindex="20">skip to navigationn</a> 
<br /><br /></div> 
<div id="header"><a name="content" id="content"></a> 
<h1>Page Main Header Here</h1></div>

Wrapped in a <div> otherwise it's not 'valid code'. The div is set to display:none.
' Ś ' - if you don't know already, Bobby or Cynthia will tell you - Links must be separated by a breaking character, so if you include a skip to content and skip to navigation, this must be used.
The <br /> are specifically to give the <h1> a little extra space when viewed without stylesheets...

[edited by: mipapage at 7:17 am (utc) on Aug. 15, 2003]

[edited by: Marcia at 8:09 am (utc) on Aug. 15, 2003]
[edit reason] Fixed side scroll. [/edit]

Dolemite

7:15 am on Aug 15, 2003 (gmt 0)

Possibly, because there is markup, and not pure text, within the <h1> tag?

W3C standards actually require heading tags to be outside certain other tags. Maybe I'm not following your thinking as far as what could be seen as spam, but I don't see anything wrong.

IMO, just do what works best for users and in the design. Then, get it to validate [validator.w3.org] and don't worry about it.

MonkeeSage

7:27 am on Aug 15, 2003 (gmt 0)

Ps. To save an itty bitty amount of space, this:

<a id="main"></a><h1>Main heading</h1>

...can be this:

<h1 id="main">Main heading</h1>

..and it works just the same, either way. :)

Jordan

Dolemite

7:34 am on Aug 15, 2003 (gmt 0)

Just make sure you don't have a CSS ID selector called "#main". ;)

NickH

7:37 am on Aug 15, 2003 (gmt 0)

Thanks guys.

mipapage, I encountered the <div> enclosure requirement when I came to validate the page!

Have you encountered any problems with setting #access{display:none} -- I believe some screen readers do not read non-display text/links? Or does setting tabindex override this and cause them to read the link?

MonkeeSage, thanks, I'll try that as it seems the perfect solution! Have you tested it in any screen readers?

Dolemite, I'm probably just being paranoid, but I want it to be right for the users, to validate, and to work well with Google.

Nick

mipapage

7:40 am on Aug 15, 2003 (gmt 0)

Have you encountered any problems with setting #access{display:none} -- I believe some screen readers do not read non-display text/links? Or does setting tabindex override this and cause them to read the link?

Whew, not sure about that one. I thought I picked this up from 'Building Accessible Websites' or diveintoaccessibility.org, but I'll have to check around. I thought I was doing it right...

MonkeeSage

8:08 am on Aug 15, 2003 (gmt 0)

NickH:

The only screenreaders I'm familiar with are FestVox / MBROLA, and unfortunately my Redhat box is in storage (I'm moving about a month), and all I have here is my XP box; so I can't really try it out, sorry 'bout that. MS has some type of reader...Agent I think it's called...but I just never got around to toying with it.

Jordan

NickH

9:45 am on Aug 15, 2003 (gmt 0)

mipapage, I'm fairly sure I tested display:none with IBM Home Page Reader a while back, and found it did not read the text. But.. it may not have been a link, and it definitely did not have tabindex, which may make a difference.

MonkeeSage, I shall test your technique tonight with HPR. I hope it works. Does anyone know whether this technique works with JAWS or Window-Eyes?

Nick

mipapage

10:05 am on Aug 15, 2003 (gmt 0)

NickH,

To answer "Does anyone know whether this technique works with JAWS" - YES

Refer to:
diveintoaccessibility.org/day_11_skipping_over_navigation_links.html

NickH

8:05 pm on Aug 15, 2003 (gmt 0)

MonkeeSage, setting the id within the h1 tag works perfectly -- thanks for the tip!

mipapage, as I thought I recalled, setting display:none suppresses HPR's reading of the text. This is the case even where the text is a link, with tabindex and accesskey specified.

I suppose it makes sense that a screen reader would keep quiet about non-displayed content -- who knows what invisible junk is out there! Unfortunately, it breaks an elegant technique.

I wonder what JAWS and Window-Eyes do in this scenario? In some ways, HPR is an atypical screen reader...

Nick