I want to link to another part of a page... what does the markup look like for this? You can tell, I'm still a newbie
| SitePoint Sponsor |
I want to link to another part of a page... what does the markup look like for this? You can tell, I'm still a newbie
http://www.w3schools.com/HTML/html_links.asp
Read the part about the 'name' attribute.
Guido - Community Team Advisor
Do you know where the (database) error is? Add it to the list!
Thinking Web: Voices of the Community
Blog - Free Flash Slideshow Widget
Code HTML4Strict:<a href="#foo">Link</a> . . . <h3 id="foo">Foo</h3>
Birnam wood is come to Dunsinane
YEEEEEEEEE HAAAAAAAAAAAhhhh! Thanks guys. I looked around w3schools and couldn't find what I was looking for. But now it all makes sense.
Tommy, I'd love to use your method (and sometimes I still do) but how do you get around many browser's problems with moving the focus?? I can reliably get all browsers to move the visual focus correctly but for example in safari, the next Tab doesn't start from the new place (because the element with the id isn't focussable).
I've tried using this:
So that the true focus also goes to the new chunk of page, and keyboarding further starts at the new place like it should...Code:<a href="#foo">Skip to foo</a> ... <h3><a id="foo" href="foo"></a>Foo</h3>
and being empty it shouldn't get accidentally clicked, and even if somehow it did get clicked, it doesn't go anywhere and doesn't bring the user back to the top of the page (like # would)
but
it looks goofy, might not be semantic really, AND
Opera won't do it if the anchor is empty. All the other browsers seem to do the desired behaviour though including Lynx.
People who like/need keyboard navigation should use Opera. With Opera's spatial navigation this isn't an issue. If someone decides to use an inferior browser it's their problem.
I suppose you could try setting tabindex for the target element, but that opens another can o' worms. If you really need to cater to inferior browsers, you'll need something like this,
Code HTML4Strict:<h3><a name="foo">Foo</a></h3>
Birnam wood is come to Dunsinane
I used to do that (but without "name" 'cause I don't use it) but of course that means a lot of styling for the anchor text so it doesn't look like anchor text. Tabindex I won't touch : )
I wish, but actually, it's my problem. : )If someone decides to use an inferior browser it's their problem.
Can we apply this to IE users and just build sites for all the other browsers?Originally Posted by AutisticCuckoo
If someone decides to use an inferior browser it's their problem.
Probably not. But as Patrick Lauke (redux) says, some of the onus of accessibility is on the user.Can we apply this to IE users and just build sites for all the other browsers?
Birnam wood is come to Dunsinane
Ian Lloyd has this solution on http://reference.sitepoint.com/html/core-attributes/id:
Personally, though, I just use the id method now (post #3).Code:<a href="#section3">Jump to section 3</a> ⋮ <h2><a href="#section3" name="section3" id="section3"></a>Section 3</h2>
Ralph, that's what I posted, except without name...
and the only real problem was that Opera would not jump if the anchor was empty... is it that Opera will comply if there's a name attribute?? I assumed the reason it's not listed in the SP pages as an attribute either way was because XHTML was going to ditch it and use id for everyone. I forget what they were going to use name for instead.
Ideally one would only ever need a single token for an anchor, but if two are necessary to make things work I guess I'd do it.
Yes, I'm not really sure, to be honest. I found that using just the #id seemed to work pretty well generally, so I ditched the workarounds. Perhaps I didn't check extensively enough!
Oh, #id works... visually.
But open up Safari and tab to your skip link... hit enter... then try hitting tab again to get to the next anchor you see. Instead, you'll be brought back up to where you had initially found the skip link.
This because while you were able to move the visual focus with #id, you didn't move the keyboard focus.
FF and I think it was IE did this fine, so it's the only way I did it for a long time, then Safari-for-Windows came out, and bleh, didn't do what I thought it would.
I'd like to understand this better, but to be honest, I don't really have much of a grasp of tabbing. It never seems to work for me. Maybe it's a Mac thing. I keep meaning to read up on it. Nothing much ever happens when I tab through a page.
Posting Permissions
Bookmarks