From e4a2c35b84b71082d46c21876bd34f39fff1d81d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 27 Aug 2013 08:19:51 -0700 Subject: [PATCH] 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 --- getting-started.html | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/getting-started.html b/getting-started.html index 434832f500..f90b18f02e 100644 --- a/getting-started.html +++ b/getting-started.html @@ -740,8 +740,9 @@ img { max-width: none; } {% endhighlight %} -

Nested headers

-

Another "gotcha" has to do with how you nest your <header> elements. Section 508 states that your largest header must be an h1, and the next header must be an <h2>, 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.

+

Nested headings

+

When nesting headings (<h1> - <h6>), your primary document header should be an <h1>. Subsequent headings should make logical use of <h2> - <h6> such that screen readers can construct a table of contents for your pages.

+

Learn more at HTML CodeSniffer and Penn State's AccessAbility.

Additional resources