Update ids

Author: ericwbailey

partials/section.about.hbs

@@ -1,10 +1,11 @@
-<aside id="section__about" aria-labelledby="title__about"><!-- Start of #section__about -->
-    <h2 id="title__about">About</h2>
-
+<!-- Start of #about -->
+<aside id="about" aria-labelledby="title-about">
+    <h2 id="title-about">About</h2>
     <p>
         Accessible, semantic markup patterns for HTML content. Uses the full <a rel="external noopener" href="http://html5doctor.com/element-index/"><cite>HTML5 Doctor Element Index</cite></a>, minus the <code translate="no">&lt;command&gt;</code> and <code translate="no">&lt;menu&gt;</code> tags.
     </p>
     <p>
         Reference <a rel="external noopener" href="http://alistairduggin.co.uk/">Alistair Duggin</a>'s <a rel="external noopener" href="http://aduggin.github.io/accessibility-fails/"><cite>Accessibility Fails</cite></a> for common markup pattern accessibility mistakes, and <a rel="external noopener" href="http://pauljadam.com/">Paul J. Adam</a>'s <a rel="external noopener" href="http://pauljadam.com/demos/landmarks.html"><cite>WAI-ARIA Landmarks Site Navigation Structure Demo</cite></a> for semantic, accessible page landmarks.
     </p>
-</aside><!-- End of #section__about -->
+</aside>
+<!-- End of #about -->

partials/section.embedded.hbs

@@ -1,43 +1,51 @@
-<section id="section__embedded" aria-labelledby="title__embedded"><!-- Start of #section__embedded -->
-    <h2 id="title__embedded">Embedded</h2>
+<!-- Start of #section-embedded -->
+<section id="section-embedded" aria-labelledby="title-embedded">
+    <h2 id="title-embedded">Embedded</h2>
 
-    <h3 id="subsection__image">Image</h3><!-- Start of #subsection__image -->
+    <!-- Start of #subsection-image -->
+    <h3 id="subsection-image">Image</h3>
     <img
         src="http://placehold.it/600x400?text=Image+Example"
-        alt="Image Exmaple" /><!-- End of #subsection__image -->
+        alt="Image Exmaple" />
+    <!-- End of #subsection-image -->
 
-    <h3 id="subsection__broken-image">Broken Image</h3><!-- Start of #subsection__broken-image -->
+    <!-- Start of #subsection-broken-image -->
+    <h3 id="subsection-broken-image">Broken Image</h3>
     <img
         src="nope"
-        alt="Broken Image" /><!-- End of #subsection__broken-image -->
+        alt="Broken Image" />
+    <!-- End of #subsection-broken-image -->
 
-    <h3 id="subsection__figure-with-caption">Figure with Caption</h3><!-- Start of #subsection__figure-with-caption -->
+    <!-- Start of #subsection-figure-with-caption -->
+    <h3 id="subsection-figure-with-caption">Figure with Caption</h3>
     <figure>
         <img
             src="http://placehold.it/400x250?text=Figure+Example"
             alt="Figure Example" />
         <figcaption>
             An example figure caption.
         </figcaption>
-    </figure><!-- End of #subsection__figure-with-caption -->
+    </figure>
+    <!-- End of #subsection-figure-with-caption -->
 
-    <h3 id="subsection__inline-svg">Inline SVG</h3><!-- Start of #subsection__inline-svg -->
+    <!-- Start of #subsection-inline-svg -->
+    <h3 id="subsection-inline-svg">Inline SVG</h3>
     <figure>
         <svg
-            aria-labelledby="svg__title svg__description"
+            aria-labelledby="svg-title svg-description"
             role="img"
             height="162"
             width="168"
             viewBox="0 0 28 27"
             xmlns="http://www.w3.org/2000/svg">
-            <title id="svg__title">A crab</title>
-            <!--[if !IE]> --><desc id="svg__description">A solid black illustration of a crab.</desc><!-- <![endif]-->
+            <title id="svg-title">A crab</title>
+            <!--[if !IE]> --><desc id="svg-description">A solid black illustration of a crab.</desc><!-- <![endif]-->
             <path fill="#000000" d="M28.044,16.791 C26.087,18.748 23.728,18.633 22.257,18.285 C22.405,17.861 22.53,17.441 22.632,17.033 C22.798,17.043 22.961,17.058 23.139,17.058 C25.093,17.058 27.603,16.308 28.96,12.913 C29.075,12.626 28.935,12.3 28.647,12.186 C28.362,12.071 28.034,12.209 27.919,12.497 C26.723,15.487 24.497,16.018 22.852,15.946 C22.905,15.626 22.946,15.317 22.968,15.032 C23.967,14.782 29.374,11.151 28.999,5.999 C28.773,2.892 25.811,-0.282 22.245,0.753 C22.561,0.915 25.731,2.304 24.933,6.958 C24.933,6.958 21.65,5.677 21.27,2.999 C21.27,2.999 18.375,6.958 24.19,11.329 C24.19,11.329 22.142,13.261 19.046,11.12 C18.826,10.911 18.598,10.718 18.36,10.54 L18.36,9 L17.24,9 L17.24,9.869 C16.538,9.541 15.786,10.08 15,10.08 C14.214,10.08 13.462,9.541 12.761,9.869 L12.761,9 L11.641,9 L11.641,10.541 C11.402,10.719 11.173,10.912 10.953,11.121 C7.858,13.262 5.81,11.33 5.81,11.33 C11.624,6.959 8.729,3 8.729,3 C8.349,5.678 5.067,6.959 5.067,6.959 C4.267,2.305 7.437,0.916 7.753,0.754 C4.187,-0.281 1.226,2.893 0.999,6 C0.624,11.152 6.031,14.783 7.03,15.033 C7.053,15.318 7.094,15.627 7.146,15.947 C5.501,16.019 3.275,15.488 2.079,12.498 C1.965,12.211 1.637,12.072 1.351,12.187 C1.064,12.3 0.924,12.626 1.038,12.914 C2.395,16.309 4.906,17.059 6.859,17.059 C7.037,17.059 7.2,17.043 7.366,17.034 C7.468,17.442 7.594,17.862 7.741,18.286 C6.27,18.634 3.911,18.749 1.954,16.792 C1.735,16.573 1.381,16.573 1.162,16.792 C0.943,17.011 0.943,17.364 1.162,17.583 C2.721,19.142 4.511,19.587 6.043,19.587 C6.845,19.587 7.561,19.462 8.151,19.316 C8.233,19.5 8.317,19.681 8.409,19.861 C6.471,20.74 4.358,22.316 4.358,25.029 C4.358,25.338 4.609,25.588 4.917,25.588 C5.227,25.588 5.478,25.338 5.478,25.029 C5.478,22.9 7.272,21.609 8.938,20.863 C9.049,21.045 9.182,21.213 9.332,21.369 C9.434,21.506 9.543,21.639 9.652,21.769 C8.879,22.156 8.108,22.73 7.851,23.576 C7.572,24.502 7.958,25.502 9.001,26.545 C9.11,26.654 9.254,26.709 9.397,26.709 C9.541,26.709 9.683,26.654 9.793,26.545 C10.012,26.326 10.012,25.971 9.793,25.752 C9.064,25.023 8.772,24.4 8.923,23.902 C9.09,23.345 9.783,22.918 10.465,22.629 C11.622,23.666 13.111,24.356 14.997,24.356 C16.883,24.356 18.372,23.667 19.53,22.629 C20.212,22.918 20.904,23.346 21.071,23.902 C21.222,24.4 20.929,25.023 20.201,25.752 C19.982,25.971 19.982,26.326 20.201,26.545 C20.31,26.654 20.454,26.709 20.596,26.709 C20.74,26.709 20.883,26.654 20.992,26.545 C22.036,25.502 22.423,24.502 22.142,23.576 C21.885,22.73 21.114,22.156 20.341,21.769 C20.45,21.638 20.56,21.505 20.661,21.369 C20.81,21.213 20.944,21.045 21.055,20.863 C22.722,21.609 24.515,22.9 24.515,25.029 C24.515,25.338 24.766,25.588 25.076,25.588 C25.386,25.588 25.636,25.338 25.636,25.029 C25.636,22.316 23.523,20.74 21.585,19.861 C21.677,19.681 21.762,19.5 21.843,19.316 C22.434,19.462 23.15,19.587 23.951,19.587 C25.484,19.587 27.273,19.142 28.832,17.583 C29.051,17.364 29.051,17.011 28.832,16.792 C28.617,16.572 28.263,16.572 28.044,16.791 Z" transform="translate(-1)" opacity=".9"/>
         </svg>
         <figcaption>
             <a rel="external noopener" href="https://thenounproject.com/search/?q=crab&i=583446">Crab by Hea Poh Lin</a> from the Noun Project
         </figcaption>
-    </figure><!-- End of #subsection__inline-svg -->
+    </figure>
 
     <h3>Notes:</h3>
     <ul>
@@ -51,8 +59,10 @@
             <small>Add whitespace around the <code translate="no">use</code> element in a <abbr>SVG</abbr> icon system to <a rel="external noopener" href="http://simplyaccessible.com/article/7-solutions-svgs/#acc-heading-5">prevent a focus bug with Safari 10</a>.</small>
         </li>
     </ul>
+    <!-- End of #subsection-inline-svg -->
 
-    <h3 id="subsection__picture">Picture</h3><!-- Start of #subsection__picture -->
+    <!-- Start of #subsection-picture -->
+    <h3 id="subsection-picture">Picture</h3>
     <picture>
         <source
             media="(min-width: 40em)"
@@ -64,25 +74,31 @@
         <img
             src="http://placehold.it/600x400?text=Img+Fallback"
             alt="Picture Element" />
-    </picture><!-- End of #subsection__picture -->
+    </picture>
+    <!-- End of #subsection-picture -->
 
-    <h3 id="subsection__image-with-srcset-and-sizes">Image with Srcset and Sizes</h3><!-- Start of #subsection__image-with-srcset-and-sizes -->
+    <!-- Start of #subsection-image-with-srcset-and-sizes -->
+    <h3 id="subsection-image-with-srcset-and-sizes">Image with Srcset and Sizes</h3>
     <img
         srcset="http://placehold.it/1024x768/7ED321/ffffff/?text=Large 1024w,
                 http://placehold.it/1024x768/F5A623/ffffff/?text=Medium 640w,
                 http://placehold.it/320x240/50E3C2/ffffff/?text=Small 320w"
         sizes="(min-width: 36em) 50vw, 100vw"
         src="http://placehold.it/600x400?text=Img+Fallback"
-        alt="Image with Srcset and Sizes Example" /><!-- End of #subsection__image-with-srcset-and-sizes -->
+        alt="Image with Srcset and Sizes Example" />
+    <!-- End of #subsection-image-with-srcset-and-sizes -->
 
-    <h3 id="subsection__iframe">Iframe</h3><!-- Start of #subsection__iframe -->
+    <!-- Start of #subsection-iframe -->
+    <h3 id="subsection-iframe">Iframe</h3>
     <iframe
         src="about:blank"
         title="about:blank"
-        name="iframe"><!-- End of #subsection__iframe -->
+        name="iframe">
     </iframe>
+    <!-- End of #subsection-iframe -->
 
-    <h3 id="subsection__audio">Audio</h3><!-- Start of #subsection__audio -->
+    <!-- Start of #subsection-audio -->
+    <h3 id="subsection-audio">Audio</h3>
     <audio controls>
         <source
             src="http://www.noiseaddicts.com/samples_1w72b820/4353.mp3"
@@ -100,9 +116,11 @@
             kind="captions" />
         Your browser does not support the <code translate="no">&lt;audio&gt;</code> element.
         Please <a rel="external noopener" href="http://browsehappy.com/">consider upgrading your browser</a> or <a download href="http://www.noiseaddicts.com/samples_1w72b820/4353.mp3">download a file</a> for offline listening.
-    </audio><!-- End of #subsection__audio -->
+    </audio>
+    <!-- End of #subsection-audio -->
 
-    <h3 id="subsection__video">Video</h3><!-- Start of #subsection__video -->
+    <!-- Start of #subsection-video -->
+    <h3 id="subsection-video">Video</h3>
     <video
         controls
         poster="http://placehold.it/854x480?text=Video+Poster">
@@ -122,14 +140,16 @@
             kind="captions" />
         Your browser does not support the <code translate="no">&lt;video&gt;</code> element.
         Please <a rel="external noopener" href="http://browsehappy.com/">consider upgrading your browser</a> or <a download href="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4">download a file</a> for offline viewing.
-    </video><!-- End of #subsection__video -->
+    </video>
 
     <h3>Notes:</h3>
     <p>
         <small>Accessibility errors concerning the video's missing audio description should go away once the <code translate="no">&lt;track&gt;</code>'s source is linked to a valid caption file.</small>
     </p>
+    <!-- End of #subsection-video -->
 
-    <h3 id="subsection__object">Object</h3><!-- Start of #subsection__object -->
+    <!-- Start of #subsection-object -->
+    <h3 id="subsection-object">Object</h3>
     <object>
         <param
             name="movie"
@@ -153,19 +173,23 @@
         </embed>
         Your browser does not support the <code translate="no">&lt;object&gt;</code> element.
         Please <a rel="external noopener" href="http://browsehappy.com/">consider upgrading your browser</a> or <a rel="external noopener" href="https://www.youtube.com/watch?v=pDHzK3Xe7Yw">view the video on YouTube</a>.
-    </object><!-- End of #subsection__object -->
+    </object>
+    <!-- End of #subsection-object -->
 
-    <h3 id="subsection__canvas">Canvas</h3><!-- Start of #subsection__canvas -->
+    <!-- Start of #subsection-canvas -->
+    <h3 id="subsection-canvas">Canvas</h3>
     <canvas
         id="myCanvas"
         width="400"
         height="400">
         Your browser does not support the <code translate="no">&lt;canvas&gt;</code> element.
         Please <a rel="external noopener" href="http://browsehappy.com/">consider upgrading your browser</a>.
-    </canvas
+    </canvas>
 
     <h3>Notes:</h3>
     <p>
         <small>Add <code translate="no">role="presentation"</code> to <code translate="no">&lt;track&gt;</code> to <a rel="external noopener" href="https://twitter.com/stevefaulkner/status/1039470607719694336">mute epeated announcement of graphic role by some screen readers</a>.
-    </p>><!-- End of #subsection__canvas -->
-</section><!-- End of #section__embedded -->
+    </p>
+    <!-- End of #subsection-canvas -->
+</section>
+<!-- End of #section-embedded -->

partials/section.footer.hbs

@@ -1,7 +1,8 @@
-<footer id="section__credit" aria-labelledby="title__credit" role="contentinfo"><!-- Start of #section__credit -->
-    <h2 id="title__credit">Credit</h2>
-
+<!-- Start of #section-credit -->
+<footer id="section-credit" aria-labelledby="title-credit" role="contentinfo">
+    <h2 id="title-credit">Credit</h2>
     <p>
         Inspired by <a rel="external noopener" href="http://mrmrs.cc/">Adam Morse</a>'s <a rel="external noopener" href="https://github.com/mrmrs/html"><cite>mrmrs/html</cite></a>.
     </p>
-</footer><!-- End of #section__credit -->
+</footer>
+<!-- End of #section-credit -->