rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-03-15 15:29:22 +01:00
Code Issues Actions Packages Releases Activity

Merge pull request #15363 from patrickhlauke/docs-nicer-skip-link

Browse Source 
Make skip link look less "bare bones"
This commit is contained in:
Patrick H. Lauke 2014-12-14 23:30:37 +00:00
commit c187f77e65
4 changed files with 25 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
docs/_includes/getting-started/accessibility.html
View File

@ -3,12 +3,13 @@
<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> <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> <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 %} {% highlight html %}
<body> <body>
<a href="#content" class="sr-only sr-only-focusable">Skip to main content</a> <a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
...
<div class="container" id="content"> <div class="container" id="content">
The main page content. <!-- The main page content -->
</div> </div>
</body> </body>
{% endhighlight %} {% endhighlight %}

2
docs/_layouts/default.html
View File

@ -5,7 +5,7 @@
{% include header.html %} {% include header.html %}
</head> </head>
<body> <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 --> <!-- Docs master nav -->
{% include nav/main.html %} {% include nav/main.html %}

2
docs/_layouts/home.html
View File

@ -5,7 +5,7 @@
{% include header.html %} {% include header.html %}
</head> </head>
<body class="bs-docs-home"> <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 --> <!-- Docs master nav -->
{% include nav/main.html %} {% include nav/main.html %}

20
docs/assets/css/src/docs.css
View File

@ -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 * Main navigation
* *