Add grouping section (#27)

* Add note about `hgroup`

* Add grouping section

* Link to Grouping in the ToC

* Minor version bump

* Rebuild docs

Author: ericwbailey

docs/index.html

@@ -28,6 +28,7 @@ <h2 id="title-table-of-contents">Table of Contents</h2>
 
   <ol>
     <li><a href="#section-about">About</a></li>
+    <li><a href="#section-grouping">Grouping</a></li>
     <li><a href="#section-headings">Headings</a></li>
     <li><a href="#section-text-level">Text-level</a>
       <ol>
@@ -146,6 +147,7 @@ <h2 id="notes-headings">Notes:</h2>
   <ul>
     <li><small>Ensure that headings create a logical order. Apply <abbr="Cascading Style Sheets">CSS</abbr> classes to control visual presentation (e.g. <code translate="no">&lt;h2 class=&quot;type-size-medium color-blue-dark&quot;&gt;Our services&lt;/h2&gt;</code> ).</small></li>
     <li><small><code translate="no">role="doc-subtitle"</code> is used to alternate title for the work, but still has limited support.</small></li>
+    <li><small>Use of <code translate="no">&lt;hgroup&gt;</code></small> is considered an antipattern, as it has <a rel="external noopener" href="https://www.tpgi.com/subheadings-subtitles-alternative-titles-and-taglines-in-html/">low to no, or unpredictable support with assistive technology</a>.</li>
   </ul>
 </section><!-- End of #section-headings -->
 

package.json

@@ -2,7 +2,7 @@
   "name": "accessible-html-content-patterns",
   "description": "A collection of the full HTML5 Doctor Element Index as well as common markup patterns for quick reference.",
   "homepage": "https://github.com/ericwbailey/accessible-html-content-patterns",
-  "version": "2.0.10",
+  "version": "2.1.0",
   "license": "MIT",
   "author": "Eric Bailey <[email protected]> (http://ericwbailey.website/)",
   "contributors": [

partials/section.grouping.hbs

@@ -0,0 +1,64 @@
+<!-- Start of #section-grouping -->
+<section id="section-grouping" aria-labelledby="title-grouping">
+  <h2 id="title-grouping">Grouping</h2>
+
+  <address aria-labelledby="subsection-address">
+    <h3 id="subsection-address">Address</h3>
+    <p><cite>Represents the contact information for its enclosing section. If it is a child of the body element, then it applies to the document as a whole.</cite></p>
+    <p><a rel="external noopener" href="https://html5doctor.com/the-address-element/">HTML5 Doctor prognosis of <code translate="no">&lt;address&gt;</code></a>.</p>
+  </address>
+
+  <article aria-labelledby="subsection-article">
+    <h3 id="subsection-article">Article</h3>
+    <p><cite>Represents a section of a page that consists of a composition that forms an independent part of a document, page, or site.</cite></p>
+    <p><a rel="external noopener" href="https://html5doctor.com/the-article-element/">HTML5 Doctor prognosis of <code translate="no">&lt;article&gt;</code></a>.</p>
+  </article>
+
+  <aside aria-labelledby="subsection-aside">
+    <h3 id="subsection-aside">Aside</h3>
+    <p><cite>Represents a section of a page consisting of content that is tangentially related to the content around the <code translate="no">&lt;aside&gt;</code> element, and which could be considered separate from that content.</cite></p>
+    <p><a rel="external noopener" href="https://html5doctor.com/aside-revisited/">HTML5 Doctor prognosis of <code translate="no">&lt;aside&gt;</code></a>.</p>
+  </aside>
+
+  <footer aria-labelledby="subsection-footer">
+    <h3 id="subsection-footer">Footer</h3>
+    <p><cite>Represents the &ldquo;footer&rdquo; of a document or section of a document. The footer element typically contains metadata about its enclosing section, such as who wrote it, links to related documents, copyright data, etc.</cite></p>
+    <p><a rel="external noopener" href="https://html5doctor.com/the-footer-element-update/">HTML5 Doctor prognosis of <code translate="no">&lt;footer&gt;</code></a>.</p>
+  </footer>
+
+  <form aria-labelledby="subsection-form">
+    <h3 id="subsection-form">Form</h3>
+    <p><cite>The &ldquo;form&rdquo; element represents a collection of form-associated elements, some of which can represent editable values that can be submitted to a server for processing.</cite></p>
+  </form>
+
+  <header aria-labelledby="subsection-header">
+    <h3 id="subsection-header">Header</h3>
+    <p><cite>Represents the &ldquo;header&rdquo; of a document or section of a document. The header element is typically used to group a set of <code translate="no">h1</code>–<code translate="no">h6</code> elements to mark up a page's title with its subtitle or tagline.</cite></p>
+    <p><a rel="external noopener" href="https://html5doctor.com/the-header-element/">HTML5 Doctor prognosis of <code translate="no">&lt;header&gt;</code></a>.</p>
+  </header>
+
+  <nav aria-labelledby="subsection-nav">
+    <h3 id="subsection-nav">Nav</h3>
+    <p><cite>Represents navigation for a document. The <code translate="no">&lt;nav&gt;</code> element is a section containing links to other documents or to parts within the current document.</cite></p>
+    <p><a rel="external noopener" href="https://html5doctor.com/nav-element/">HTML5 Doctor prognosis of <code translate="no">&lt;nav&gt;</code></a>.</p>
+  </nav>
+
+  <search aria-labelledby="subsection-search">
+    <h3 id="subsection-search">Search</h3>
+    <p><cite>A region that contains a collection of items and objects that, as a whole, combine to create a search facility.</cite></p>
+  </search>
+
+  <section aria-labelledby="subsection-section">
+    <h3 id="subsection-section">Section</h3>
+    <p><cite>Represents a generic document or application section.</cite></p>
+    <p><a rel="external noopener" href="https://html5doctor.com/the-section-element/">HTML5 Doctor prognosis of <code translate="no">&lt;section&gt;</code></a>.</p>
+  </section>
+
+  <h2 id="notes-sections">Notes:</h2>
+  <ul>
+    <li><small><code translate="no">&lt;body&gt;</code> is intentionally left out, as it can only be declared once per document.</small></li>
+    <li><small><code translate="no">&lt;main&gt;</code> is also intentionally left out, as <a rel="external noopener" href="https://adrianroselli.com/2015/09/use-only-one-main-on-a-page.html">best practice is to only declare it once per document</a>.</small></li>
+    <li><small><code translate="no">aria-label</code> and <code translate="no">aria-labelledby</code> can be used to disambiguate landmarks when more than one is present. You may not need to do this <a rel="external noopener" href="https://adrianroselli.com/2024/06/maybe-dont-name-that-landmark.html">if only one landmark is present</a>.</small></li>
+    <li><small><code translate="no">&lt;search&gt;</code>’s use may <a rel="external noopener" href="https://www.scottohara.me/blog/2023/03/24/search-element.html">require testing for support</a>.</small></li>
+  </ul>
+</section><!-- End of #section-grouping -->

partials/section.headings.hbs

@@ -45,5 +45,6 @@
   <ul>
     <li><small>Ensure that headings create a logical order. Apply <abbr="Cascading Style Sheets">CSS</abbr> classes to control visual presentation (e.g. <code translate="no">&lt;h2 class=&quot;type-size-medium color-blue-dark&quot;&gt;Our services&lt;/h2&gt;</code> ).</small></li>
     <li><small><code translate="no">role="doc-subtitle"</code> is used to alternate title for the work, but still has limited support.</small></li>
+    <li><small>Use of <code translate="no">&lt;hgroup&gt;</code></small> is considered an antipattern, as it has <a rel="external noopener" href="https://www.tpgi.com/subheadings-subtitles-alternative-titles-and-taglines-in-html/">low to no, or unpredictable support with assistive technology</a>.</li>
   </ul>
 </section><!-- End of #section-headings -->

partials/section.table-of-contents.hbs

@@ -5,6 +5,7 @@
 
   <ol>
     <li><a href="#section-about">About</a></li>
+    <li><a href="#section-grouping">Grouping</a></li>
     <li><a href="#section-headings">Headings</a></li>
     <li><a href="#section-text-level">Text-level</a>
       <ol>