bkardell · February 28, 2018 01:09
diff --git a/example.html b/example.html
 <!doctype html>
 <html lang=en>
 <meta charset=utf-8>
 <script src=polyfill.js async></script>
 <title>Heading levels</title>
 <body>
  <section>
    <h1>One</h1>
    <section>
      <h1>Two</h1>
      <section>
        <h1>Three</h1>
        <section>
          <h1>Four</h1>
        </section>
      </section>
    </section>
  </section>

  <article heading-policy="flat">

    <!-- this is content included from a simple 'flat' editor like markdown with # headings  -->
    <h1>Apple varieties</h1>
    <p>The apple is the pomaceous fruit of the apple tree...</p>

      <h2>Red Delicious</h2>
      <p>These bright red apples are the most common found in many supermarkets...</p>

      <h2>Granny Smith</h2>
      <p>These juicy, green apples make a great filling for apple pies...</p>


     <!-- 
        Because I set the heading-policy="flat" it looks at what the implied level of article is
         and instead of just dealing with h1s, it just adjusts all headings by that level, 
         the result is effectively this

          <h1 role="heading" aria-level="2">Apple varieties</h1>
          <p>The apple is the pomaceous fruit of the apple tree...</p>

          <h2 role="heading" aria-level="3">Red Delicious</h2>
          <p>These bright red apples are the most common found in many supermarkets...</p>

          <h2 role="heading" aria-level="3">Granny Smith</h2>
          <p>These juicy, green apples make a great filling for apple pies...</p>
    -->
  </article>

  </section>
 </body>
 </html>
	<!doctype html>
	<html lang=en>
	<meta charset=utf-8>
	<script src=polyfill.js async></script>
	<title>Heading levels</title>
	<body>
	<section>
	<h1>One</h1>
	<section>
	<h1>Two</h1>
	<section>
	<h1>Three</h1>
	<section>
	<h1>Four</h1>
	</section>
	</section>
	</section>
	</section>

	<article heading-policy="flat">

	<!-- this is content included from a simple 'flat' editor like markdown with # headings -->
	<h1>Apple varieties</h1>
	<p>The apple is the pomaceous fruit of the apple tree...</p>

	<h2>Red Delicious</h2>
	<p>These bright red apples are the most common found in many supermarkets...</p>

	<h2>Granny Smith</h2>
	<p>These juicy, green apples make a great filling for apple pies...</p>


	<!--
	Because I set the heading-policy="flat" it looks at what the implied level of article is
	and instead of just dealing with h1s, it just adjusts all headings by that level,
	the result is effectively this

	<h1 role="heading" aria-level="2">Apple varieties</h1>
	<p>The apple is the pomaceous fruit of the apple tree...</p>

	<h2 role="heading" aria-level="3">Red Delicious</h2>
	<p>These bright red apples are the most common found in many supermarkets...</p>

	<h2 role="heading" aria-level="3">Granny Smith</h2>
	<p>These juicy, green apples make a great filling for apple pies...</p>
	-->
	</article>

	</section>
	</body>
	</html>