WCAG-upgrade -- add an example for grouping #2182

shiva-sc · 2023-07-03T11:47:43Z

Will close the following duplicates

duboisp

Move/add this example with the scaffolding common component. The folder: "/common/scaffolding/"

common/grouping/grouping-en.html

duboisp · 2023-08-18T19:46:57Z

common/grouping/grouping-en.html

+<header>
+	<h1><a href="/">My fancy blog</a></h1>
+	...
+	<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>
+</header>


Adjust the example to be more focus on the search element and to avoid issue with multiple h1 and header that are not explicitly in a sectioning element.

Suggested change

<header>

<h1><a href="/">My fancy blog</a></h1>

...

<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>

</header>

<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>

duboisp · 2023-08-18T19:49:14Z

common/grouping/grouping-en.html

+<div>
+	<h3>This is a heading in a div element</h3>
+	<p>This is some text in a div element.</p>
+</div>
+<pre><code>&lt;div&gt;


Because we do use a lot of div every where, please add the following 2 example:

Multiple div's

<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>

Empty div

<div></div>

@duboisp In the first example there are two div's at the start

Does it need to only one 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>

Let's keep an example with multiple <div> to show and to ensure that wrapping <div> are always transparent. For example AEM do wrap component with one or more div.

duboisp · 2023-08-18T19:50:24Z

common/grouping/grouping-fr.html

@@ -0,0 +1,256 @@
+---
+{
+	"title": "Grouping Content - Scaffolding",


Suggested change

"title": "Grouping Content - Scaffolding",

"title": "Contenu de groupement - Échafaudage",

duboisp · 2023-08-18T19:50:41Z

common/grouping/grouping-fr.html

+	"language": "fr",
+	"altLangPage": "grouping-en.html",
+	"breadcrumbs": [
+		{ "title": "GCWeb home", "link": "https://wet-boew.github.io/GCWeb/index-en.html" }


Suggested change

{ "title": "GCWeb home", "link": "https://wet-boew.github.io/GCWeb/index-en.html" }

{ "title": "GCWeb accueil", "link": "https://wet-boew.github.io/GCWeb/index-fr.html" }

duboisp · 2023-08-18T19:51:24Z

common/grouping/grouping-fr.html

+
+<div lang="en">
+	<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/forms.html#forms">WHATWG section 4.4</a> as February 2023. This page may not contain all the possible grouping content element combination.</p>


You can see the translation in this page: https://wet-boew.github.io/GCWeb/common/scaffolding/formulaires.html

duboisp · 2023-08-30T21:07:33Z

common/grouping/grouping-en.html

+<pre><code>
+&lt;pre>&lt;code>&lt;p> ... &lt;/p>&lt;/code>&lt;/pre>
+</code></pre>


The is no <code> element

Suggested change

<pre><code>

<pre><code><p> ... </p></code></pre>

</code></pre>

<pre><code><pre> ... </pre></code></pre>

Remove the new line \n at line 28 because it do create an empty space when rendered

duboisp · 2023-08-30T21:36:56Z

common/grouping/grouping-en.html

+<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>


Let's add a few sub-heading to add some clarity,

Currently when rendered it is a little bit confusing

I propose:

Suggested change

<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>

<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>

Which will look like this:

duboisp · 2023-08-30T21:37:45Z

common/grouping/grouping-en.html

+
+<h2>The <code>figure</code> element</h2>
+<figure>
+	<img src="pic_trulli.jpg" alt="Trulli" style="width:100%">


We should avoid inline style and we should link to a real image

Please remove the "style" attribute

Please change the img source + alt text for an existing image that are hosted in our Github

Suggested change

<img src="pic_trulli.jpg" alt="Trulli" style="width:100%">

<img src="pic_trulli.jpg" alt="Trulli">

@duboisp : Can you please give an example for existing image source?

duboisp · 2023-08-30T23:50:50Z

common/grouping/grouping-en.html

+<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>


Add an example where the figcaption is the first child element

Like:

Suggested change

<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>

<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>

duboisp

Forgot to mention this scaffolding example need to be moved along with other scaffolding in the folder "common/scaffolding" and you can simply update the index.json-ld along with the new pages

duboisp

(Incomplete check)

Need to add a reference at those 2 example in the existing index.json-ld file in the scaffolding folder.

shiva-sc · 2023-09-21T03:01:43Z

@duboisp Pushed my changes

cc: @jonasg-gc

shiva-sc had a problem deploying to github-ci July 3, 2023 11:47 — with GitHub Actions Failure

shiva-sc force-pushed the grouping branch from 044d0c8 to 8e92cc8 Compare July 3, 2023 12:33

shiva-sc had a problem deploying to github-ci July 3, 2023 12:33 — with GitHub Actions Failure

shiva-sc force-pushed the grouping branch from 8e92cc8 to 24b1e73 Compare July 3, 2023 23:24

shiva-sc temporarily deployed to github-ci July 3, 2023 23:24 — with GitHub Actions Inactive

duboisp requested changes Aug 18, 2023

View reviewed changes

shiva-sc force-pushed the grouping branch from 24b1e73 to 6abf38d Compare August 28, 2023 15:23

shiva-sc had a problem deploying to github-ci August 28, 2023 15:24 — with GitHub Actions Failure

shiva-sc force-pushed the grouping branch from 6abf38d to 7cdc555 Compare August 29, 2023 21:06

shiva-sc had a problem deploying to github-ci August 29, 2023 21:06 — with GitHub Actions Failure

shiva-sc force-pushed the grouping branch from 7cdc555 to a2c7e3e Compare August 30, 2023 15:06

shiva-sc temporarily deployed to github-ci August 30, 2023 15:06 — with GitHub Actions Inactive

duboisp requested changes Aug 30, 2023

View reviewed changes

duboisp requested changes Aug 31, 2023

View reviewed changes

shiva-sc force-pushed the grouping branch from a2c7e3e to 190b44f Compare September 13, 2023 19:01

shiva-sc temporarily deployed to github-ci September 13, 2023 19:02 — with GitHub Actions Inactive

shiva-sc force-pushed the grouping branch from 190b44f to ba8c782 Compare September 13, 2023 19:27

shiva-sc temporarily deployed to github-ci September 13, 2023 19:27 — with GitHub Actions Inactive

duboisp requested changes Sep 21, 2023

View reviewed changes

duboisp added the Query: Project item Part of a github project label Sep 21, 2023

wCAG-upgrade -- add an example for grouping

f2570ea

shiva-sc force-pushed the grouping branch from ba8c782 to f2570ea Compare September 21, 2023 02:54

shiva-sc temporarily deployed to github-ci September 21, 2023 02:54 — with GitHub Actions Inactive

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

WCAG-upgrade -- add an example for grouping #2182

WCAG-upgrade -- add an example for grouping #2182

shiva-sc commented Jul 3, 2023 •

edited by duboisp

Loading

duboisp left a comment

duboisp Aug 18, 2023

duboisp Aug 18, 2023

shiva-sc Aug 28, 2023

duboisp Aug 30, 2023

duboisp Aug 18, 2023

duboisp Aug 18, 2023

duboisp Aug 18, 2023

duboisp Aug 30, 2023

duboisp Aug 30, 2023

duboisp Aug 30, 2023

shiva-sc Sep 13, 2023

duboisp Aug 30, 2023

duboisp left a comment

duboisp left a comment

shiva-sc commented Sep 21, 2023

	"title": "Grouping Content - Scaffolding",
	"title": "Contenu de groupement - Échafaudage",

	{ "title": "GCWeb home", "link": "https://wet-boew.github.io/GCWeb/index-en.html" }
	{ "title": "GCWeb accueil", "link": "https://wet-boew.github.io/GCWeb/index-fr.html" }

	<img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
	<img src="pic_trulli.jpg" alt="Trulli">

WCAG-upgrade -- add an example for grouping #2182

Are you sure you want to change the base?

WCAG-upgrade -- add an example for grouping #2182

Conversation

shiva-sc commented Jul 3, 2023 • edited by duboisp Loading

duboisp left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

duboisp left a comment

Choose a reason for hiding this comment

duboisp left a comment

Choose a reason for hiding this comment

shiva-sc commented Sep 21, 2023

shiva-sc commented Jul 3, 2023 •

edited by duboisp

Loading