ultra11y 4.4.0 → 4.5.0

package/scripts/ultra11y.mjs

@@ -6,7 +6,7 @@ import { join as join50, relative as relative5, resolve as resolve15, sep as sep
 import { fileURLToPath as fileURLToPath5, pathToFileURL as pathToFileURL3 } from "url";
 
 // src/types.ts
-var VERSION = "4.4.0";
+var VERSION = "4.5.0";
 var SCHEMA_VERSION = 2;
 
 // src/audit.ts
@@ -2289,7 +2289,7 @@ var wcag_universe_default = {
   wcagVersion: "2.2",
   source: "https://www.w3.org/TR/WCAG22/",
   criteriaSource: "https://github.com/w3c/wcag",
-  provenance: "Full WCAG 2.x SC universe (all levels incl. AAA, and the removed 4.1.1 Parsing) fetched from raw.githubusercontent.com/w3c/wcag@main on 2026-08-14 via `node scripts/build-standards.mjs --refresh-universe`. Classification: core-AA = ships in src/data/wcag.json (the shipped WCAG 2.2 AA core); out-of-core = WCAG AAA; removed = obsolete (4.1.1).",
+  provenance: "Full WCAG 2.x SC universe (all levels incl. AAA, and the removed 4.1.1 Parsing) fetched from raw.githubusercontent.com/w3c/wcag@main on 2026-08-17 via `node scripts/build-standards.mjs --refresh-universe`. Classification: core-AA = ships in src/data/wcag.json (the shipped WCAG 2.2 AA core); out-of-core = WCAG AAA; removed = obsolete (4.1.1).",
   criteria: [
     {
       id: "1.1.1",
@@ -50335,268 +50335,1398 @@ var rgaa_default2 = {
 var wcag_default2 = {
   pack: "wcag",
   source: "https://www.w3.org/WAI/WCAG22/Understanding/",
-  license: "W3C Document License",
-  attribution: "Derived from the W3C Understanding WCAG 2.2 documents. WCAG 2.2 \xA9 W3C. Short derived summaries and minimal illustrative examples only, not verbatim prose \u2014 see NOTICE.",
+  license: "W3C Document License (code samples: W3C Software License)",
+  attribution: "Derived from the W3C Techniques for WCAG 2.2 and the Understanding documents (https://github.com/w3c/wcag). WCAG 2.2 \xA9 W3C. Summaries are the working group's own 'In brief' text; code samples are the techniques' own examples. Generated by scripts/build-guidance-wcag.mjs \u2014 never hand-edited.",
   entries: [
     {
-      id: "media-live-captions",
+      id: "wcag-non-text-content",
+      criterionId: "1.1.1",
+      wcag: ["1.1.1"],
+      title: {
+        en: "Non-text Content",
+        fr: "Contenu non textuel"
+      },
+      summary: {
+        en: "Create a text alternative for visual and auditory content. Non-text information is available to more people. People who can\u2019t fully see or hear content can understand it."
+      },
+      examples: [
+        {
+          lang: "html",
+          good: '<a href="products.html">\n  <img src="icon.gif" alt="">Products page\n</a>',
+          note: {
+            en: "Good: Combining adjacent image and text links for the same resource (H2)."
+          }
+        },
+        {
+          lang: "css",
+          bad: 'ul#booklist li {\n   padding-left: 20px;\n }\n \n ul#booklist li.new {\n   background: transparent url(new.png) no-repeat top left; \n }\n                             \n ul#booklist li.limited {\n   background: transparent url(limited.png) no-repeat top left; \n }\n                             \n ul#booklist li.instock {\n   background: transparent url(instock.png) no-repeat top left; \n }\n \n ul#booklist li.outstock {\n   background: transparent url(outstock.png) no-repeat top left; \n }</code>\n</pre>\n         \n            <p>It is used in this excerpt: </p>\n         \n<pre><code class="language-html"><ul id="booklist">\n  <li class="new">Some book</li>\n  <li class="instock">Some other book</li>\n  <li class="limited">A book we desperately want to get rid of</li>\n  ...\n  <li class="outstock">A book you actually want </li>\n</ul>',
+          note: {
+            en: "Bad: Failure of Success Criterion 1.1.1 due to conveying information exclusively using CSS background images (F3)."
+          }
+        }
+      ],
+      reference: "https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html"
+    },
+    {
+      id: "wcag-audio-only-and-video-only-prerecorded",
+      criterionId: "1.2.1",
+      wcag: ["1.2.1"],
+      title: {
+        en: "Audio-only and Video-only (Prerecorded)",
+        fr: "Contenus seulement audio et seulement vid\xE9o (pr\xE9-enregistr\xE9s)"
+      },
+      summary: {
+        en: "Provide an alternative when content is perceivable with only one sense. Audio and video-only content can be understood by more people. People who can\u2019t fully see or hear content can understand it."
+      },
+      examples: [
+        {
+          lang: "html",
+          good: '<a href="../video/marslanding.mp4">\n  <img src="../images/spaceship.jpg" alt="Mars landing, video-only"\n   width="193" height="255"/>\n</a>\n<p><a href="mars-landing-audio.mp3">Audio description of "Mars Landing"</a></p>',
+          note: {
+            en: "Good: Providing audio that describes the important video content and describing it as such (G166)."
+          }
+        }
+      ],
+      reference: "https://www.w3.org/WAI/WCAG22/Understanding/audio-only-and-video-only-prerecorded.html"
+    },
+    {
+      id: "wcag-captions-prerecorded",
+      criterionId: "1.2.2",
+      wcag: ["1.2.2"],
+      title: {
+        en: "Captions (Prerecorded)",
+        fr: "Sous-titres (pr\xE9-enregistr\xE9s)"
+      },
+      summary: {
+        en: "Provide synchronized text for audio content in existing videos. Videos can be played with captions. People who are deaf or hard of hearing can understand audio in videos."
+      },
+      examples: [
+        {
+          lang: "html",
+          good: '<video poster="myvideo.png" controls>\n  <source src="myvideo.mp4" srclang="en" type="video/mp4">\n  <track kind="captions" label="English" src="myvideo_en.vtt" srclang="en">\n</video>',
+          note: {
+            en: "Good: Using the track element to provide captions (H95)."
+          }
+        }
+      ],
+      reference: "https://www.w3.org/WAI/WCAG22/Understanding/captions-prerecorded.html"
+    },
+    {
+      id: "wcag-audio-description-or-media-alternative-prerecorded",
+      criterionId: "1.2.3",
+      wcag: ["1.2.3"],
+      title: {
+        en: "Audio Description or Media Alternative (Prerecorded)",
+        fr: "Audio-description ou version de remplacement pour un m\xE9dia temporel (pr\xE9-enregistr\xE9)"
+      },
+      summary: {
+        en: "Provide a description of the visual content in videos. Prerecorded videos can be understood by more people. People who are blind or who cannot understand the visual content can have it described."
+      },
+      examples: [
+        {
+          lang: "html",
+          good: '<object classid="https://www.example.com/analogclock.py">\n  <p>Here is some text that describes the object and its operation.</p>\n</object>',
+          note: {
+            en: "Good: Using the body of the object element (H53)."
+          }
+        }
+      ],
+      reference: "https://www.w3.org/WAI/WCAG22/Understanding/audio-description-or-media-alternative-prerecorded.html"
+    },
+    {
+      id: "wcag-captions-live",
       criterionId: "1.2.4",
       wcag: ["1.2.4"],
       title: {
-        en: "Live synchronized media is captioned",
-        fr: "Le m\xE9dia synchronis\xE9 en direct est sous-titr\xE9"
+        en: "Captions (Live)",
+        fr: "Sous-titres (en direct)"
       },
       summary: {
-        en: "Live audio in synchronized media needs real-time captions. A player with no caption track leaves deaf and hard-of-hearing users with nothing, and a pre-recorded transcript published afterwards does not satisfy a live criterion.",
-        fr: "L'audio en direct d'un m\xE9dia synchronis\xE9 exige des sous-titres en temps r\xE9el. Un lecteur sans piste de sous-titres ne laisse rien aux personnes sourdes ou malentendantes, et une transcription publi\xE9e apr\xE8s coup ne satisfait pas un crit\xE8re \xAB en direct \xBB."
+        en: "Provide synchronized text for audio content in real-time videos. Live videos have captions. People who are deaf or hard of hearing can understand audio in real-time video content."
+      },
+      examples: [],
+      reference: "https://www.w3.org/WAI/WCAG22/Understanding/captions-live.html"
+    },
+    {
+      id: "wcag-audio-description-prerecorded",
+      criterionId: "1.2.5",
+      wcag: ["1.2.5"],
+      title: {
+        en: "Audio Description (Prerecorded)",
+        fr: "Audio-description (pr\xE9-enregistr\xE9e)"
+      },
+      summary: {
+        en: "Provide a synchronized spoken description of the visual content in videos. Videos can be played with audio descriptions. People who cannot see or understand the visual content can hear about it while playing videos."
+      },
+      examples: [],
+      reference: "https://www.w3.org/WAI/WCAG22/Understanding/audio-description-prerecorded.html"
+    },
+    {
+      id: "wcag-info-and-relationships",
+      criterionId: "1.3.1",
+      wcag: ["1.3.1"],
+      title: {
+        en: "Info and Relationships",
+        fr: "Information et relations"
+      },
+      summary: {
+        en: "Use code to reinforce relationships and information conveyed through presentation. Information about content structure is available to more people. People can adapt the presentation to suit their needs while preserving the original meaning."
       },
-      impact: "high",
       examples: [
         {
           lang: "html",
-          bad: '<video src="/live/stream.m3u8" controls></video>',
-          good: '<video src="/live/stream.m3u8" controls>\n  <track kind="captions" srclang="en" label="English (live)" src="/live/captions.vtt" default>\n</video>',
+          bad: "<style>\n.heading1{\n  font-family: Times, serif;\n  font-size:200%;\n  font-weight:bold;\n}\n</style>",
+          good: "... What she <em>really</em> meant to say was, &quot;This is not OK, \n it is <strong>excellent</strong>&quot;! ...",
           note: {
-            en: "The caption track must be fed in real time (a live captioner or a live ASR service). Publishing a transcript after the broadcast is a different criterion.",
-            fr: "La piste doit \xEAtre aliment\xE9e en temps r\xE9el (sous-titrage humain ou reconnaissance vocale en direct). Publier une transcription apr\xE8s la diffusion rel\xE8ve d'un autre crit\xE8re."
+            en: "Good: Using semantic markup to mark emphasized or special text (H49). Bad: Failure of Success Criterion 1.3.1 due to using changes in text presentation to convey information without using the appropriate markup or text (F2)."
           }
         }
       ],
-      reference: "https://www.w3.org/WAI/WCAG22/Understanding/captions-live.html"
+      reference: "https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html"
     },
     {
-      id: "motion-three-flashes",
-      criterionId: "2.3.1",
-      wcag: ["2.3.1"],
+      id: "wcag-meaningful-sequence",
+      criterionId: "1.3.2",
+      wcag: ["1.3.2"],
       title: {
-        en: "Nothing flashes more than three times a second",
-        fr: "Rien ne clignote plus de trois fois par seconde"
+        en: "Meaningful Sequence",
+        fr: "Ordre s\xE9quentiel logique"
       },
       summary: {
-        en: "Content that flashes more than three times in any one second can trigger a seizure. This is the one accessibility failure that can cause physical harm, so it is not a matter of preference: slow the flash below the threshold, or remove it.",
-        fr: "Un contenu qui clignote plus de trois fois par seconde peut d\xE9clencher une crise d'\xE9pilepsie. C'est le seul d\xE9faut d'accessibilit\xE9 qui peut causer un dommage physique : il faut ralentir le clignotement sous le seuil, ou le supprimer."
+        en: "Use code to preserve meaningful content order. The order of content can be understood by more people. Assistive technology can present content to users in the proper order."
+      },
+      examples: [
+        {
+          lang: "html",
+          bad: '<h1>W e l c o m e</h1></code>\n</pre>\n\n            <p>&nbsp; can also be used to add white space, producing similar failures:</p>\n\n<pre><code class="language-html"><h1>H&nbsp;E&nbsp;L&nbsp;L&nbsp;O</h1>',
+          good: '<p>The title says "<span lang="he" dir="rtl">\u05E4\u05E2\u05D9\u05DC\u05D5\u05EA \u05D4\u05D1\u05D9\u05E0\u05D0\u05D5\u05DD, W3C</span>" in Hebrew.</p>',
+          note: {
+            en: "Good: Using the dir attribute on an inline element to resolve problems with nested directional runs (H56). Bad: Failure of Success Criterion 1.3.2 due to using white space characters to control spacing within a word (F32)."
+          }
+        }
+      ],
+      reference: "https://www.w3.org/WAI/WCAG22/Understanding/meaningful-sequence.html"
+    },
+    {
+      id: "wcag-sensory-characteristics",
+      criterionId: "1.3.3",
+      wcag: ["1.3.3"],
+      title: {
+        en: "Sensory Characteristics",
+        fr: "Caract\xE9ristiques sensorielles"
+      },
+      summary: {
+        en: "Describe controls by name, not just by appearance or location. Instructions are understandable by more people. People who are blind or have low vision need non-visual instructions."
+      },
+      examples: [
+        {
+          lang: "html",
+          good: '<form class="wrapper">\n  <h1>Sign up to our mailing list</h1>\n    <div role="note">\n      Complete the form and then press the lower-right (<i>sign up</i>) button.\n    </div>\n  <div class="form-group">\n    <label for="full-name">Your name</label>\n    <input autocomplete="name" id="full-name" type="text">\n  </div>\n  <div class="form-group">\n    <label for="email">Your email address</label>\n    <input autocomplete="email" id="email" type="text">\n  </div>\n  <button type="reset">Cancel</button>\n  <button type="submit">Sign up</button>\n</form>',
+          note: {
+            en: "Good: Providing textual identification of items that otherwise rely only on sensory information to be understood (G96)."
+          }
+        }
+      ],
+      reference: "https://www.w3.org/WAI/WCAG22/Understanding/sensory-characteristics.html"
+    },
+    {
+      id: "wcag-orientation",
+      criterionId: "1.3.4",
+      wcag: ["1.3.4"],
+      title: {
+        en: "Orientation",
+        fr: "Orientation"
+      },
+      summary: {
+        en: "Don't lock content to either portrait or landscape presentation. Devices can be used in any orientation. Wheelchair users and others may have devices mounted in a fixed orientation."
+      },
+      examples: [
+        {
+          lang: "html",
+          bad: '<style>\n/* Orientation "door slam" Styling */\n\n@media all and (orientation: landscape) {\n  .rotate { display: block; }\n  .content { display: none; }\n}\n\n@media all and (orientation: portrait) {\n  .rotate { display: none; }\n  .content { display: block; }\n}\n\n.rotate {\n  text-align: center;\n  font-size: 2rem;\n  margin-top: 4rem;\n}\n</style>',
+          note: {
+            en: "Bad: Failure of Success Criterion 1.3.4 due to showing a message asking to reorient device (F100)."
+          }
+        }
+      ],
+      reference: "https://www.w3.org/WAI/WCAG22/Understanding/orientation.html"
+    },
+    {
+      id: "wcag-identify-input-purpose",
+      criterionId: "1.3.5",
+      wcag: ["1.3.5"],
+      title: {
+        en: "Identify Input Purpose",
+        fr: "Identifier la finalit\xE9 de la saisie"
+      },
+      summary: {
+        en: "Use code to indicate the purpose of common inputs, where technology allows. It is easier to fill out forms. Some people with cognitive disabilities may not understand the input's purpose from the label alone."
+      },
+      examples: [
+        {
+          lang: "html",
+          good: '<form method="post" action="step2">\n  <div>\n    <label for="fname">First Name</label>\n    <input autocomplete="given-name" id="fname" type="text">\n  </div>\n  <div>\n    <label for="lname">Last Name</label>\n    <input autocomplete="family-name" id="lname" type="text">\n  </div>\n  <div>\n    <label for="cc-num">Credit card number:</label>\n    <input autocomplete="cc-number" id="cc-num" type="text">\n  </div>\n  <div>\n    <label for="exp-date">Expiry Date:</label>\n    <input autocomplete="cc-exp" id="exp-date" type="month">\n  </div>\n  <div>\n    <input type="submit" value="Continue">\n  </div>\n</form>',
+          note: {
+            en: "Good: Using HTML autocomplete attributes (H98)."
+          }
+        }
+      ],
+      reference: "https://www.w3.org/WAI/WCAG22/Understanding/identify-input-purpose.html"
+    },
+    {
+      id: "wcag-use-of-color",
+      criterionId: "1.4.1",
+      wcag: ["1.4.1"],
+      title: {
+        en: "Use of Color",
+        fr: "Utilisation de la couleur"
+      },
+      summary: {
+        en: "Use information in addition to color, such as shape or text, to convey meaning. Color is not the only way of distinguishing information. Not everyone sees colors or sees them the same way."
+      },
+      examples: [
+        {
+          lang: "html",
+          bad: '<head>\n  <style>\n    p a:link {text-decoration: none}\n    p a:visited {text-decoration: none}\n    p a:active {text-decoration: none}\n    p a:hover {text-decoration: underline; color: red;}\n  </style>\n</head>\n<body>\n  <p>There are many resources to find out more about the \n     <a href="rain-in-spain.html">rain in Spain</a>.\n  </p>\n</body>',
+          good: '<style>\n  .required {\n    color:#ec0000;\n  }\n</style>\n<label for="lastname" class="required">Last name (required):</label>\n<input autocomplete="family-name" id="lastname" type="text" value="">',
+          note: {
+            en: "Good: Including a text cue for colored form control labels (G205). Bad: Failure of Success Criterion 1.4.1 due to creating links that are not visually evident without color vision (F73)."
+          }
+        }
+      ],
+      reference: "https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html"
+    },
+    {
+      id: "wcag-audio-control",
+      criterionId: "1.4.2",
+      wcag: ["1.4.2"],
+      title: {
+        en: "Audio Control",
+        fr: "Contr\xF4le du son"
+      },
+      summary: {
+        en: "If you play audio content automatically, let people turn it down or off. A page that plays music or sounds doesn't disrupt people. Sound distracts some people, and also interferes with screen readers."
+      },
+      examples: [],
+      reference: "https://www.w3.org/WAI/WCAG22/Understanding/audio-control.html"
+    },
+    {
+      id: "wcag-contrast-minimum",
+      criterionId: "1.4.3",
+      wcag: ["1.4.3"],
+      title: {
+        en: "Contrast (Minimum)",
+        fr: "Contraste (minimum)"
+      },
+      summary: {
+        en: "Provide sufficient contrast between text and its background. Text can be seen by more people. Some people cannot read faint text."
+      },
+      examples: [
+        {
+          lang: "html",
+          bad: '<!doctype>\n  <html lang="en">\n  <head>\n    <title>Setting the canvas background</title>\n    <style>\n      body {background-color:white}\n    </style>\n  </head>\n  <body>\n    <p>My background is white.</p>\n  </body>\n</html>',
+          note: {
+            en: "Bad: Failure of Success Criterion 1.4.3, 1.4.6 and 1.4.8 due to specifying foreground colors without specifying background colors or vice versa (F24)."
+          }
+        }
+      ],
+      reference: "https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html"
+    },
+    {
+      id: "wcag-resize-text",
+      criterionId: "1.4.4",
+      wcag: ["1.4.4"],
+      title: {
+        en: "Resize Text",
+        fr: "Redimensionnement du texte"
+      },
+      summary: {
+        en: "Ensure text can be doubled in size. Text can be enlarged. Some people can only read text when it is bigger."
+      },
+      examples: [
+        {
+          lang: "css",
+          good: "#nav_menu { width: 20em; height: 100em; }\n#nav_list { font-size: 100%; }",
+          note: {
+            en: "Good: Specifying the size of text containers using em units (C28)."
+          }
+        },
+        {
+          lang: "html",
+          bad: '<div style="font-size:100%; width:120px; height:100px; border: thin solid gray;"> \n  Now is the time for all good men to come to the aid of their country. \n</div>\n<p>The quick brown fox jumps over the lazy dog.</p>',
+          note: {
+            en: "Bad: Failure of Success Criterion 1.4.4 when resizing visually rendered text up to 200 percent causes the text, image or controls to be clipped, truncated or obscured (F69)."
+          }
+        }
+      ],
+      reference: "https://www.w3.org/WAI/WCAG22/Understanding/resize-text.html"
+    },
+    {
+      id: "wcag-images-of-text",
+      criterionId: "1.4.5",
+      wcag: ["1.4.5"],
+      title: {
+        en: "Images of Text",
+        fr: "Texte sous forme d\u2019image"
+      },
+      summary: {
+        en: "Use text instead of pictures of text. Users can adjust how text is presented. People cannot alter how text looks in images."
+      },
+      examples: [
+        {
+          lang: "html",
+          good: "<p>The JavaScript method to convert a string to uppercase is <code>toUpperCase()</code>.</p>",
+          note: {
+            en: "Good: Using CSS to control visual presentation of text (C22)."
+          }
+        }
+      ],
+      reference: "https://www.w3.org/WAI/WCAG22/Understanding/images-of-text.html"
+    },
+    {
+      id: "wcag-reflow",
+      criterionId: "1.4.10",
+      wcag: ["1.4.10"],
+      title: {
+        en: "Reflow",
+        fr: "Redistribution"
+      },
+      summary: {
+        en: "Make lines of text reflow within the viewport. Content can be enlarged without increasing line length. People who need bigger text find it difficult if they must scroll to read long lines."
+      },
+      examples: [
+        {
+          lang: "html",
+          good: `<!DOCTYPE html>
+    <html lang="en">
+      <head>
+        <meta charset="UTF-8">
+        <title>CSS: Using media queries and grid CSS to reflow columns</title>
+        <style>
+
+        /* Reflow Styling */
+        header { grid-area: header; }
+        main   { grid-area: main; }
+        aside  { grid-area: aside; }
+        footer { grid-area: footer; }
+
+        .grid,
+        .subgrid {
+          display: grid;
+          grid-template-columns: minmax(0, 1fr);
+        }
+
+        .grid {
+          grid-template-areas:
+          'header'
+          'main'
+          'aside'
+          'footer';
+          width: 100%;
+        }
+
+        .subgrid {
+          width: calc(100% + 2rem);
+          margin: 0 -1rem;
+        }
+
+        .grid-item,
+        .subgrid-item {
+          padding: 1rem;
+        }
+
+        @media all and (min-width: 576px) {
+          .subgrid {
+            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+            margin-bottom: 1rem;
+          }
+          .subgrid-item {
+            padding-bottom: 0.25rem;
+          }
+        }
+
+        @media all and (min-width: 992px) { 
+          .grid {
+            grid-template-areas:
+              'header header header'
+              'main main aside'
+              'footer footer footer';
+            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
+          }
+        }
+
+        </style>
+
+      </head>
+
+      <body class="grid">
+
+        <header class="grid-item">
+          ...
+        </header>
+
+        <main class="grid-item">        
+          ...
+          ...
+          <div class="subgrid">
+            <div class="subgrid-item">
+              ...
+            </div>
+            <div class="subgrid-item">
+              ...
+            </div>
+          </div>
+        </main>
+
+        <aside class="grid-item">
+          ...
+        </aside>
+
+        <footer class="grid-item">
+          ...
+        </footer>
+
+      </body>
+    </html>`,
+          note: {
+            en: "Good: Using media queries and grid CSS to reflow columns (C32)."
+          }
+        }
+      ],
+      reference: "https://www.w3.org/WAI/WCAG22/Understanding/reflow.html"
+    },
+    {
+      id: "wcag-non-text-contrast",
+      criterionId: "1.4.11",
+      wcag: ["1.4.11"],
+      title: {
+        en: "Non-text Contrast",
+        fr: "Contraste du contenu non textuel"
+      },
+      summary: {
+        en: "Ensure meaningful visual cues achieve 3:1 against the background. Important visual information meets the same minimum contrast required for larger text. Some people cannot see elements with low contrast."
       },
-      impact: "high",
       examples: [
         {
           lang: "css",
-          bad: ".alert {\n  animation: flash 0.15s steps(1) infinite;\n}",
-          good: ".alert {\n  animation: flash 1s steps(1) infinite;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .alert {\n    animation: none;\n  }\n}",
+          bad: ":focus {outline: none}",
+          good: "*:focus {\n	/* inner indicator */\n	outline: 2px #F9F9F9 solid;\n	outline-offset: 0;\n	/* outer indicator */\n	box-shadow: 0 0 0 4px #193146;\n}",
+          note: {
+            en: "Good: Creating a two-color focus indicator to ensure sufficient contrast with all components (C40). Bad: Failure of Success Criterion 1.4.11, 2.4.7 and 2.4.13 due to styling element outlines and borders in a way that removes or renders non-visible the visual focus indicator (F78)."
+          }
+        }
+      ],
+      reference: "https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html"
+    },
+    {
+      id: "wcag-text-spacing",
+      criterionId: "1.4.12",
+      wcag: ["1.4.12"],
+      title: {
+        en: "Text Spacing",
+        fr: "Espacement du texte"
+      },
+      summary: {
+        en: "Users can adjust text spacing to make it easier to read. Some people need text with different spacing or font characteristics."
+      },
+      examples: [
+        {
+          lang: "html",
+          bad: '<div style="font-size:100%; width:130px; height:125px; border: thin solid gray;">\n  <p style="margin:0;">Now is the time for all good men to come to \n   the aid of their country.</p>\n</div>\n<p style="margin:0;">The quick brown fox jumps over the lazy dog.</p>',
+          good: "<style>\n/* CSS: No height property is set.*/\n</style>",
+          note: {
+            en: "Good: Allowing for text spacing override (C36). Bad: Failure of Success Criterion 1.4.12 due to clipped or overlapped content when text spacing is adjusted (F104)."
+          }
+        }
+      ],
+      reference: "https://www.w3.org/WAI/WCAG22/Understanding/text-spacing.html"
+    },
+    {
+      id: "wcag-content-on-hover-or-focus",
+      criterionId: "1.4.13",
+      wcag: ["1.4.13"],
+      title: {
+        en: "Content on Hover or Focus",
+        fr: "Contenu au survol ou au focus"
+      },
+      summary: {
+        en: "If hover or focus causes content changes, ensure interaction is predictable. More users can perceive and dismiss non-persistent content. Unpredictable temporary content can be hard for some to consume and may disrupt others."
+      },
+      examples: [
+        {
+          lang: "html",
+          good: '<p>This is the \n   <a class="a-and-tooltip" id="parent" href="index.html">trigger\n   <span id="popup" role="tooltip">And this additional text \n    gives additional context on the trigger term\n   </span>\n  </a>.\n   Text and popup are <strong>in one link (a)</strong> element.\n</p>',
+          note: {
+            en: "Good: Making content on focus or hover hoverable, dismissible, and persistent (SCR39)."
+          }
+        }
+      ],
+      reference: "https://www.w3.org/WAI/WCAG22/Understanding/content-on-hover-or-focus.html"
+    },
+    {
+      id: "wcag-keyboard",
+      criterionId: "2.1.1",
+      wcag: ["2.1.1"],
+      title: {
+        en: "Keyboard",
+        fr: "Clavier"
+      },
+      summary: {
+        en: "Ensure pointer actions have a keyboard equivalent. Everything can be done with a keyboard except freehand movements. Many people rely on the keyboard interface, including blind and some mobility impaired people."
+      },
+      examples: [
+        {
+          lang: "html",
+          bad: '<p><img onmousedown="nextPage();" src="nextarrow.gif" alt="Go to next page"></p>',
+          good: '<a href="https://example.com">Example Site</a>',
           note: {
-            en: "A 0.15s cycle flashes about seven times a second. Honouring prefers-reduced-motion is good practice but does not by itself satisfy this criterion \u2014 the default must already be safe.",
-            fr: "Un cycle de 0,15 s clignote environ sept fois par seconde. Respecter prefers-reduced-motion est une bonne pratique mais ne suffit pas : le comportement par d\xE9faut doit d\xE9j\xE0 \xEAtre s\xFBr."
+            en: "Good: Using HTML form controls and links (H91). Bad: Failure of Success Criterion 2.1.1 due to using only pointing-device-specific event handlers (including gesture) for a function (F54)."
           }
         }
       ],
+      reference: "https://www.w3.org/WAI/WCAG22/Understanding/keyboard.html"
+    },
+    {
+      id: "wcag-no-keyboard-trap",
+      criterionId: "2.1.2",
+      wcag: ["2.1.2"],
+      title: {
+        en: "No Keyboard Trap",
+        fr: "Pas de pi\xE8ge au clavier"
+      },
+      summary: {
+        en: "Ensure users always know how to navigate away from components. Keyboard users don't get stuck. People who rely on the keyboard often have no other means to navigate."
+      },
+      examples: [],
+      reference: "https://www.w3.org/WAI/WCAG22/Understanding/no-keyboard-trap.html"
+    },
+    {
+      id: "wcag-character-key-shortcuts",
+      criterionId: "2.1.4",
+      wcag: ["2.1.4"],
+      title: {
+        en: "Character Key Shortcuts",
+        fr: "Raccourcis clavier utilisant des caract\xE8res"
+      },
+      summary: {
+        en: "Ensure character-only shortcut keys can be turned off or modified. Reduce accidental activation of keyboard shortcuts. Character-key shortcuts are easy to accidentally trigger, especially with speech input."
+      },
+      examples: [],
+      reference: "https://www.w3.org/WAI/WCAG22/Understanding/character-key-shortcuts.html"
+    },
+    {
+      id: "wcag-timing-adjustable",
+      criterionId: "2.2.1",
+      wcag: ["2.2.1"],
+      title: {
+        en: "Timing Adjustable",
+        fr: "R\xE9glage du d\xE9lai"
+      },
+      summary: {
+        en: "Let users turn off, adjust, or extend time limits. Users have adequate time to complete tasks. People with disabilities may need more time to complete activities."
+      },
+      examples: [
+        {
+          lang: "html",
+          bad: `<!doctype>
+<html lang="en">
+<head>
+  <title>Do not use this!</title>     
+  <meta http-equiv="refresh" content="5; url=https://www.example.com/newpage">
+</head>   
+<body>     
+  <p>
+    If your browser supports Refresh, you'll be transported to our
+    <a href="https://www.example.com/newpage">new site</a> in 5 seconds,
+    otherwise select the link manually.     
+  </p>   
+</body> 
+</html>`,
+          good: `<!doctype html>
+<html lang="en">
+<head>
+   <meta charset="utf-8">
+   <title>Stock Market Quotes</title>
+   <script>
+     function timeControl() {
+     // set timer for 4 min 40 sec, then ask user to confirm.
+     setTimeout('userCheck()', 280000);
+     }
+
+     function userCheck() {
+     // set page refresh for 20 sec
+     var id=setTimeout('pageReload()', 20000);
+     // If user selects "OK" the timer is reset 
+     // else the page will refresh from the server.
+     if (confirm("This page is set to refresh in 20 seconds. 
+       Would you like more time?"))
+       {
+          clearTimeout(id);
+          timeControl();
+       }
+     }
+
+     function pageReload() {
+       window.location.reload(true);
+     }
+
+    timeControl();
+  </script>
+</head>
+<body>
+   <h1>Stock Market Quotes</h1>
+   ...
+</body>
+</html>`,
+          note: {
+            en: "Good: Providing a script that warns the user a time limit is about to expire (SCR16). Bad: Failure due to using meta redirect with a time limit (F40)."
+          }
+        }
+      ],
+      reference: "https://www.w3.org/WAI/WCAG22/Understanding/timing-adjustable.html"
+    },
+    {
+      id: "wcag-pause-stop-hide",
+      criterionId: "2.2.2",
+      wcag: ["2.2.2"],
+      title: {
+        en: "Pause, Stop, Hide",
+        fr: "Mettre en pause, arr\xEAter, masquer"
+      },
+      summary: {
+        en: "Let users control content changes that occur in parallel with other content. Fewer users are distracted by content that updates or moves. Some people with cognitive disabilities and attention deficits are distracted by continuous movement."
+      },
+      examples: [
+        {
+          lang: "html",
+          bad: '<script>\n  // blink "on" state\n  function show(){\n      document.getElementById("blink1").style.visibility = "visible";\n      window.setTimeout(hide, 450);\n   }\n    \n   // blink "off" state\n   function hide(){\n      document.getElementById("blink1").style.visibility = "hidden";\n      window.setTimeout(show, 450);\n   }\n\n   // kick it off\n   show();\n</script>',
+          good: '...\n<div id="scroller">\n  <p id="tag">This text will scroll and a Pause/Scroll link will be present \n  when JavaScript and CSS are supported and active.</p>\n</div>\n...',
+          note: {
+            en: "Good: Using script to scroll content, and providing a mechanism to pause it (SCR33). Bad: Failure of Success Criterion 2.2.2 due to a script that causes a blink effect without a mechanism to stop the blinking at 5 seconds or less (F50)."
+          }
+        }
+      ],
+      reference: "https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html"
+    },
+    {
+      id: "wcag-three-flashes-or-below-threshold",
+      criterionId: "2.3.1",
+      wcag: ["2.3.1"],
+      title: {
+        en: "Three Flashes or Below Threshold",
+        fr: "Pas plus de trois flashs ou sous le seuil critique"
+      },
+      summary: {
+        en: "Avoid content that flashes, or keep it under thresholds. Content does not trigger seizures. Flashing content can cause migraines, dizziness, nausea, and seizures."
+      },
+      examples: [],
       reference: "https://www.w3.org/WAI/WCAG22/Understanding/three-flashes-or-below-threshold.html"
     },
     {
-      id: "navigation-multiple-ways",
+      id: "wcag-bypass-blocks",
+      criterionId: "2.4.1",
+      wcag: ["2.4.1"],
+      title: {
+        en: "Bypass Blocks",
+        fr: "Contourner des blocs"
+      },
+      summary: {
+        en: "Provide a means of skipping repeating content. Users can more easily navigate by keyboard. Users reliant on the keyboard interface can move around pages efficiently."
+      },
+      examples: [
+        {
+          lang: "html",
+          good: '<h1>Search Technical Periodicals</h1>\n <h2>Search</h2>\n <form action="/search" role="search">\n  <label for="searchInput">Enter search topic:</label>\n  <input id="searchInput" type="text">\n  <input type="submit" value="Search">\n </form>\n <section>\n   <h2>Available Periodicals</h2>\n   <ul>\n     <li><a href="https://example.com/pcoder">Professional Coder</a></li>\n     <li><a href="https://example.com/algo">Algorithms</a></li>\n     <li><a href="https://example.com/jse">Journal of Software Engineering</a></li>\n   </ul>\n </section>\n <section>\n   <h2>Search Results</h2>\n   ... search results are returned in this section ...\n </section>',
+          note: {
+            en: "Good: Providing heading elements at the beginning of each section of content (H69)."
+          }
+        }
+      ],
+      reference: "https://www.w3.org/WAI/WCAG22/Understanding/bypass-blocks.html"
+    },
+    {
+      id: "wcag-page-titled",
+      criterionId: "2.4.2",
+      wcag: ["2.4.2"],
+      title: {
+        en: "Page Titled",
+        fr: "Titre de page"
+      },
+      summary: {
+        en: "Provide a descriptive page title using appropriate technology. Each web page has a meaningful title. Page titles help users identify and distinguish different pages."
+      },
+      examples: [
+        {
+          lang: "html",
+          good: '<!doctype html>\n<html lang="en">\n  <head>\n    <title>The World Wide Web Consortium</title>     \n  </head>\n  <body>\n      ...   \n  </body> \n</html>',
+          note: {
+            en: "Good: Providing a title using the title element (H25)."
+          }
+        }
+      ],
+      reference: "https://www.w3.org/WAI/WCAG22/Understanding/page-titled.html"
+    },
+    {
+      id: "wcag-focus-order",
+      criterionId: "2.4.3",
+      wcag: ["2.4.3"],
+      title: {
+        en: "Focus Order",
+        fr: "Parcours du focus"
+      },
+      summary: {
+        en: "Elements receive focus in an order that preserves meaning. Keyboard users navigate content in a correct order. Navigating a site or application with only the keyboard will make sense."
+      },
+      examples: [
+        {
+          lang: "html",
+          bad: '<ol>\n  <li><a href="main.html" tabindex="1">Homepage</a></li>\n  <li><a href="chapter1.html" tabindex="4">Chapter 1</a></li>\n  <li><a href="chapter2.html" tabindex="3">Chapter 2</a></li>\n  <li><a href="chapter3.html" tabindex="2">Chapter 3</a></li>\n</ol>',
+          good: '<!doctype html>\n<html lang="en">\n  <head>\n    <meta charset="utf-8">\n    <meta name="viewport" content="width=device-width,\n     initial-scale=1, shrink-to-fit=no">\n    <title>Turbo Encabulator News</title>\n  </head>\n  <body>\n    <main>\n      <h1>All The News About Turbo Encabulators</h1>\n      <button class="open-modal" type="button">Sign up to our mailing list!</button>\n    </main>\n    <dialog aria-labelledby="dialog-heading" id="mailing-list-dialog">\n      <h1 id="dialog-heading" tabindex="-1">Sign up to our mailing list</h1>\n      <form>\n        <p class="req-note">All form fields are required.</p>\n        <div>\n          <label for="fname">First Name</label>\n          <input aria-required="true" autocomplete="given-name" id="fname" type="text">\n        </div>\n        <div>\n          <label for="lname">Last Name</label>\n          <input aria-required="true" autocomplete="family-name" id="lname" type="text">\n        </div>\n        <div>\n          <label for="email">Email address</label>\n          <input aria-required="true" autocomplete="email" id="email" type="text">\n        </div>\n        <button class="sign-up" type="submit">Sign up</button>\n      </form>\n     <form method="dialog">\n        <button aria-label="close" class="close-modal">&times;</button>\n      </form>\n    </dialog>\n  </body>\n</html>',
+          note: {
+            en: "Good: Creating modal dialogs with the HTML dialog element (H102). Bad: Failure of Success Criterion 2.4.3 due to using tabindex to create a tab order that does not preserve meaning and operability (F44)."
+          }
+        }
+      ],
+      reference: "https://www.w3.org/WAI/WCAG22/Understanding/focus-order.html"
+    },
+    {
+      id: "wcag-link-purpose-in-context",
+      criterionId: "2.4.4",
+      wcag: ["2.4.4"],
+      title: {
+        en: "Link Purpose (In Context)",
+        fr: "Fonction du lien (selon le contexte)"
+      },
+      summary: {
+        en: "Provide descriptive names or context for all links. Users understand what each link will do. People with visual and cognitive disabilities can navigate more easily."
+      },
+      examples: [
+        {
+          lang: "html",
+          bad: `<p>A British businessman has racked up 2 million flyer miles and plans to 
+   travel on the world's first commercial tourism flights to space.</p>
+<p><a href="ff.html">Read More...</a></p>`,
+          good: '<a href="routes.html">\n  Current routes at Boulders Climbing Gym\n</a>',
+          note: {
+            en: "Good: Providing link text that describes the purpose of a link for anchor elements (H30). Bad: Failure of Success Criterion 2.4.4 due to providing link context only in content that is not related to the link (F63)."
+          }
+        }
+      ],
+      reference: "https://www.w3.org/WAI/WCAG22/Understanding/link-purpose-in-context.html"
+    },
+    {
+      id: "wcag-multiple-ways",
       criterionId: "2.4.5",
       wcag: ["2.4.5"],
       title: {
-        en: "More than one way to reach a page",
-        fr: "Plus d'un moyen d'atteindre une page"
+        en: "Multiple Ways",
+        fr: "Acc\xE8s multiples"
       },
       summary: {
-        en: "A site offers at least two ways to locate a page \u2014 for example a menu plus a search, or a sitemap. Users who find hierarchical menus hard to navigate need another route; the exception is a page that is a step in a process.",
-        fr: "Un site propose au moins deux moyens d'atteindre une page \u2014 par exemple un menu et une recherche, ou un plan du site. Les personnes pour qui la navigation hi\xE9rarchique est difficile ont besoin d'une autre voie ; l'exception est une page qui constitue une \xE9tape d'un processus."
+        en: "Provide at least two options for reaching the same content. Users can get to content in multiple ways. Not everyone can navigate content in the same way."
+      },
+      examples: [],
+      reference: "https://www.w3.org/WAI/WCAG22/Understanding/multiple-ways.html"
+    },
+    {
+      id: "wcag-headings-and-labels",
+      criterionId: "2.4.6",
+      wcag: ["2.4.6"],
+      title: {
+        en: "Headings and Labels",
+        fr: "En-t\xEAtes et \xE9tiquettes"
+      },
+      summary: {
+        en: "Provide descriptive headings and labels A page's content is described in headings and labels People can orient themselves, especially those with cognitive or visual disabilities."
       },
-      impact: "medium",
       examples: [
         {
           lang: "html",
-          bad: '<nav aria-label="Main">\n  <a href="/products">Products</a>\n  <a href="/support">Support</a>\n</nav>',
-          good: '<nav aria-label="Main">\n  <a href="/products">Products</a>\n  <a href="/support">Support</a>\n</nav>\n<form role="search" action="/search">\n  <label for="q">Search the site</label>\n  <input id="q" name="q" type="search">\n  <button type="submit">Search</button>\n</form>\n<a href="/sitemap">Sitemap</a>',
+          good: "<h1>Disaster preparation</h1>\n<h2>Flood preparation</h2>\n<h2>Fire preparation</h2>",
           note: {
-            en: "Two mechanisms, not two links to the same menu. A search and a sitemap are each a second way; a duplicated navigation bar is not.",
-            fr: "Deux m\xE9canismes, pas deux liens vers le m\xEAme menu. Une recherche et un plan du site sont chacun un second moyen ; une barre de navigation dupliqu\xE9e non."
+            en: "Good: Providing descriptive headings (G130)."
           }
         }
       ],
-      reference: "https://www.w3.org/WAI/WCAG22/Understanding/multiple-ways.html"
+      reference: "https://www.w3.org/WAI/WCAG22/Understanding/headings-and-labels.html"
     },
     {
-      id: "focus-not-obscured",
+      id: "wcag-focus-visible",
+      criterionId: "2.4.7",
+      wcag: ["2.4.7"],
+      title: {
+        en: "Focus Visible",
+        fr: "Visibilit\xE9 du focus"
+      },
+      summary: {
+        en: "Ensure each item receiving focus has a visible indicator. Users know which element has keyboard focus. Without a focus indicator, sighted keyboard users cannot operate the page."
+      },
+      examples: [
+        {
+          lang: "html",
+          bad: '<input type="submit" onFocus="this.blur();">',
+          good: '<nav id="main-nav">\n  <ul>\n    <li>Home</li>\n    <li><a href="/services">Services</a></li>\n    <li><a href="/projects">Projects</a></li>\n    <li><a href="/demos">Demos</a></li>\n    <li><a href="/about-us">About us</a></li>\n    <li><a href="/contact-us">Contact us</a></li>\n    <li><a href="/links">Links</a></li>\n  </ul>\n<nav>',
+          note: {
+            en: "Good: Using CSS to change the presentation of a user interface component when it receives focus (C15). Bad: Failure of Success Criteria 2.1.1, 2.4.7, 2.4.13, and 3.2.1 due to using script to remove focus when focus is received (F55)."
+          }
+        }
+      ],
+      reference: "https://www.w3.org/WAI/WCAG22/Understanding/focus-visible.html"
+    },
+    {
+      id: "wcag-focus-not-obscured-minimum",
       criterionId: "2.4.11",
       wcag: ["2.4.11"],
       title: {
-        en: "The focused element is not hidden behind sticky content",
-        fr: "L'\xE9l\xE9ment qui a le focus n'est pas masqu\xE9 par un contenu collant"
+        en: "Focus Not Obscured (Minimum)",
+        fr: "Focus non masqu\xE9 (minimum)"
       },
       summary: {
-        en: "When a component takes keyboard focus it must not be entirely covered by author content such as a sticky header, footer or cookie banner. A keyboard user who cannot see where focus went has lost the page.",
-        fr: "Quand un composant re\xE7oit le focus clavier, il ne doit pas \xEAtre enti\xE8rement recouvert par un contenu de l'auteur : en-t\xEAte ou pied de page collant, bandeau cookies. Une personne naviguant au clavier qui ne voit plus o\xF9 est le focus a perdu la page."
+        en: "Ensure when an item gets keyboard focus, it is at least partially visible. Keep the focused item visible. People who can't use a mouse need to see what has keyboard focus."
       },
-      impact: "high",
       examples: [
         {
-          lang: "css",
-          bad: ".site-footer {\n  position: fixed;\n  bottom: 0;\n  height: 5rem;\n}",
-          good: ".site-footer {\n  position: fixed;\n  bottom: 0;\n  height: 5rem;\n}\n\n:target,\n:focus {\n  scroll-margin-bottom: 6rem;\n}",
+          lang: "html",
+          good: `<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <title>Using CSS scroll-padding to un-obscure content</title>
+  <style>
+    ...
+
+    :root{
+      --height-dialog: 400px;
+      --breathing-room: 20px;
+      --scroll-padding: calc(var(--height-dialog) + var(--breathing-room));      
+    }
+
+    .wrapper {
+      display:grid;
+      gap:1rem;
+      grid-template-columns:repeat(9, 1fr);
+      grid-template-rows:8rem auto minmax(10rem, max-content);
+      min-block-size: 100vh;
+    }
+
+    .wrapper > * {
+      border:1px solid var(--black);
+      padding:1rem;
+    }
+
+    header {
+      grid-column:1 / -1;
+      grid-row:1;
+    }
+
+    main {
+      grid-column:1 / 8;
+    }
+
+    aside {
+      grid-column:8 / 10;
+    }
+
+    footer {
+      grid-column:1 / -1;
+    }
+
+    @media (max-width:50rem) {
+      main {
+       grid-column:1 / -1;
+      }
+
+      aside {
+        grid-column:1 / -1;
+      }
+    }
+
+    .fixed-position-banner {
+      background:var(--banner-background);
+      border:3px solid var(--banner-border);
+      margin-block-end:0.5rem;
+      padding:1rem 1rem 5rem;
+      position:relative;
+      width:calc(100vw - 1rem);
+    }
+
+    @media (min-width: 50rem) {
+      html {
+        padding-bottom:var(--height-dialog);
+        scroll-padding-bottom:var(--scroll-padding);
+      }
+
+     .fixed-position-banner {
+        margin-block-end:0;
+        position:fixed;
+        inset:auto 0 0 0;
+      }
+    } 
+    ...
+  </style>
+</head>
+<body>
+  <dialog class="fixed-position-banner">
+    <h2 tabindex="-1">Fixed-Position Banner</h2>
+    <button aria-label="close fixed-position banner" class="close-banner" type="button">
+      ...
+    </button>
+  </dialog>
+  <div class="wrapper">
+    <header>
+      <p>Header Content</p>
+    </header>
+    <main>
+      <h1>Main Content</h1>
+    </main>
+    <aside>
+      <h2>Sidebar Content</h2>
+      <p><a href="https://example.com">Here's an example link in the sidebar</a>.</p>
+    </aside>
+    <footer>
+      <h2>Footer Content</h2>
+      <p><a href="https://example.com">Here's an example link in the footer</a>.</p>
+    </footer>
+  </div>
+  <script>
+    window.addEventListener('DOMContentLoaded', () => {
+      const elFixedBanner = document.querySelector('dialog');
+      const elCloseBannerBtn = document.querySelector(".close-banner");
+
+      elFixedBanner.show();
+
+      const getDialogHeight = () => {
+        const height = elFixedBanner.offsetHeight;
+        document.documentElement.style.setProperty('--height-dialog', \`\${height}px\`);
+        document.documentElement.style.setProperty('--breathing-room', \`\${height ? 20 : 0}px\`);
+      }
+
+      const observer = new ResizeObserver(getDialogHeight);
+      observer.observe(elFixedBanner);
+
+      elCloseBannerBtn.addEventListener("click", function(e){
+        elFixedBanner.close();
+      }, false);
+    });
+  </script>	
+</body>
+</html>`,
           note: {
-            en: "scroll-margin keeps the browser from scrolling the focused element flush against the sticky bar. Verify it by tabbing through the page, not by reading the stylesheet \u2014 this criterion is decided on the render.",
-            fr: "scroll-margin emp\xEAche le navigateur de coller l'\xE9l\xE9ment focalis\xE9 contre la barre fixe. \xC0 v\xE9rifier en tabulant r\xE9ellement dans la page, pas en lisant la feuille de styles : ce crit\xE8re se tranche au rendu."
+            en: "Good: Using CSS scroll-padding to un-obscure content (C43)."
           }
         }
       ],
       reference: "https://www.w3.org/WAI/WCAG22/Understanding/focus-not-obscured-minimum.html"
     },
     {
-      id: "pointer-dragging-alternative",
-      criterionId: "2.5.7",
-      wcag: ["2.5.7"],
+      id: "wcag-pointer-gestures",
+      criterionId: "2.5.1",
+      wcag: ["2.5.1"],
       title: {
-        en: "Anything you can drag, you can also do without dragging",
-        fr: "Tout ce qui se fait par glissement se fait aussi autrement"
+        en: "Pointer Gestures",
+        fr: "Gestes pour le contr\xF4le du pointeur"
       },
       summary: {
-        en: "A function operated by a dragging movement also works with a single pointer action \u2014 a button, a menu, a form field. Dragging needs sustained precision that users with tremor, limited dexterity or a head pointer may not have.",
-        fr: "Une fonctionnalit\xE9 actionn\xE9e par glissement doit aussi fonctionner par une action de pointeur simple : un bouton, un menu, un champ. Le glissement exige une pr\xE9cision continue dont ne disposent pas les personnes avec tremblements, dext\xE9rit\xE9 r\xE9duite ou pointeur de t\xEAte."
+        en: "Provide single-point operation for all functions. Let users operate touchscreens with one finger and reduced gestures. Not everyone can perform complex and multi-touch gestures."
+      },
+      examples: [],
+      reference: "https://www.w3.org/WAI/WCAG22/Understanding/pointer-gestures.html"
+    },
+    {
+      id: "wcag-pointer-cancellation",
+      criterionId: "2.5.2",
+      wcag: ["2.5.2"],
+      title: {
+        en: "Pointer Cancellation",
+        fr: "Annulation de l\u2019action du pointeur"
+      },
+      summary: {
+        en: "Make pointer cancellation predictable and consistent. Reduce accidental activation of controls by mouse or touch. Make it easier for anyone to recover from something they didn\u2019t mean to do."
       },
-      impact: "high",
       examples: [
         {
           lang: "html",
-          bad: '<ul id="queue" data-sortable="drag">\n  <li draggable="true">First task</li>\n  <li draggable="true">Second task</li>\n</ul>',
-          good: '<ul id="queue" data-sortable="drag">\n  <li draggable="true">\n    First task\n    <button type="button" data-move="up">Move up</button>\n    <button type="button" data-move="down">Move down</button>\n  </li>\n</ul>',
+          bad: '<!-- modal dialog with a form -->\n...\n<button id="close" type="button">Close</button>\n...',
           note: {
-            en: "The drag stays; a single-pointer path is added beside it. The exception is when dragging is essential to the function, such as freehand drawing.",
-            fr: "Le glissement reste ; un chemin en pointeur simple est ajout\xE9 \xE0 c\xF4t\xE9. L'exception est le cas o\xF9 le glissement est essentiel \xE0 la fonction, comme le dessin \xE0 main lev\xE9e."
+            en: "Bad: Failure of Success Criterion 2.5.2 due to activating a control on the down-event (F101)."
           }
         }
       ],
+      reference: "https://www.w3.org/WAI/WCAG22/Understanding/pointer-cancellation.html"
+    },
+    {
+      id: "wcag-label-in-name",
+      criterionId: "2.5.3",
+      wcag: ["2.5.3"],
+      title: {
+        en: "Label in Name",
+        fr: "\xC9tiquette dans le nom"
+      },
+      summary: {
+        en: "Where practical, make the control\u2019s text label and name match. The visual label for controls is a trigger for speech activation. People who operate with voice interaction use the visible labels in their commands."
+      },
+      examples: [
+        {
+          lang: "html",
+          bad: '<button id="sitesearch" aria-label="Find in this site">Go</button>',
+          good: '<p>Go to our <a href="url-to-page-about-code.html">Code of conduct</a></p>',
+          note: {
+            en: "Good: Matching the accessible name to the visible label (G211). Bad: Failure due to the accessible name not containing the visible label text (F96)."
+          }
+        }
+      ],
+      reference: "https://www.w3.org/WAI/WCAG22/Understanding/label-in-name.html"
+    },
+    {
+      id: "wcag-motion-actuation",
+      criterionId: "2.5.4",
+      wcag: ["2.5.4"],
+      title: {
+        en: "Motion Actuation",
+        fr: "Activation par le mouvement"
+      },
+      summary: {
+        en: "Don't rely solely on device motion to control page content. Content is not dependent on a user's ability to move a device. Some people cannot hold or move a device steadily."
+      },
+      examples: [],
+      reference: "https://www.w3.org/WAI/WCAG22/Understanding/motion-actuation.html"
+    },
+    {
+      id: "wcag-dragging-movements",
+      criterionId: "2.5.7",
+      wcag: ["2.5.7"],
+      title: {
+        en: "Dragging Movements",
+        fr: "Mouvements de glissement"
+      },
+      summary: {
+        en: "For any action that involves dragging, provide a simple pointer alternative. Don\u2019t rely on dragging for user actions. Some people cannot use a mouse to drag items."
+      },
+      examples: [],
       reference: "https://www.w3.org/WAI/WCAG22/Understanding/dragging-movements.html"
     },
     {
-      id: "pointer-target-size",
+      id: "wcag-target-size-minimum",
       criterionId: "2.5.8",
       wcag: ["2.5.8"],
       title: {
-        en: "Pointer targets are at least 24 by 24 CSS pixels",
-        fr: "Les cibles de pointeur mesurent au moins 24 sur 24 pixels CSS"
+        en: "Target Size (Minimum)",
+        fr: "Taille de la cible (minimum)"
       },
       summary: {
-        en: "A target smaller than 24\xD724 CSS pixels needs enough spacing that a 24-pixel circle centred on it touches no other target. Small, tightly packed controls are hard to hit for anyone with a tremor or using a touchscreen one-handed.",
-        fr: "Une cible de moins de 24\xD724 pixels CSS doit \xEAtre assez espac\xE9e pour qu'un cercle de 24 pixels centr\xE9 dessus ne touche aucune autre cible. Des contr\xF4les petits et serr\xE9s sont difficiles \xE0 atteindre en cas de tremblement ou d'usage \xE0 une main sur \xE9cran tactile."
+        en: "Ensure targets meet a minimum size or have sufficient spacing around them. Make controls easier to activate. Some people with physical impairments cannot click small buttons that are close together."
       },
-      impact: "medium",
       examples: [
         {
-          lang: "css",
-          bad: ".icon-button {\n  width: 16px;\n  height: 16px;\n  padding: 0;\n}",
-          good: ".icon-button {\n  min-width: 24px;\n  min-height: 24px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}",
+          lang: "html",
+          good: '<nav aria-label="pagination">\n  <ol>\n    <li><a class="previous">previous</a></li>\n    <li><a aria-current="page">1</li>\n    <li><a href="/page-2">2</a></li>\n    <li><a href="/page-3">3</a></li>\n    <li><a href="/page-4">4</a></li>\n    <li><a href="/page-5">5</a></li>\n    <li><a href="/pages-6-10">next</a></li>\n  </ol>\n</nav>',
           note: {
-            en: "The 24px is the target, not the icon: padding counts. Inline links in a sentence are excepted, as are targets whose size is set by the user agent.",
-            fr: "Les 24 px concernent la cible, pas l'ic\xF4ne : le padding compte. Les liens en ligne dans une phrase sont except\xE9s, comme les cibles dimensionn\xE9es par le navigateur."
+            en: "Good: Using min-height and min-width on target container to ensure sufficient target spacing (C42)."
           }
         }
       ],
       reference: "https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html"
     },
     {
-      id: "navigation-consistent-help",
+      id: "wcag-language-of-page",
+      criterionId: "3.1.1",
+      wcag: ["3.1.1"],
+      title: {
+        en: "Language of Page",
+        fr: "Langue de la page"
+      },
+      summary: {
+        en: "Indicate the predominant language on a page. Assistive technology can determine the language of a page. People using assistive technology get information in the correct language."
+      },
+      examples: [
+        {
+          lang: "html",
+          good: '<!doctype html>\n<html lang="fr">\n<head>\n  <meta charset="utf-8">\n  <title>document \xE9crit en fran\xE7ais</title>\n</head>\n<body>\n  ... document \xE9crit en fran\xE7ais ...\n</body>\n</html>',
+          note: {
+            en: "Good: Using the language attribute on the HTML element (H57)."
+          }
+        }
+      ],
+      reference: "https://www.w3.org/WAI/WCAG22/Understanding/language-of-page.html"
+    },
+    {
+      id: "wcag-language-of-parts",
+      criterionId: "3.1.2",
+      wcag: ["3.1.2"],
+      title: {
+        en: "Language of Parts",
+        fr: "Langue d\u2019un passage"
+      },
+      summary: {
+        en: "Indicate when words are in a different language. Assistive technology can identify the languages used within a page. People using assistive technology get information in the correct language."
+      },
+      examples: [],
+      reference: "https://www.w3.org/WAI/WCAG22/Understanding/language-of-parts.html"
+    },
+    {
+      id: "wcag-on-focus",
+      criterionId: "3.2.1",
+      wcag: ["3.2.1"],
+      title: {
+        en: "On Focus",
+        fr: "Au focus"
+      },
+      summary: {
+        en: "Do not change a user's context when items get focus. Content can be navigated more predictably. Content that behaves predictably is especially important to people with disabilities."
+      },
+      examples: [
+        {
+          lang: "html",
+          bad: '<input type="submit" onFocus="this.blur();">',
+          note: {
+            en: "Bad: Failure of Success Criteria 2.1.1, 2.4.7, 2.4.13, and 3.2.1 due to using script to remove focus when focus is received (F55)."
+          }
+        }
+      ],
+      reference: "https://www.w3.org/WAI/WCAG22/Understanding/on-focus.html"
+    },
+    {
+      id: "wcag-on-input",
+      criterionId: "3.2.2",
+      wcag: ["3.2.2"],
+      title: {
+        en: "On Input",
+        fr: "\xC0 la saisie"
+      },
+      summary: {
+        en: "Forewarn users if their context will change based on their input. Content can be operated more predictably. Content that behaves predictably is especially important to people with disabilities."
+      },
+      examples: [
+        {
+          lang: "html",
+          bad: '<form method="get" id="form1">\n   <input type="text" name="text1" size="3" maxlength="3"> - \n   <input type="text" name="text2" size="3" maxlength="3"> - \n   <input type="text" name="text3" size="4" maxlength="4" onchange="form1.submit();">\n </form>',
+          good: '<form action="/subscribe" method="post">\n <p>Enter your email address to subscribe to our mailing list.</p>\n <label for="address">Your email address:</label>\n <input autocomplete="email" id="address" name="address" type="text"> \n <input type="submit" value="Subscribe">\n</form>',
+          note: {
+            en: "Good: Providing submit buttons (H32). Bad: Failure of Success Criterion 3.2.2 due to automatically submitting a form and presenting new content without prior warning when the last field in the form is given a value (F36)."
+          }
+        }
+      ],
+      reference: "https://www.w3.org/WAI/WCAG22/Understanding/on-input.html"
+    },
+    {
+      id: "wcag-consistent-navigation",
+      criterionId: "3.2.3",
+      wcag: ["3.2.3"],
+      title: {
+        en: "Consistent Navigation",
+        fr: "Navigation coh\xE9rente"
+      },
+      summary: {
+        en: "Consistently order navigation that repeats across multiple pages. Content can be navigated more predictably. Content that behaves predictably is especially important to people with disabilities."
+      },
+      examples: [
+        {
+          lang: "html",
+          bad: '<nav>\n  <ul>\n    <li><a href="brazil.html">Brazil</a></li>\n    <li><a href="canada.html">Canada</a></li>\n    <li><a href="germany.html">Germany</a></li>\n    <li><a href="poland.html">Poland</a></li>\n  </ul>\n</nav>',
+          note: {
+            en: "Bad: Failure of Success Criterion 3.2.3 due to presenting navigation links in a different relative order on different pages (F66)."
+          }
+        }
+      ],
+      reference: "https://www.w3.org/WAI/WCAG22/Understanding/consistent-navigation.html"
+    },
+    {
+      id: "wcag-consistent-identification",
+      criterionId: "3.2.4",
+      wcag: ["3.2.4"],
+      title: {
+        en: "Consistent Identification",
+        fr: "Identification coh\xE9rente"
+      },
+      summary: {
+        en: "Identify repeating functions consistently. Actions are more predictable across pages. Consistently identified actions are especially important to people with disabilities."
+      },
+      examples: [],
+      reference: "https://www.w3.org/WAI/WCAG22/Understanding/consistent-identification.html"
+    },
+    {
+      id: "wcag-consistent-help",
       criterionId: "3.2.6",
       wcag: ["3.2.6"],
       title: {
-        en: "Help is in the same place on every page",
-        fr: "L'aide se trouve au m\xEAme endroit sur chaque page"
+        en: "Consistent Help",
+        fr: "Aide coh\xE9rente"
       },
       summary: {
-        en: "If a set of pages offers help \u2014 a contact link, a phone number, a chat widget \u2014 it appears in the same relative order on each of them. Users who rely on spatial memory should not have to re-find it page by page.",
-        fr: "Si un ensemble de pages propose une aide \u2014 lien de contact, num\xE9ro de t\xE9l\xE9phone, widget de discussion \u2014 elle appara\xEEt dans le m\xEAme ordre relatif sur chacune. Les personnes qui s'appuient sur la m\xE9moire spatiale ne devraient pas avoir \xE0 la rechercher page par page."
+        en: "Put help in the same place when it is on multiple pages. Make it easier to find help and support. People who need help can find it more easily if it's in the same place."
+      },
+      examples: [],
+      reference: "https://www.w3.org/WAI/WCAG22/Understanding/consistent-help.html"
+    },
+    {
+      id: "wcag-error-identification",
+      criterionId: "3.3.1",
+      wcag: ["3.3.1"],
+      title: {
+        en: "Error Identification",
+        fr: "Identification des erreurs"
+      },
+      summary: {
+        en: "Provide descriptive notification of errors. Users know an error exists and what is wrong. Flagging errors helps people with reduced sight and cognitive disabilities resolve them."
       },
-      impact: "low",
       examples: [
         {
           lang: "html",
-          bad: '<header>\n  <a href="/contact">Contact us</a>\n  <nav>...</nav>\n</header>',
-          good: '<header>\n  <nav>...</nav>\n  <a href="/contact">Contact us</a>\n</header>',
+          good: '<form name="signup" id="signup" method="post" action="">\n  <p id="errors" aria-live="assertive"></p>\n  <div>\n    <label for="first">First Name (required)</label>\n    <input aria-invalid="false" autocomplete="given-name" id="first" name="first" type="text">\n  </div>\n  <div>\n    <label for="last">Last Name (required)</label>\n    <input aria-invalid="false" autocomplete="family-name" id="last" name="last" type="text">\n  </div>\n  <div>\n    <label for="email">Email (required)</label>\n    <input aria-invalid="false" autocomplete="email" id="email" name="email" type="text">\n  </div>\n  <div>\n    <button id="button" type="submit">Sign Up</button>\n  </div>\n</form>',
           note: {
-            en: "Same relative order, not identical pixels \u2014 a responsive layout may move it. The criterion is about where it falls in the page, consistently.",
-            fr: "M\xEAme ordre relatif, pas les m\xEAmes pixels : une mise en page responsive peut le d\xE9placer. Le crit\xE8re porte sur sa position dans la page, de fa\xE7on constante."
+            en: "Good: Using aria-invalid to Indicate An Error Field (ARIA21)."
           }
         }
       ],
-      reference: "https://www.w3.org/WAI/WCAG22/Understanding/consistent-help.html"
+      reference: "https://www.w3.org/WAI/WCAG22/Understanding/error-identification.html"
     },
     {
-      id: "forms-error-suggestion",
+      id: "wcag-labels-or-instructions",
+      criterionId: "3.3.2",
+      wcag: ["3.3.2"],
+      title: {
+        en: "Labels or Instructions",
+        fr: "\xC9tiquettes ou instructions"
+      },
+      summary: {
+        en: "Provide labels or instructions for inputs. Users know what information to enter. Everyone, especially those with cognitive disabilities, will know how to respond."
+      },
+      examples: [
+        {
+          lang: "html",
+          good: '<label for="firstname">First name (required):</label> \n<input id="firstname" name="firstname" type="text">',
+          note: {
+            en: "Good: Indicating required form controls using label or legend (H90)."
+          }
+        }
+      ],
+      reference: "https://www.w3.org/WAI/WCAG22/Understanding/labels-or-instructions.html"
+    },
+    {
+      id: "wcag-error-suggestion",
       criterionId: "3.3.3",
       wcag: ["3.3.3"],
       title: {
-        en: "An error message says how to fix it",
-        fr: "Un message d'erreur indique comment corriger"
+        en: "Error Suggestion",
+        fr: "Suggestion apr\xE8s une erreur"
       },
       summary: {
-        en: 'When input is rejected and a correction is known, the message names it. "Invalid" tells the user only that they failed; the expected format, or the nearest valid value, tells them what to do next.',
-        fr: "Quand une saisie est refus\xE9e et qu'une correction est connue, le message l'indique. \xAB Invalide \xBB n'apprend \xE0 l'utilisateur que son \xE9chec ; le format attendu, ou la valeur valide la plus proche, lui dit quoi faire."
+        en: "Where errors are detected, suggest known ways to correct them. Users get suggestions on how to resolve errors. People can address errors faster and with reduced effort."
       },
-      impact: "high",
       examples: [
         {
           lang: "html",
-          bad: '<input id="born" name="born" aria-describedby="born-err">\n<p id="born-err">Invalid input.</p>',
-          good: '<label for="born">Date of birth</label>\n<input id="born" name="born" aria-describedby="born-err" aria-invalid="true">\n<p id="born-err">Enter the date as DD/MM/YYYY, for example 21/03/1994.</p>',
+          good: `<dialog aria-labelledby="alert-heading" id="date-alert" role="alertdialog">
+  <h1 id="alert-heading">Error</h1>
+  <p>Employee's Birth Date is after their hire date. Please verify the birth date and hire date.</p>
+  <button command="close" commandfor="date-alert" type="button">Return to page and correct error</button>
+</dialog>`,
           note: {
-            en: "The suggestion must be programmatically associated with the field, not merely nearby \u2014 aria-describedby is what makes a screen reader announce it with the input.",
-            fr: "La suggestion doit \xEAtre associ\xE9e programmatiquement au champ, pas seulement plac\xE9e \xE0 c\xF4t\xE9 : c'est aria-describedby qui la fait annoncer avec la saisie."
+            en: "Good: Using aria-alertdialog to Identify Errors (ARIA18)."
           }
         }
       ],
       reference: "https://www.w3.org/WAI/WCAG22/Understanding/error-suggestion.html"
     },
     {
-      id: "forms-redundant-entry",
+      id: "wcag-error-prevention-legal-financial-data",
+      criterionId: "3.3.4",
+      wcag: ["3.3.4"],
+      title: {
+        en: "Error Prevention (Legal, Financial, Data)",
+        fr: "Pr\xE9vention des erreurs (juridiques, financi\xE8res, de donn\xE9es)"
+      },
+      summary: {
+        en: "Provide ways for users to confirm, correct, or reverse important submissions. Users can avoid submitting incorrect important information. People with disabilities may be more likely to make mistakes, or not notice them."
+      },
+      examples: [],
+      reference: "https://www.w3.org/WAI/WCAG22/Understanding/error-prevention-legal-financial-data.html"
+    },
+    {
+      id: "wcag-redundant-entry",
       criterionId: "3.3.7",
       wcag: ["3.3.7"],
       title: {
-        en: "Information already entered is not asked for again",
-        fr: "Une information d\xE9j\xE0 saisie n'est pas redemand\xE9e"
+        en: "Redundant Entry",
+        fr: "Saisie redondante"
       },
       summary: {
-        en: "Within a process, information the user already gave is auto-populated or offered for selection rather than retyped. Re-entry is a real barrier for users with memory impairments and for anyone typing with difficulty.",
-        fr: "Au sein d'un processus, une information d\xE9j\xE0 fournie est pr\xE9-remplie ou propos\xE9e \xE0 la s\xE9lection plut\xF4t que ressaisie. La ressaisie est un obstacle r\xE9el en cas de troubles de la m\xE9moire et pour toute personne dont la saisie est difficile."
+        en: "Don't ask for the same information twice in the same activity. Make it easier for users to complete multi-step processes. Some people with cognitive disabilities have difficulty remembering what they entered before."
+      },
+      examples: [],
+      reference: "https://www.w3.org/WAI/WCAG22/Understanding/redundant-entry.html"
+    },
+    {
+      id: "wcag-accessible-authentication-minimum",
+      criterionId: "3.3.8",
+      wcag: ["3.3.8"],
+      title: {
+        en: "Accessible Authentication (Minimum)",
+        fr: "Authentification accessible (minimum)"
+      },
+      summary: {
+        en: "Don't make people solve, recall, or transcribe something to log in. Make logins possible with less mental effort. Some people with cognitive disabilities cannot solve puzzles, memorize a username and password, or retype one-time passcodes."
       },
-      impact: "medium",
       examples: [
         {
           lang: "html",
-          bad: '<fieldset>\n  <legend>Delivery address</legend>\n  <label for="d-street">Street</label>\n  <input id="d-street" name="d-street">\n</fieldset>',
-          good: '<fieldset>\n  <legend>Delivery address</legend>\n  <label for="same">\n    <input type="checkbox" id="same" name="same" checked>\n    Same as my billing address\n  </label>\n  <label for="d-street">Street</label>\n  <input id="d-street" name="d-street" value="12 Rue de Rivoli">\n</fieldset>',
+          good: '<form method="post" action="login">\n  <div>\n    <label for="email">Email</label>\n    <input autocomplete="email" id="email" type="email" ...>\n  </div>\n  <div>\n    <label for="password">Password</label>\n    <input autocomplete="current-password" id="password" type="password" ...>\n  </div>\n    <input type="submit" value="Login">\n  </div>\n</form>',
           note: {
-            en: "Exceptions exist where re-entry is essential \u2014 confirming a password, or a memory test. Convenience is not one of them.",
-            fr: "Des exceptions existent quand la ressaisie est essentielle : confirmation de mot de passe, test de m\xE9moire. La commodit\xE9 n'en fait pas partie."
+            en: "Good: Providing properly marked up email and password inputs (H100)."
           }
         }
       ],
-      reference: "https://www.w3.org/WAI/WCAG22/Understanding/redundant-entry.html"
+      reference: "https://www.w3.org/WAI/WCAG22/Understanding/accessible-authentication-minimum.html"
     },
     {
-      id: "forms-accessible-authentication",
-      criterionId: "3.3.8",
-      wcag: ["3.3.8"],
+      id: "wcag-name-role-value",
+      criterionId: "4.1.2",
+      wcag: ["4.1.2"],
       title: {
-        en: "Signing in does not require a cognitive test",
-        fr: "La connexion n'exige pas un test cognitif"
+        en: "Name, Role, Value",
+        fr: "Nom, r\xF4le et valeur"
       },
       summary: {
-        en: "No step of authentication may depend on remembering, transcribing or solving a puzzle unless an alternative exists. Blocking paste into a password field is the most common way sites fail this: it breaks every password manager.",
-        fr: "Aucune \xE9tape d'authentification ne doit reposer sur la m\xE9morisation, la transcription ou la r\xE9solution d'une \xE9nigme, sauf alternative. Bloquer le collage dans un champ de mot de passe est l'\xE9chec le plus courant : cela casse tous les gestionnaires de mots de passe."
+        en: "Give components correct names, roles, states, and values. People using assistive technology understand all components. Assistive technology only works well when code is done properly."
       },
-      impact: "high",
       examples: [
         {
           lang: "html",
-          bad: '<input type="password" id="pw" name="pw" onpaste="return false" autocomplete="off">',
-          good: '<label for="pw">Password</label>\n<input type="password" id="pw" name="pw" autocomplete="current-password">',
+          bad: `<p> 
+   <span onclick="toggleCheckbox('chkbox')"> 
+     <img src="unchecked.gif" id="chkbox" alt=""> Include Signature 
+   </span> 
+</p>`,
+          good: '<a href="https://example.com">Example Site</a>',
           note: {
-            en: 'autocomplete="current-password" lets a password manager fill the field, which is the documented way to satisfy this criterion. A puzzle CAPTCHA needs a non-cognitive alternative beside it.',
-            fr: 'autocomplete="current-password" permet \xE0 un gestionnaire de remplir le champ, ce qui est la fa\xE7on document\xE9e de satisfaire ce crit\xE8re. Un CAPTCHA \xE0 \xE9nigme exige une alternative non cognitive \xE0 c\xF4t\xE9.'
+            en: "Good: Using HTML form controls and links (H91). Bad: Failure of Success Criterion 4.1.2 due to using script to make div or span a user interface control in HTML without providing a role for the control (F59)."
           }
         }
       ],
-      reference: "https://www.w3.org/WAI/WCAG22/Understanding/accessible-authentication-minimum.html"
+      reference: "https://www.w3.org/WAI/WCAG22/Understanding/name-role-value.html"
+    },
+    {
+      id: "wcag-status-messages",
+      criterionId: "4.1.3",
+      wcag: ["4.1.3"],
+      title: {
+        en: "Status Messages",
+        fr: "Messages d\u2019\xE9tat"
+      },
+      summary: {
+        en: "Let assistive technology notify users about status changes that don't take focus. Make users aware of important changes in content. People who do not see messages need to be informed about them."
+      },
+      examples: [
+        {
+          lang: "html",
+          good: '<div id="activityLog" role="log">\n  <h4 id="logHeading">Recent activity</h4>\n  <ul id="logentries"">\n    <li>08:03 UserX logged off</li>\n  </ul>\n</div>',
+          note: {
+            en: "Good: Using role=log to identify sequential information updates (ARIA23)."
+          }
+        }
+      ],
+      reference: "https://www.w3.org/WAI/WCAG22/Understanding/status-messages.html"
     }
   ]
 };
@@ -50606,8 +51736,8 @@ var datasets = /* @__PURE__ */ new Map();
 function add(ds) {
   datasets.set(ds.pack, ds);
 }
-add(wcag_default2);
 add(rgaa_default2);
+add(wcag_default2);
 function registerRuntimeGuidance(ds) {
   add(ds);
 }