diff --git a/getting-started.html b/getting-started.html index 434832f5005b76adce4a5495b6c8f7750072a163..f90b18f02ee31de490a0e84afb004f756570a3e6 100644 --- a/getting-started.html +++ b/getting-started.html @@ -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>