diff options
| author | Mark Otto <[email protected]> | 2013-08-07 00:28:23 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2013-08-07 00:28:23 -0700 |
| commit | fef413f9970c6985d4f11c08056d991bd3ed3e31 (patch) | |
| tree | 5d1720b8174775607a58981b8fea77ba0b2c32b6 | |
| parent | a8d95d4721e714a7e1d683e14e997faa5ccddaff (diff) | |
| download | bootstrap-fef413f9970c6985d4f11c08056d991bd3ed3e31.tar.xz bootstrap-fef413f9970c6985d4f11c08056d991bd3ed3e31.zip | |
copy changes
| -rw-r--r-- | getting-started.html | 14 |
1 files changed, 6 insertions, 8 deletions
diff --git a/getting-started.html b/getting-started.html index fc03a7ac4..3bd6c0272 100644 --- a/getting-started.html +++ b/getting-started.html @@ -212,24 +212,23 @@ img { max-width: none; } <div class="page-header"> <h1 id="accessibility">Accessibility</h1> </div> - <p class="lead">Bootstrap follows common web standards, and with minimal extra effort, can be used to create sites that are accessibile to users using assistive technology (AT). However, it's useful to take the following into consideration:</p> - - <p>If your navigation contains many links and comes before your main content in the DOM, add a <code>Skip to content</code> link immediately after your opening <code>body</code> tag. <a href="http://a11yproject.com/posts/skip-nav-links/">(read why)</a></p> + <p class="lead">Bootstrap follows common web standards, and with minimal extra effort, can be used to create sites that are accessibile 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 content</code> link immediately after your opening <code><body></code> tag. <a href="http://a11yproject.com/posts/skip-nav-links/">(read why)</a></p> {% highlight html %} <body> <a href="#content" class="sr-only">Skip to content</a> - ... <div class="container" id="content"> The main page content. </div> - ... </body> {% endhighlight %} - <p>Another "gotcha" has to do with how you nest your <code>header</code> elements. <a href="http://squizlabs.github.io/HTML_CodeSniffer/Standards/Section508/">Section 508</a> states that your largest header must be an <code>h1</code>, and the next header must be an <code>h2</code>, etc. This is hard to achieve in practice, but if the largest header on your site is smaller than Bootstrap's default 38px, you should consider modifying your stylesheets before using a smaller header element.</p> + <h3>Nested headers</h3> + <p>Another "gotcha" has to do with how you nest your <code><header></code> elements. <a href="http://squizlabs.github.io/HTML_CodeSniffer/Standards/Section508/">Section 508</a> states that your largest header must be an <code>h1</code>, and the next header must be an <code><h2></code>, etc. This is hard to achieve in practice, but if the largest header on your site is smaller than Bootstrap's default 38px, you should consider modifying your stylesheets before using a smaller header element.</p> - <h4>Resources</h4> + <h3>Additional resources</h3> <ul> <li><a href="https://github.com/squizlabs/HTML_CodeSniffer">"HTML Codesniffer" bookmarklet for identifying accessibility issues</a></li> <li><a href="http://a11yproject.com/">The A11Y Project</a></li> @@ -239,7 +238,6 @@ img { max-width: none; } - <!-- License FAQs ================================================== --> <div class="bs-docs-section"> |