Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update "Nested headers" accessibility docs #10088

Closed
wants to merge 1 commit into from
Closed

Update "Nested headers" accessibility docs #10088

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions getting-started.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -733,8 +733,9 @@ <h3>Skip navigation</h3>
{% endhighlight %}

<h3>Nested headers</h3>
<p>Another "gotcha" has to do with how you nest your <code>&lt;header&gt;</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>&lt;h2&gt;</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>

<p>Another "gotcha" has to do with how you nest your header elements (the H1, H2, H3...H6 tags). <a href="http://squizlabs.github.io/HTML_CodeSniffer/Standards/Section508/">Section 508</a> states that your largest header must be an <code>&lt;h1&gt;</code> followed by an other <code>&lt;h1&gt;</code> or a subordinate heading element (h2 to h6). The structure of the headers should reflex the structure of your document. So the heading structure should be logically nested. Screen readers read this semantic heading structure to construct a table of contents. Screen readers don't use any formatted style. Visual readers use the formatted style in stead of the semantic structure. See also: <a href="http://accessibility.psu.edu/headings">http://accessibility.psu.edu/headings</a>.</p>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"reflex" typo

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"H1" etc. ought not to be capitalized, for consistency with the rest of the docs.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should use <code> around the heading tag references

<p>The hierachical default font size of Bootstrap's header elements helps you to make the semantic stucture consistent with the visual (formatted) style. Consider this when you change any default font size of Bootstrap by modifying your stylesheets.</p>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"hierachical" typo


<h3>Additional resources</h3>
<ul>
<li><a href="https://github.com/squizlabs/HTML_CodeSniffer">"HTML Codesniffer" bookmarklet for identifying accessibility issues</a></li>
Expand Down