Accessibility: skip navigation not just for screenreader-only users #13457
Description
Current advice in http://getbootstrap.com/getting-started/#accessibility suggests using a link with sr-only class to create a skip link to the main content of the page. Although this approach works fine for screenreader users, it is not adequate for another class of users that benefit from this: sighted keyboard-only users.
This user group needs the skip link to become at least visible, in an obvious/expected location (usually top/left of the document), when focus is set to it. Otherwise, with the sr-only method, sighted keyboard users will do a first TAB into the invisble skip link and not actually realise it's a skip link (unless they watch the browser's hint in the bottom toolbar).
My initial idea was to just add a new class at the end of scaffolding.css, a la
.skiplink {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
:focus.skiplink {
// undo the hiding
width: auto;
height: auto;
margin: 0;
overflow: auto;
clip: auto;
// some explicit visual styles
display: block;
background: #eee;
color: #000;
text-decoration: underline;
padding: 1em;
}but then held off because this would seem to be a super-specific bit of CSS - only really applicable to a skip link that is shown at the top of a document, due to its default position once focused - and also because it carries actual visual styling (to avoid having a link just floating over the rest of the page, potentially making it hard/impossible to actually see) which is probably out of place in the actual scaffolding.
So, wondering what the best approach here would be? Adding a very specific bit of CSS to bootstrap? Or should this simply be fixed in the prose for http://getbootstrap.com/getting-started/#accessibility ? For instance, for the latter, it's conceivable to expand the advice to say that although we'll just reuse the sr-only class that's nominally just for screenreader users, there is this other group that needs to see the link on focus, so specifically for the skip link we should also add a :focus state that undoes the actual hiding mechanisms of sr-only and, in addition, gives it some necessary (opaque background) and visually appealing (ideally consistent with whatever design the site has) style? Adding an explicit id to the example code, and then providing further CSS like so:
<body>
<a href="#content" id="skiplink" class="sr-only">Skip to main content</a>
<div class="container" id="content">
The main page content.
</div>
</body>#skiplink:focus {
// undo the hiding
width: auto;
height: auto;
margin: 0;
overflow: auto;
clip: auto;
// some explicit visual styles
display: block;
background: #eee;
color: #000;
text-decoration: underline;
padding: 1em;
}Thoughts?