WCAG upgrade: Create working example for: Scaffolding - Typography

common/scaffolding/index.json-ld

@@ -14,7 +14,7 @@
 		"en": "HTML elements used as is.",
 		"fr": "Les éléments HTML utilisé tel quel."
 	},
-	"modified": "2023-02-21",
+	"modified": "2023-08-24",
 	"componentName": "scaffolding",
 	"processing": "baseline",
 	"status": "stable",
@@ -29,6 +29,16 @@
 				"title": "Formulaires",
 				"language": "fr",
 				"path": "formulaires.html"
+			},
+			{
+				"title": "Typography",
+				"language": "en",
+				"path": "typography.html"
+			},
+			{
+				"title": "Typographie",
+				"language": "fr",
+				"path": "typographie.html"
 			}
 		]
 	}

common/scaffolding/typographie.html

@@ -0,0 +1,39 @@
+---
+{
+	"title": "Typographie",
+	"language": "fr",
+	"altLangPage": "typography.html",
+	"breadcrumbs": [
+		{ "title": "GCWeb home", "link": "https://wet-boew.github.io/GCWeb/index-en.html" }
+	],
+	"dateModified": "2023-08-24"
+}
+---
+
+<h1>Titres</h1>
+<h1>Il s'agit d'un élément de titre h1</h1>
+<h2>Il s'agit d'un élément de titre h2</h2>
+<h3>Il s'agit d'un élément de titre h3</h3>
+<h4>Il s'agit d'un élément de titre h4</h4>
+<h5>Il s'agit d'un élément de titre h5</h5>
+<h6>Il s'agit d'un élément de titre h6</h6>
+<pre><code>
+&lt;h1&gt;Il s'agit d'un élément de titre h1&lt;/h1&gt;
+&lt;h2&gt;Il s'agit d'un élément de titre h2&lt;/h2&gt;
+&lt;h3&gt;Il s'agit d'un élément de titre h3&lt;/h3&gt;
+&lt;h4&gt;Il s'agit d'un élément de titre h4&lt;/h4&gt;
+&lt;h5&gt;Il s'agit d'un élément de titre h5&lt;/h5&gt;
+&lt;h6&gt;Il s'agit d'un élément de titre h6&lt;/h6&gt;
+</code></pre>
+
+<h1>Paragraphe</h1>
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+<pre><code>
+&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
+</code></pre>
+
+<h1>Largeur de contenu limitée</h1>
+<p>Pour un exemple de contenu de largeur limitée, visitez le lien suivant: <a href="https://wet-boew.github.io/GCWeb/templates/content-limit-en.html">Page de contenu - Largeur de contenu limitée</a></p>
+
+<h1>Sémantique au niveau du texte</h1>
+<p>Pour un exemple de sémantique au niveau du texte qui présente les liens et regroupe les éléments associés, visitez le lien suivant: <a href="https://wet-boew.github.io/GCWeb/common/text-level-semantics/text-level-semantics.html">Sémantique au niveau du texte</a></p>

common/scaffolding/typography.html

@@ -0,0 +1,39 @@
+---
+{
+	"title": "Typography",
+	"language": "en",
+	"altLangPage": "typographie.html",
+	"breadcrumbs": [
+		{ "title": "GCWeb home", "link": "https://wet-boew.github.io/GCWeb/index-en.html" }
+	],
+	"dateModified": "2023-08-24"
+}
+---
+
+<h1>Headings</h1>
+<h1>This is an h1 heading element</h1>
+<h2>This is an h2 heading element</h2>
+<h3>This is an h3 heading element</h3>
+<h4>This is an h4 heading element</h4>
+<h5>This is an h5 heading element</h5>
+<h6>This is an h6 heading element</h6>
+<pre><code>
+&lt;h1&gt;This is an h1 heading element &lt;/h1&gt;
+&lt;h2&gt;This is an h2 heading element &lt;/h2&gt;
+&lt;h3&gt;This is an h3 heading element &lt;/h3&gt;
+&lt;h4&gt;This is an h4 heading element &lt;/h4&gt;
+&lt;h5&gt;This is an h5 heading element &lt;/h5&gt;
+&lt;h6&gt;This is an h6 heading element &lt;/h6&gt;
+</code></pre>
+
+<h1>Paragraph</h1>
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+<pre><code>
+&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
+</code></pre>
+
+<h1>Limited width content</h1>
+<p>For an example of content with limited width, visit the following link: <a href="https://wet-boew.github.io/GCWeb/templates/content-limit-en.html">Content page - Limited width content</a></p>
+
+<h1>Text level semantics</h1>
+<p>For an example of text-level semantics which showcases links and grouping related elements, visit the following link: <a href="https://wet-boew.github.io/GCWeb/common/text-level-semantics/text-level-semantics.html">Text level semantics</a></p>