-
Notifications
You must be signed in to change notification settings - Fork 130
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
wCAG-upgrade -- add an example for grouping
- Loading branch information
Showing
2 changed files
with
468 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,232 @@ | ||
| --- | ||
| { | ||
| "title": "Grouping Content - Scaffolding", | ||
| "language": "en", | ||
| "altLangPage": "grouping-fr.html", | ||
| "dateModified": "2023-06-28" | ||
| } | ||
| --- | ||
|
|
||
| <div class="alert alert-warning"> | ||
| <p>The purpose of this page is to test all native content grouping related elements, if they are aligned with our design and are compliant to our accessibility guideline when used as is without any special customization. The following include all content grouping elements in the HTML5 specification and a few examples was inspired by the <a href="https://html.spec.whatwg.org/multipage/grouping-content.html#grouping-content">WHATWG section 4.4</a> as August 2023. This page may not contain all the possible grouping content element combination.</p> | ||
| </div> | ||
|
|
||
| <h2>The <code>p</code> element</h2> | ||
| <p>This is some text in a paragraph.</p> | ||
| <pre><code><p> ... </p></code></pre> | ||
|
|
||
| <h2>The <code>hr</code> element</h2> | ||
| <hr> | ||
| <pre><code><hr></code></pre> | ||
|
|
||
| <h2>The <code>pre</code> element</h2> | ||
| <pre> Here is some pre formatted text </pre> | ||
| <pre><code><pre> ... </pre></code></pre> | ||
|
|
||
| <h2>The <code>blockquote</code> element</h2> | ||
| <blockquote> | ||
| <p>This is a blockquote example</p> | ||
| </blockquote> | ||
| <pre><code><blockquote> | ||
| <p> ... </p> | ||
| </blockquote></code></pre> | ||
|
|
||
| <h2>The <code>ol</code> element</h2> | ||
| <ol> | ||
| <li>Switzerland</li> | ||
| <li>United Kingdom</li> | ||
| <li>United States</li> | ||
| <li>Norway</li> | ||
| </ol> | ||
| <pre><code><ol> | ||
| <li>...</li> | ||
| <li>...</li> | ||
| <li>...</li> | ||
| </ol></code></pre> | ||
|
|
||
| <h2>The <code>ul</code> element</h2> | ||
| <ul> | ||
| <li>Norway</li> | ||
| <li>Switzerland</li> | ||
| <li>United Kingdom</li> | ||
| <li>United States</li> | ||
| </ul> | ||
| <pre><code><ul> | ||
| <li>...</li> | ||
| <li>...</li> | ||
| <li>...</li> | ||
| </ul></code></pre> | ||
|
|
||
| <h2>The <code>menu</code> element</h2> | ||
| <menu> | ||
| <li><button>Copy</button></li> | ||
| <li><button>Cut</button></li> | ||
| <li><button>Paste</button></li> | ||
| <li>List item</li> | ||
| <li><a href="#">Anchor</a></li> | ||
| </menu> | ||
| <pre><code><menu> | ||
| <li>...</li> | ||
| <li>...</li> | ||
| <li>...</li> | ||
| </menu></code></pre> | ||
|
|
||
| <h2 id="dl-element">The <code>dl</code> element</h2> | ||
| <dl> | ||
| <dt> Term 1 </dt> | ||
| <dd> Description 1 </dd> | ||
| <dt> Term 2</dt> | ||
| <dd> Description 2 </dd> | ||
| </dl> | ||
| <h3>With two consecutive description </h3> | ||
| <dl> | ||
| <dt> Authors </dt> | ||
| <dd> John </dd> | ||
| <dd> Luke </dd> | ||
| <dt> Editor </dt> | ||
| <dd> Frank </dd> | ||
| </dl> | ||
| <h3>With two consecutive term </h3> | ||
| <dl> | ||
| <dt lang="en-US"> color </dt> | ||
| <dt lang="en-GB"> colour </dt> | ||
| <dd> A sensation which (in humans) derives from the ability of | ||
| the fine structure of the eye to distinguish three differently | ||
| filtered analyses of a view. </dd> | ||
| </dl> | ||
| <h3>With grouping division <code><div></code></h3> | ||
| <dl> | ||
| <div> | ||
| <dt> Last modified time </dt> | ||
| <dd> 2004-12-23T23:33Z </dd> | ||
| </div> | ||
| <div> | ||
| <dt> Recommended update interval </dt> | ||
| <dd> 60s </dd> | ||
| </div> | ||
| <div> | ||
| <dt> Authors </dt> | ||
| <dt> Editors </dt> | ||
| <dd> Robert Rothman </dd> | ||
| <dd> Daniel Jackson </dd> | ||
| </div> | ||
| </dl> | ||
| <h3>As glossary with term definition <code><dfn></code></h3> | ||
| <dl> | ||
| <dt><dfn>Apartment</dfn>, n.</dt> | ||
| <dd>An execution context grouping one or more threads with one or | ||
| more COM objects.</dd> | ||
| <dt><dfn>Flat</dfn>, n.</dt> | ||
| <dd>A deflated tire.</dd> | ||
| <dt><dfn>Home</dfn>, n.</dt> | ||
| <dd>The user's login directory.</dd> | ||
| </dl> | ||
| <h2>The <code>dt</code> element</h2> | ||
| <p>Demoed with the following element: <a href="#dl-element"><code>dl</code></a></p> | ||
| <h2>The <code>dd</code> element</h2> | ||
| <p>Demoed with the following element: <a href="#dl-element"><code>dl</code></a></p> | ||
|
|
||
| <pre><code><p> Example 1 </p> | ||
| <dl> | ||
| <dt> .. </dt> | ||
| <dd> .. </dd> | ||
| <dd> .. </dd> | ||
| ... | ||
| </dl> | ||
|
|
||
|
|
||
| <p> Example 2 </p> | ||
| <dl> | ||
| <dt lang="en-US"> <dfn>color</dfn> </dt> | ||
| <dt lang="en-US"> <dfn>color</dfn> </dt> | ||
| <dd> ... </dd> | ||
| </dl> | ||
|
|
||
| <p> Example 3 </p> | ||
| <dl> | ||
| <div> | ||
| <dt> .. </dt> | ||
| <dd> .. </dd> | ||
| </div> | ||
| <div> | ||
| <dt> .. </dt> | ||
| <dd> .. </dd> | ||
| </div> | ||
| </dl> | ||
|
|
||
| <p> Example 4 </p> | ||
| <dl> | ||
| <dt> .. </dt> | ||
| <dd> .. </dd> | ||
| <dt> .. </dt> | ||
| <dd> .. </dd> | ||
| ... | ||
| </dl> | ||
|
|
||
| <p> Example 5 </p> | ||
| <dl> | ||
| <dt><dfn> .. </dfn> .. </dt> | ||
| <dd> .. </dd> | ||
| <dt><dfn> .. </dfn> .. </dt> | ||
| <dd> .. </dd> | ||
| ... | ||
| </dl></code></pre> | ||
|
|
||
| <h2>The <code>figure</code> element</h2> | ||
| <figure> | ||
| <p>'Twas brillig, and the slithy toves<br> | ||
| Did gyre and gimble in the wabe;<br> | ||
| All mimsy were the borogoves,<br> | ||
| And the mome raths outgrabe.</p> | ||
| <figcaption><cite>Jabberwocky</cite> (first verse). Lewis Carroll, 1832-98</figcaption> | ||
| </figure> | ||
| <figure> | ||
| <figcaption><cite>Jabberwocky</cite> (first verse). Lewis Carroll, 1832-98</figcaption> | ||
| <p>'Twas brillig, and the slithy toves<br> | ||
| Did gyre and gimble in the wabe;<br> | ||
| All mimsy were the borogoves,<br> | ||
| And the mome raths outgrabe.</p> | ||
| </figure> | ||
| <pre><code><figure> | ||
| <p>...<p> | ||
| <figcaption>...</figcaption> | ||
| </figure></code></pre> | ||
|
|
||
| <h2>The <code>search</code> element</h2> | ||
| <search> | ||
| <form action="search.php"> | ||
| <label for="query">Find an article</label> | ||
| <input id="query" name="q" type="search"> | ||
| <button type="submit">Go!</button> | ||
| </form> | ||
| </search> | ||
| <pre><code><search> <form> | ||
| ... | ||
| </form></search></code></pre> | ||
|
|
||
| <h2>The <code>div</code> element</h2> | ||
| <p> Multiple div's </p> | ||
| <div><div> | ||
| <div> | ||
| <h3>This is a heading in a div element</h3> | ||
| </div> | ||
| <div> | ||
| <p>This is some text in a div element.</p> | ||
| </div> | ||
| </div></div> | ||
|
|
||
| <p> Empty div </p> | ||
| <div></div> | ||
|
|
||
| <pre><code><p> Multiple div's </p> | ||
| <div><div> | ||
| <div> | ||
| <h3> ... </h3> | ||
| </div> | ||
| <div> | ||
| <p> ... </p> | ||
| </div> | ||
| </div></div> | ||
|
|
||
| <p> Empty div </p> | ||
| <div></div></code></pre> |
Oops, something went wrong.