Fixing your skip links.
Read Damon Muma on this. He proposes the following jQuery solution (inspired by Thompson, fixed by me):
// Apply focus properly when accessing internal links with keyboard in WebKit browsers.
$("a[href^='#']").not("a[href='#']").click(function() {
$("#"+$(this).attr("href").slice(1)+"").focus();
});
I don’t like to use jQuery however for things that should be seen as required code for any website. Below I include my own JavaScript port, including some error checking and more complete HREF
support.
Version history.
- Pilot version. (d385d2)
tabindex
now using-1
instead of0
, as per Smith, added this README, and added UNLICENCE. (c194df)- Updates to the README. (prev. 0fce31) (prev. a31368) (7d175b)
- Added a clause to check for pre-existing
tabindex
values. (a39c9b) - Added support for named anchors. The
name
attribute is obsolete and is only checked for backwards compatibility. (0ab22c) - No more errors on empty fragments (
#
) or undefined elements (#thisIDisnotused
). (9ebb30) - Added support for URLs not starting with
#
but starting with the current page’s location. Also updated the README with a list of tested browsers. (8adf2a) - Shaved off some bytes and added a compressed version. (116262)
- Updated the README, it is no longer just a quick port. (924088)
- Even smaller. (prev. f6cf48) (aeb909)
- Fix for pages using a
BASE
element. As reported by Gartner. (prev. b8648a) (341fdf) - Stop overwriting existing
onClick
events. (376b75) - Inspired by Duffy’s take on things it now uses
addEventListener
instead ofonClick
to avoid event clashes, and the completelocation
value instead of a virtualA
-element. Also fine-tuned it to not apply to too many wrong links and shortened the code some more. (05bff0) - Current: Saving 6 more bytes on skiplinks.min.js via Google’s Closure Compiler Service. (prev. e0ca59)
Tested browsers
- Firefox 10.0.2
- Chrome 17.0.963.56
- Safari 5.0.6 (5533.22.3)
This comment has been minimized.
Hi! Would it be possible to extend this method so that links followed from the longdesc attribute or the cite attribute would also change focus? For a Webkit browser that allows you to open @longdesc URLs and @cite URLs, see iCab. http://www.icab.de Longdesc attribute URLs and cite attribute URL are, in iCab, opened via a contextual menu. I have a test page here: http://malform.no/testing/a-demo-of/longdesc-with-hidden-iframe/