Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Make skip link look less "bare bones" #15363

Merged
merged 2 commits into from
Dec 14, 2014
Merged

Make skip link look less "bare bones" #15363

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d5647e1
Make skip link look less "bare bones"
patrickhlauke Dec 14, 2014
2d41894
Expand/clarify advice about skip links
patrickhlauke Dec 14, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions docs/_includes/getting-started/accessibility.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,13 @@ <h1 id="accessibility" class="page-header">Accessibility</h1>
<p class="lead">Bootstrap follows common web standards and&mdash;with minimal extra effort&mdash;can be used to create sites that are accessible to those using <abbr title="Assistive Technology" class="initialism">AT</abbr>.</p>

<h3>Skip navigation</h3>
<p>If your navigation contains many links and comes before the main content in the DOM, add a <code>Skip to main content</code> link immediately after your opening <code>&lt;body&gt;</code> tag. <a href="http://a11yproject.com/posts/skip-nav-links/">(read why)</a></p>
<p>If your navigation contains many links and comes before the main content in the DOM, add a <code>Skip to main content</code> link before the navigation <a href="http://a11yproject.com/posts/skip-nav-links/">(read why)</a>. Using the <code>.sr-only</code> class will visually hide the skip link, and the <code>.sr-only-focusable</code> class will ensure that the link becomes visible once focused (for sighted keyboard users).</p>
{% highlight html %}
<body>
<a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
...
<div class="container" id="content">
The main page content.
<!-- The main page content -->
</div>
</body>
{% endhighlight %}
Expand Down
2 changes: 1 addition & 1 deletion docs/_layouts/default.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
{% include header.html %}
</head>
<body>
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
<a id="skippy" class="sr-only sr-only-focusable" href="#content"><div class="container"><span class="skiplink-text">Skip to main content</span></div></a>

<!-- Docs master nav -->
{% include nav/main.html %}
Expand Down
2 changes: 1 addition & 1 deletion docs/_layouts/home.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
{% include header.html %}
</head>
<body class="bs-docs-home">
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
<a id="skippy" class="sr-only sr-only-focusable" href="#content"><div class="container"><span class="skiplink-text">Skip to main content</span></div></a>

<!-- Docs master nav -->
{% include nav/main.html %}
Expand Down
20 changes: 20 additions & 0 deletions docs/assets/css/src/docs.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,26 @@ body {
}


/*
* Fancy skip link
*
* Make it look a bit less "bare bones"
*/

#skippy {
display: block;
padding: 1em;
color: #fff;
background-color: #6F5499;
outline: 0;
}

#skippy .skiplink-text {
padding: 0.5em;
outline: 1px dotted;
}


/*
* Main navigation
*
Expand Down