From f2570ea35273e654865a111aa638f41a736ca33b Mon Sep 17 00:00:00 2001 From: shiva-sc Date: Mon, 3 Jul 2023 07:46:59 -0400 Subject: [PATCH] wCAG-upgrade -- add an example for grouping --- common/scaffolding/grouping-en.html | 232 +++++++++++++++++++++++++++ common/scaffolding/grouping-fr.html | 236 ++++++++++++++++++++++++++++ common/scaffolding/index.json-ld | 10 ++ 3 files changed, 478 insertions(+) create mode 100644 common/scaffolding/grouping-en.html create mode 100644 common/scaffolding/grouping-fr.html diff --git a/common/scaffolding/grouping-en.html b/common/scaffolding/grouping-en.html new file mode 100644 index 000000000..c3dcacd41 --- /dev/null +++ b/common/scaffolding/grouping-en.html @@ -0,0 +1,232 @@ +--- +{ + "title": "Grouping Content - Scaffolding", + "language": "en", + "altLangPage": "grouping-fr.html", + "dateModified": "2023-06-28" +} +--- + +
+

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 WHATWG section 4.4 as August 2023. This page may not contain all the possible grouping content element combination.

+
+ +

The p element

+

This is some text in a paragraph.

+
<p> ... </p>
+ +

The hr element

+
+
<hr>
+ +

The pre element

+
 Here is some pre formatted text
+
<pre> ... </pre>
+ +

The blockquote element

+
+

This is a blockquote example

+
+
<blockquote>
+<p> ... </p>
+</blockquote>
+ +

The ol element

+
    +
  1. Switzerland
    2. +
  2. United Kingdom
    3. +
  3. United States
    4. +
  4. Norway
    5. +
+
<ol>
+	<li>...</li>
+	<li>...</li>
+	<li>...</li>
+</ol>
+ +

The ul element

+ +
<ul>
+	<li>...</li>
+	<li>...</li>
+	<li>...</li>
+</ul>
+ +

The menu element

+ +
    • +
    • +
    • +
  • List item
    • +
  • Anchor
    • +     +
    <menu>
+	<li>...</li>
+	<li>...</li>
+	<li>...</li>
+</menu>
    + +

    The dl element

    +
    +
    Term 1
    +
    Description 1
    +
    Term 2
    +
    Description 2
    +
    +

    With two consecutive description

    +
    +
    Authors
    +
    John
    +
    Luke
    +
    Editor
    +
    Frank
    +
    +

    With two consecutive term

    +
    +
    color
    +
    colour
    +
    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.
    +
    +

    With grouping division <div>

    +
    +
    +
    Last modified time
    +
    2004-12-23T23:33Z
    +
    +
    +
    Recommended update interval
    +
    60s
    +
    +
    +
    Authors
    +
    Editors
    +
    Robert Rothman
    +
    Daniel Jackson
    +
    +
    +

    As glossary with term definition <dfn>

    +
    +
    Apartment, n.
    +
    An execution context grouping one or more threads with one or + more COM objects.
    +
    Flat, n.
    +
    A deflated tire.
    +
    Home, n.
    +
    The user's login directory.
    +
    +

    The dt element

    +

    Demoed with the following element: dl

    +

    The dd element

    +

    Demoed with the following element: dl

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

    The figure element

    +
    +

    'Twas brillig, and the slithy toves
    + Did gyre and gimble in the wabe;
    + All mimsy were the borogoves,
    + And the mome raths outgrabe.

    +
    Jabberwocky (first verse). Lewis Carroll, 1832-98
    +
    +
    +
    Jabberwocky (first verse). Lewis Carroll, 1832-98
    +

    'Twas brillig, and the slithy toves
    + Did gyre and gimble in the wabe;
    + All mimsy were the borogoves,
    + And the mome raths outgrabe.

    +
    +
    <figure>
+	<p>...<p>
+	<figcaption>...</figcaption>
+</figure>
    + +

    The search element

    + +
    + + + +
    +     +
    <search> <form>
+...
+</form></search>
    + +

    The div element

    +

    Multiple div's

    +
    +
    +

    This is a heading in a div element

    +
    +
    +

    This is some text in a div element.

    +
    +
    + +

    Empty div

    +
    + +
    <p> Multiple div's </p>
+<div><div>
+<div>
+	<h3> ... </h3>
+</div>
+<div>
+	<p> ... </p>
+</div>
+</div></div>
+
+<p> Empty div </p>
+<div></div>
    diff --git a/common/scaffolding/grouping-fr.html b/common/scaffolding/grouping-fr.html new file mode 100644 index 000000000..3d11b04ea --- /dev/null +++ b/common/scaffolding/grouping-fr.html @@ -0,0 +1,236 @@ +--- +{ + "title": "Contenu de groupement - Échafaudage", + "language": "fr", + "altLangPage": "grouping-en.html", + "dateModified": "2023-06-28" +} +--- + +
    +

    Le but de cette page est de tester tous les éléments liés au regroupement de contenu natif, s'ils sont alignés avec notre conception et sont conformes à nos directives d'accessibilité lorsqu'ils sont utilisés tels quels sans aucune personnalisation particulière. Ce qui suit inclut tous les éléments de regroupement de contenu dans la spécification HTML5 et quelques exemples ont été inspirés par le WHATWG section 4.4 comme août 2023. Cette page peut ne pas contenir toutes les combinaisons possibles d'éléments de contenu de regroupement.

    +
    + +

    L'élément P

    +

    Ceci est du texte dans un paragraphe.

    +
    <p> ... </p>
    + +

    L'élément P hr

    +
    +
    <hr>
    + +

    L'élément pre

    +
     Voici du texte préformaté
    +
    <pre> ... </pre>
    + +

    L'élément blockquote

    +
    +

    Ceci est un exemple de citation en bloc

    +
    +
    <blockquote>
+<p> ... </p>
+</blockquote>
    + +

    L'élément ol

    +
      +
    1. Switzerland
      2. +
    2. United Kingdom
      3. +
    3. United States
      4. +
    4. Norway
      5. +
    +
    <ol>
+	<li>...</li>
+	<li>...</li>
+	<li>...</li>
+</ol>
    + +

    L'élément ul

    + +
    <ul>
+	<li>...</li>
+	<li>...</li>
+	<li>...</li>
+</ul>
    + +

    L'élément menu

    + +
    • +
    • +
    • +
  • Élément de liste
    • +
  • Ancre
    • +     +
    <menu>
+	<li>...</li>
+	<li>...</li>
+	<li>...</li>
+</menu>
    + +

    L'élément dl

    +
    +
    Terme 1
    +
    la description 1
    +
    Terme 2
    +
    la description 2
    +
    +

    Avec deux descriptions consécutives

    +
    +
    Auteurs
    +
    Jean
    +
    Luc
    +
    Editeur
    +
    Franck
    +
    +

    Avec deux mandats consécutifs

    +
    +
    couleur
    +
    couleur
    +
    Une sensation qui (chez les humains) dérive de la capacité de + la structure fine de l'œil pour en distinguer trois différemment + analyses filtrées d’une vue.
    +
    +

    Avec division de regroupement <div>

    +
    +
    +
    Heure de la dernière modification
    +
    2004-12-23T23:33Z
    +
    +
    +
    Intervalle de mise à jour recommandé
    +
    années 60
    +
    +
    +
    Auteurs
    +
    Editeurs
    +
    Robert Rothman
    +
    Daniel Jackson
    +
    +
    +

    Comme glossaire avec définition du terme <dfn>

    +
    +
    Appartement, n.
    +
    Un contexte d'exécution regroupant un ou plusieurs threads avec un ou + plus d'objets COM.
    +
    Plat, n.
    +
    Un pneu dégonflé.
    +
    Accueil, n.
    +
    Le répertoire de connexion de l'utilisateur.
    +
    +

    L'élément dt

    +

    Démonstration avec l'élément suivant : dl

    +

    L'élément dd

    +

    Démonstration avec l'élément suivant : dl

    + +
    <p> l' exemple 1 </p>
+<dl>
+	<dt> .. </dt>
+	<dd> .. </dd>
+	<dd> .. </dd>
+	...
+</dl>
+
+
+<p> l' exemple 2 </p>
+<dl>
+	<dt lang="en-US"> <dfn>color</dfn> </dt>
+	<dt lang="en-US"> <dfn>color</dfn> </dt>
+	<dd> ... </dd>
+</dl>
+
+<p> l' exemple 3 </p>
+<dl>
+	<div>
+		<dt> .. </dt>
+		<dd> .. </dd>
+	</div>
+	<div>
+		<dt> .. </dt>
+		<dd> .. </dd>
+	</div>
+</dl>
+
+<p> l' exemple 4 </p>
+<dl>
+	<dt> .. </dt>
+	<dd> .. </dd>
+	<dt> .. </dt>
+	<dd> .. </dd>
+	...
+</dl>
+
+<p> l' exemple 5 </p>
+<dl>
+	<dt><dfn> .. </dfn> .. </dt>
+	<dd> .. </dd>
+	<dt><dfn> .. </dfn> .. </dt>
+	<dd> .. </dd>
+	...
+</dl>
    + +

    L'élément figure

    +
    + Trulli +
    Fig.1 - Trulli, Puglia, Italy.
    +
    +
    +

    'C'était génial, et les toves glissants
    + J'ai tourné et gimble dans le wabe ;
    + Tous les mimsy étaient les borogoves,
    + Et la maman est plutôt dépassée.

    +
    Jabberwocky (premier couplet). Lewis Carroll, 1832-98
    +
    +
    +
    Jabberwocky (premier couplet). Lewis Carroll, 1832-98
    +

    'C'était génial, et les toves glissants
    + J'ai tourné et gimble dans le wabe ;
    + Tous les mimsy étaient les borogoves,
    + Et la maman est plutôt dépassée.

    +
    +
    <figure>
+	<p>...<p>
+	<figcaption>...</figcaption>
+</figure>
    + +

    L'élément search

    + +
    + + + +
    +     +
    <search> <form>
+...
+</form></search>
    + +

    L'élément div

    +

    Plusieurs div

    +
    +
    +

    Ceci est un titre dans un élément div

    +
    +
    +

    Ceci est du texte dans un élément div.

    +
    +
    + +

    Div vide

    +
    + +
    <p> Plusieurs div </p>
+<div><div>
+<div>
+	<h3> ... </h3>
+</div>
+<div>
+	<p> ... </p>
+</div>
+</div></div>
+
+<p> Div vide </p>
+<div></div>
    diff --git a/common/scaffolding/index.json-ld b/common/scaffolding/index.json-ld index 252c2f768..cde24f1a6 100644 --- a/common/scaffolding/index.json-ld +++ b/common/scaffolding/index.json-ld @@ -29,6 +29,16 @@ "title": "Formulaires", "language": "fr", "path": "formulaires.html" + }, + { + "title": "Grouping Content - Scaffolding", + "language": "en", + "path": "grouping-en.html" + }, + { + "title": "Contenu de groupement - Échafaudage", + "language": "fr", + "path": "grouping-fr.html" } ] }