Skip to content

Commit 53f1c71

Browse files
committed
Updated headers to use only one <h1> per document
https://twitter.com/stevefaulkner/status/738028349445025793
1 parent 8cbdf83 commit 53f1c71

File tree

1 file changed

+27
-24
lines changed

1 file changed

+27
-24
lines changed

index.html

Lines changed: 27 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,13 @@
1212
</head>
1313

1414
<body>
15+
16+
<h1>Accessible HTML Content Patterns</h1>
17+
1518
<main role="main">
1619

1720
<nav id="section__table-of-contents" role="navigation" aria-labelledby="title__table-of-contents"><!-- Start of #section__table-of-contents -->
18-
<h1 id="title__table-of-contents">Table of Contents</h1>
21+
<h2 id="title__table-of-contents">Table of Contents</h2>
1922
<ul>
2023
<li><a href="#section__about">About</a></li>
2124
<li><a href="#section__headings">Headings</a></li>
@@ -62,7 +65,7 @@ <h1 id="title__table-of-contents">Table of Contents</h1>
6265
<hr />
6366

6467
<aside id="section__about" role="complementary" aria-labelledby="title__about"><!-- Start of #section__about -->
65-
<h1 id="title__about">About</h1>
68+
<h2 id="title__about">About</h2>
6669

6770
<p>
6871
Accessible, semantic markup patterns for HTML content. Uses the full <a rel="external" href="http://html5doctor.com/element-index/"><cite>HTML5 Doctor Element Index</cite></a>, minus the <code>&lt;details&gt;</code>, <code>&lt;summary&gt;</code>, <code>&lt;command&gt;</code>, and <code>&lt;menu&gt;</code> tags.
@@ -75,7 +78,7 @@ <h1 id="title__about">About</h1>
7578
<hr />
7679

7780
<section id="section__headings" role="region" aria-labelledby="title__headings"><!-- Start of #section__headings -->
78-
<h1 id="title__headings">Headings</h1>
81+
<h2 id="title__headings">Headings</h2>
7982

8083
<h1>First Header h1</h1>
8184
<p>
@@ -106,10 +109,10 @@ <h6>Sixth header h6</h6>
106109
<hr />
107110

108111
<section id="section__text-level" role="region" aria-labelledby="title__text-level"><!-- Start of #section__text-level -->
109-
<h1 id="title__text-level">Text-level</h1>
112+
<h2 id="title__text-level">Text-level</h2>
110113

111114
<div id="subsection__content" role="region" aria-labelledby="subtitle__content"><!-- Start of #subsection__content -->
112-
<h2 id="subtitle__content">Content</h2>
115+
<h3 id="subtitle__content">Content</h3>
113116
<p>
114117
And he <em>looked</em> over at <strong>the alarm clock</strong>, ticking on the <i>chest</i> of <b>drawers</b>. "God in <u>Heaven</u>!" he <s>thought</s>. It was <small>half past six</small> and the <abbr>hands</abbr> were <q>quietly moving forwards</q>, it was even later <cite>than half past</cite>, more <dfn>like quarter to seven</dfn>. Had the <sub>alarm</sub> clock not <sup>rung</sup>? He <time>could</time> see from the <code>bed that it had been set</code> for four <kbd>o'clock</kbd> as it <samp>should</samp> have <var>been</var>; it <mark>certainly</mark> must have rung.
115118
</p>
@@ -126,7 +129,7 @@ <h2 id="subtitle__content">Content</h2>
126129
</p>
127130
</div><!-- End of #subsection__content -->
128131
<div id="subsection__links" role="region" aria-labelledby="subtitle__links"><!-- Start of #subsection__links -->
129-
<h2 id="subtitle__links">Links</h2>
132+
<h3 id="subtitle__links">Links</h3>
130133
<p>
131134
And even if he did catch the <a href="#">train</a> he would not avoid his boss's anger as the <a href="#" rel="external">office assistant</a> would have been there to see the five o'clock train go, he would have put in his report about <a href="https://twitter.com/twitter" rel="external">Gregor</a>'s not being there a long time ago. The office assistant was the boss's man, spineless, and with no understanding. What about if he reported sick? But that would be <a href="#">extremely strained and suspicious as in fifteen years of service Gregor had never once yet been ill</a>. His boss would certainly come round with the doctor from the medical insurance company, accuse his parents of having a lazy son, and accept the doctor's recommendation not to make any claim as the doctor believed that no-one was ever ill but that many were workshy. And what's more, would he have been entirely wrong in this case? Gregor did in fact, apart from excessive sleepiness after sleeping for so long, feel completely well and even felt much hungrier than usual.
132135
</p>
@@ -138,7 +141,7 @@ <h2>Block-level link title</h2>
138141
</a>
139142
</div><!-- End of #subsection__links -->
140143
<div id="subsection__lists" role="region" aria-labelledby="subtitle__lists"><!-- Start of #subsection__lists -->
141-
<h2 id="subtitle__lists">Lists</h2>
144+
<h3 id="subtitle__lists">Lists</h3>
142145
<h3>Unordered List</h3>
143146
<ul>
144147
<li>Apple</li>
@@ -219,7 +222,7 @@ <h3>Definition List</h3>
219222
</dl>
220223
</div><!-- End of #subsection__lists -->
221224
<div id="subsection__code" role="region" aria-labelledby="subtitle__code"><!-- Start of #subsection__code -->
222-
<h2 id="subtitle__code">Code</h2>
225+
<h3 id="subtitle__code">Code</h3>
223226
<code>
224227
<pre>
225228
sudo ipfw pipe 1 config bw 256KByte/s
@@ -245,7 +248,7 @@ <h2 id="subtitle__code">Code</h2>
245248
</samp>
246249
</div><!-- End of #subsection__code -->
247250
<div id="subsection__symbols" role="region" aria-labelledby="subtitle__symbols"><!-- Start of #subsection__symbols -->
248-
<h2 id="subtitle__symbols">Symbols</h2>
251+
<h3 id="subtitle__symbols">Symbols</h3>
249252
<ul>
250253
<li><span aria-label="Plus">+</span></li>
251254
<li><span aria-label="Minus"></span></li>
@@ -269,7 +272,7 @@ <h2 id="subtitle__symbols">Symbols</h2>
269272
<hr />
270273

271274
<section id="section__tables" role="region" aria-labelledby="title__tables"><!-- Start of #section__tables -->
272-
<h1 id="title__tables">Tables</h1>
275+
<h2 id="title__tables">Tables</h2>
273276

274277
<table>
275278
<caption>
@@ -367,7 +370,7 @@ <h1 id="title__tables">Tables</h1>
367370
<hr />
368371

369372
<section id="section__embedded" role="region" aria-labelledby="title__embedded"><!-- Start of #section__embedded -->
370-
<h1 id="title__embedded">Embedded</h1>
373+
<h2 id="title__embedded">Embedded</h2>
371374

372375
<h2 id="subsection__image">Image</h2><!-- Start of #subsection__image -->
373376
<img
@@ -504,11 +507,11 @@ <h2 id="subsection__canvas">Canvas</h2><!-- Start of #subsection__canvas -->
504507
<hr />
505508

506509
<section id="section__forms" role="region" aria-labelledby="title__forms"><!-- Start of #section__forms -->
507-
<h1 id="title__forms">Forms</h1>
510+
<h2 id="title__forms">Forms</h2>
508511

509512
<form>
510513
<fieldset id="subsection__text-input" role="region" aria-labelledby="subtitle__text-input"><!-- Start of #subsection__text-input -->
511-
<legend id="subtitle__text-input" role="heading" aria-level="2">Text Input</legend>
514+
<legend id="subtitle__text-input" role="heading" aria-level="3">Text Input</legend>
512515

513516
<label for="input__text">
514517
Text
@@ -659,7 +662,7 @@ <h1 id="title__forms">Forms</h1>
659662
</fieldset><!-- End of #subsection__text-input -->
660663

661664
<fieldset id="subsection__non-text-input" role="region" aria-labelledby="subtitle__non-text-input"><!-- Start of #subsection__non-text-input -->
662-
<legend id="subtitle__non-text-input" role="heading" aria-level="2">Non-text Input</legend>
665+
<legend id="subtitle__non-text-input" role="heading" aria-level="3">Non-text Input</legend>
663666

664667
<label for="input__color">
665668
Color
@@ -688,7 +691,7 @@ <h1 id="title__forms">Forms</h1>
688691
</fieldset><!-- End of #subsection__non-text-input -->
689692

690693
<fieldset id="subsection__select" role="region" aria-labelledby="subtitle__select"><!-- Start of #subsection__select -->
691-
<legend id="subtitle__select" role="heading" aria-level="2">Select</legend>
694+
<legend id="subtitle__select" role="heading" aria-level="3">Select</legend>
692695

693696
<label for="input__select">
694697
Select
@@ -740,7 +743,7 @@ <h1 id="title__forms">Forms</h1>
740743
</fieldset><!-- End of #subsection__select -->
741744

742745
<fieldset id="subsection__checkboxes-and-radios" role="region" aria-labelledby="subtitle__checkboxes-and-radio-buttons"><!-- Start of #subsection__checkboxes-and-radios -->
743-
<legend id="subtitle__checkboxes-and-radio-buttons" role="heading" aria-level="2">Checkboxes and Radio Buttons</legend>
746+
<legend id="subtitle__checkboxes-and-radio-buttons" role="heading" aria-level="3">Checkboxes and Radio Buttons</legend>
744747

745748
<label for="input__checkbox">
746749
<input
@@ -862,7 +865,7 @@ <h1 id="title__forms">Forms</h1>
862865
</fieldset><!-- End of #subsection__checkboxes-and-radios -->
863866

864867
<fieldset id="subsection__buttons" role="region" aria-labelledby="subtitle__buttons"><!-- Start of #subsection__buttons -->
865-
<legend id="subtitle__buttons" role="heading" aria-level="2">Buttons</legend>
868+
<legend id="subtitle__buttons" role="heading" aria-level="3">Buttons</legend>
866869

867870
<button>
868871
Button
@@ -899,7 +902,7 @@ <h1 id="title__forms">Forms</h1>
899902
</fieldset><!-- End of #subsection__buttons -->
900903

901904
<fieldset id="subsection__output" role="region" aria-labelledby="subtitle__output"><!-- Start of #subsection__output -->
902-
<legend id="subtitle__output" role="heading" aria-level="2">Output</legend>
905+
<legend id="subtitle__output" role="heading" aria-level="3">Output</legend>
903906

904907
<output
905908
for="output"
@@ -922,7 +925,7 @@ <h1 id="title__forms">Forms</h1>
922925
</fieldset><!-- End of #subsection__output -->
923926

924927
<fieldset id="subsection__lockup" role="region" aria-labelledby="subtitle__lockup"><!-- Start of #subsection__lockup -->
925-
<legend id="subtitle__lockup" role="heading" aria-level="2">Lockup</legend>
928+
<legend id="subtitle__lockup" role="heading" aria-level="3">Lockup</legend>
926929

927930
<label for="input__lockup">
928931
Your Name
@@ -945,9 +948,9 @@ <h1 id="title__forms">Forms</h1>
945948
</fieldset><!-- End of #subsection__lockup -->
946949

947950
<fieldset id="subsection__states-and-validation" role="region" aria-labelledby="subtitle__states-and-validation"><!-- Start of #subsection__states-and-validation -->
948-
<legend id="subtitle__states-and-validation" role="heading" aria-level="2">States and Validation</legend>
951+
<legend id="subtitle__states-and-validation" role="heading" aria-level="3">States and Validation</legend>
949952
<div id="subsection__input" role="region" aria-labelledby="subtitle__input"><!-- Start of #subsection__input -->
950-
<h3 id="subtitle__input">Input</h3>
953+
<h4 id="subtitle__input">Input</h4>
951954
<label for="input__required">
952955
Required
953956
<input
@@ -1051,7 +1054,7 @@ <h3 id="subtitle__input">Input</h3>
10511054
</div><!-- End of #subsection__input -->
10521055

10531056
<div id="subsection__buttons" role="region" aria-labelledby="subtitle__buttons"><!-- Start of #subsection__buttons -->
1054-
<h3 id="subtitle__buttons">Buttons</h3>
1057+
<h4 id="subtitle__buttons">Buttons</h4>
10551058
<button
10561059
disabled>
10571060
Disabled
@@ -1069,7 +1072,7 @@ <h3 id="subtitle__buttons">Buttons</h3>
10691072
</fieldset><!-- End of #subsection__states-and-validation -->
10701073

10711074
<fieldset role="region" aria-labelledby="subtitle__autocomplete" id="subsection__autocomplete"><!-- Start of #subsection__autocomplete -->
1072-
<legend id="subtitle__autocomplete" role="heading" aria-level="2">Autocomplete</legend>
1075+
<legend id="subtitle__autocomplete" role="heading" aria-level="3">Autocomplete</legend>
10731076

10741077
<label for="input__autocomplete-on">
10751078
On (Browser automatically completes)
@@ -1486,7 +1489,7 @@ <h3 id="subtitle__buttons">Buttons</h3>
14861489
<hr />
14871490

14881491
<footer id="section__credit" role="contentinfo" aria-labelledby="title__forms"><!-- Start of #section__credit -->
1489-
<h1 id="title__credit">Credit</h1>
1492+
<h2 id="title__credit">Credit</h2>
14901493

14911494
<p>
14921495
Inspired by <a rel="external" href="http://mrmrs.cc/">Adam Morse</a>'s <a rel="external" href="https://github.com/mrmrs/html"><cite>mrmrs/html</cite></a>.

0 commit comments

Comments
 (0)