Skip to content

Commit

Permalink
wCAG-upgrade -- add an example for grouping
Browse files Browse the repository at this point in the history
  • Loading branch information
@shiva-sc
shiva-sc committed Aug 29, 2023
1 parent 36468cf commit 7cdc555
Show file tree
Hide file tree
Showing 3 changed files with 520 additions and 0 deletions.
243 changes: 243 additions & 0 deletions common/grouping/grouping-en.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,243 @@
---
{
"title": "Grouping Content - Scaffolding",
"language": "en",
"altLangPage": "grouping-fr.html",
"breadcrumbs": [
{ "title": "GCWeb home", "link": "https://wet-boew.github.io/GCWeb/index-en.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>&lt;p> ... &lt;/p></code></pre>

<h2>The <code>hr</code> element</h2>
<hr>
<pre><code>&lt;hr></code></pre>


<h2>The <code>pre</code> element</h2>
<pre> Here is some pre formatted text </pre>
<pre><code>
&lt;pre>&lt;code>&lt;p> ... &lt;/p>&lt;/code>&lt;/pre>
</code></pre>

<h2>The <code>blockquote</code> element</h2>
<blockquote>
<p>This is a blockquote example</p>
</blockquote>
<pre><code>&lt;blockquote&gt;
&lt;p&gt; ... &lt;/p&gt;
&lt;/blockquote&gt;</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>&lt;ol&gt;
&lt;li&gt;...&lt;/li&gt;
&lt;li&gt;...&lt;/li&gt;
&lt;li&gt;...&lt;/li&gt;
&lt;/ol&gt;</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>&lt;ul&gt;
&lt;li&gt;...&lt;/li&gt;
&lt;li&gt;...&lt;/li&gt;
&lt;li&gt;...&lt;/li&gt;
&lt;/ul&gt;</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>&lt;menu&gt;
&lt;li&gt;...&lt;/li&gt;
&lt;li&gt;...&lt;/li&gt;
&lt;li&gt;...&lt;/li&gt;
&lt;/menu&gt;</code></pre>

<h2>The <code>dl</code> element</h2>
<p> In the following example, one entry ("Authors") is linked to two values ("John" and "Luke"). </p>
<dl>
<dt> Authors </dt>
<dd> John </dd>
<dd> Luke </dd>
<dt> Editor </dt>
<dd> Frank </dd>
</dl>

<p> In the following example, one definition is linked to two terms. </p>
<dl>
<dt lang="en-US"> <dfn>color</dfn> </dt>
<dt lang="en-GB"> <dfn>colour</dfn> </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>

<p> The following example illustrates the use of the dl element to mark up metadata of sorts. At the end of the example, one group has two metadata labels ("Authors" and "Editors") and two values ("Robert Rothman" and "Daniel Jackson"). This example also uses the div element around the groups of dt and dd element, to aid with styling. </p>
<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>

<p> The following example shows the dl element used to give a set of instructions. The order of the instructions here is important (in the other examples, the order of the blocks was not important). </p>
<p>Determine the victory points as follows (use the
first matching case):</p>
<dl>
<dt> If you have exactly five gold coins </dt>
<dd> You get five victory points </dd>
<dt> If you have one or more gold coins, and you have one or more silver coins </dt>
<dd> You get two victory points </dd>
<dt> If you have one or more silver coins </dt>
<dd> You get one victory point </dd>
<dt> Otherwise </dt>
<dd> You get no victory points </dd>
</dl>

<p> The following snippet shows a dl element being used as a glossary. Note the use of dfn to indicate the word being defined. </p>
<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>


<pre><code>&lt;p&gt; Example 1 &lt;/p&gt;
&lt;dl&gt;
&lt;dt&gt; .. &lt;/dt&gt;
&lt;dd&gt; .. &lt;/dd&gt;
&lt;dd&gt; .. &lt;/dd&gt;
...
&lt;/dl&gt;


&lt;p&gt; Example 2 &lt;/p&gt;
&lt;dl&gt;
&lt;dt lang="en-US"&gt; &lt;dfn&gt;color&lt;/dfn&gt; &lt;/dt&gt;
&lt;dt lang="en-US"&gt; &lt;dfn&gt;color&lt;/dfn&gt; &lt;/dt&gt;
&lt;dd&gt; ... &lt;/dd&gt;
&lt;/dl&gt;

&lt;p&gt; Example 3 &lt;/p&gt;
&lt;dl&gt;
&lt;div&gt;
&lt;dt&gt; .. &lt;/dt&gt;
&lt;dd&gt; .. &lt;/dd&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;dt&gt; .. &lt;/dt&gt;
&lt;dd&gt; .. &lt;/dd&gt;
&lt;/div&gt;
&lt;/dl&gt;

&lt;p&gt; Example 4 &lt;/p&gt;
&lt;dl&gt;
&lt;dt&gt; .. &lt;/dt&gt;
&lt;dd&gt; .. &lt;/dd&gt;
&lt;dt&gt; .. &lt;/dt&gt;
&lt;dd&gt; .. &lt;/dd&gt;
...
&lt;/dl&gt;

&lt;p&gt; Example 5 &lt;/p&gt;
&lt;dl&gt;
&lt;dt&gt;&lt;dfn&gt; .. &lt;/dfn&gt; .. &lt;/dt&gt;
&lt;dd&gt; .. &lt;/dd&gt;
&lt;dt&gt;&lt;dfn&gt; .. &lt;/dfn&gt; .. &lt;/dt&gt;
&lt;dd&gt; .. &lt;/dd&gt;
...
&lt;/dl&gt;</code></pre>

<h2>The <code>figure</code> element</h2>
<figure>
<img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
<figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>
<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>
<pre><code>&lt;figure&gt;
&lt;p&gt;...&lt;p&gt;
&lt;figcaption&gt;...&lt;/figcaption&gt;
&lt;/figure&gt;</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>&lt;search&gt; &lt;form&gt;
...
&lt;/form&gt;&lt;/search&gt;</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>&lt;p&gt; Multiple div's &lt;/p&gt;
&lt;div&gt;&lt;div&gt;
&lt;div&gt;
&lt;h3&gt; ... &lt;/h3&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;p&gt; ... &lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;/div&gt;

&lt;p&gt; Empty div &lt;/p&gt;
&lt;div&gt;&lt;/div&gt;</code></pre>
Loading

0 comments on commit 7cdc555

Please sign in to comment.