mirror of
https://github.com/twbs/bootstrap.git
synced 2022-11-09 12:25:43 -05:00
Fixes #10088: Simpler nested headings section in accessibility docs
* Headings, not headers * Simplifies content compared to #10088 which adds quite a lot * Uses proper heading elements (`h1` - `h6`) and not `header` * Collects links at bottom instead of mid-paragraph
This commit is contained in:
parent
4b68858f90
commit
e4a2c35b84
1 changed files with 3 additions and 2 deletions
|
@ -740,8 +740,9 @@ img { max-width: none; }
|
|||
</body>
|
||||
{% endhighlight %}
|
||||
|
||||
<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>
|
||||
<h3>Nested headings</h3>
|
||||
<p>When nesting headings (<code><h1></code> - <code><h6></code>), your primary document header should be an <code><h1></code>. Subsequent headings should make logical use of <code><h2></code> - <code><h6></code> such that screen readers can construct a table of contents for your pages.</p>
|
||||
<p>Learn more at <a href="http://squizlabs.github.io/HTML_CodeSniffer/Standards/Section508/">HTML CodeSniffer</a> and <a href="http://accessibility.psu.edu/headings">Penn State's AccessAbility</a>.</p>
|
||||
|
||||
<h3>Additional resources</h3>
|
||||
<ul>
|
||||
|
|
Loading…
Reference in a new issue