Add the logos for WCAG 2.2 (#252)

* Add the logos for WCAG 2.2 Described how to use the logos. (Same text as for the 2.1 logos, but with 1 replaced by 2.) Added a table with all the versions of the 2.2 logo. (Same table as for the 2.1 logos, but with 1 replaced by 2.) The logos themselves are * Added logos for WCAG 2.2 * Added logos for WCAG 2.2 * Added logos for WCAG 2.2 * Shortened the names of the logo files, dropping "-v" * Shortened the names of the logo files, dropping "-v" * Shortened the names of the logo files, dropping "-v" * Shortened the names of the logo files, dropping "-v"
w3c · Oct 7, 2023 · 75c0512 · 75c0512
1 parent 3534da8
commit 75c0512
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 1 deletion.
diff --git a/content/WCAG2A-Conformance.md b/content/WCAG2A-Conformance.md
@@ -14,6 +14,7 @@ footer: > # Text in footer in HTML
   <p><strong>Date:</strong> Updated 13 July 2020.</p>
 ---
 
+  <p><img src="https://www.w3.org/WAI/WCAG22/wcag2.2A-blue.png" alt="W3C WAI-A WCAG 2.2" width="88" height="32"> <img src="https://www.w3.org/WAI/WCAG22/wcag2.2A.png" alt="W3C WAI-A WCAG 2.2" width="88" height="32"> Web pages with one of these logos claim conformance to WCAG 2.2 at Level A.</p>
   <p><img src="https://www.w3.org/WAI/wcag21/wcag2.1A-blue-v.png" alt="W3C WAI-A WCAG 2.1" width="88" height="32"> <img src="https://www.w3.org/WAI/wcag21/wcag2.1A-v.png" alt="W3C WAI-A WCAG 2.1" width="88" height="32"> Web pages with one of these logos claim conformance to WCAG 2.1 at Level A.</p>
   <p><img src="https://www.w3.org/WAI/wcag2A-blue.png" alt="W3C WAI-A WCAG 2.0" width="88" height="32"> <img src="https://www.w3.org/WAI/wcag2A.png" alt="W3C WAI-A WCAG 2.0" width="88" height="32"> Web pages with one of these logos claim conformance to WCAG 2.0 at Level A.</p>
   <p><strong><em>Important note:</em> Claims are not verified by W3C. Content providers are solely responsible for the use of these logos.</strong></p>

diff --git a/content/WCAG2AA-Conformance.md b/content/WCAG2AA-Conformance.md
@@ -14,6 +14,7 @@ footer: > # Text in footer in HTML
   <p><strong>Date:</strong> Updated 13 July 2020.</p>
 ---
 
+  <p><img src="https://www.w3.org/WAI/WCAG22/wcag2.2AA-blue.png" alt="W3C WAI-AA WCAG 2.2" width="88" height="32"> <img src="https://www.w3.org/WAI/WCAG22/wcag2.2AA.png" alt="W3C WAI-AA WCAG 2.2" width="88" height="32"> Web pages with one of these logos claim conformance to WCAG 2.2 at Level AA.</p>
   <p><img src="https://www.w3.org/WAI/wcag21/wcag2.1AA-blue-v.png" alt="W3C WAI-AA WCAG 2.1" width="88" height="32"> <img src="https://www.w3.org/WAI/wcag21/wcag2.1AA-v.png" alt="W3C WAI-AA WCAG 2.1" width="88" height="32"> Web pages with one of these logos claim conformance to WCAG 2.1 at Level AA.</p>
   <p><img src="https://www.w3.org/WAI/wcag2AA-blue.png" alt="W3C WAI-AA WCAG 2.0" width="88" height="32"> <img src="https://www.w3.org/WAI/wcag2AA.png" alt="W3C WAI-AA WCAG 2.0" width="88" height="32"> Web pages with one of these logos claim conformance to WCAG 2.0 at Level AA.</p>
   <p><strong><em>Important note:</em> Claims are not verified by W3C. Content providers are solely responsible for the use of these logos.</strong></p>

diff --git a/content/WCAG2AAA-Conformance.md b/content/WCAG2AAA-Conformance.md
@@ -14,6 +14,7 @@ footer: > # Text in footer in HTML
   <p><strong>Date:</strong> Updated 13 July 2020.</p>
 ---
 
+  <p><img src="https://www.w3.org/WAI/WCAG22/wcag2.2AAA-blue.png" alt="W3C WAI-AAA WCAG 2.2" width="88" height="32"> <img src="https://www.w3.org/WAI/WCAG22/wcag2.2AAA.png" alt="W3C WAI-AAA WCAG 2.2" width="88" height="32"> Web pages with one of these logos claim conformance to WCAG 2.2 at Level AAA.</p>
   <p><img src="https://www.w3.org/WAI/wcag21/wcag2.1AAA-blue-v.png" alt="W3C WAI-AAA WCAG 2.1" width="88" height="32"> <img src="https://www.w3.org/WAI/wcag21/wcag2.1AAA-v.png" alt="W3C WAI-AAA WCAG 2.1" width="88" height="32"> Web pages with one of these logos claim conformance to WCAG 2.1 at Level AAA.</p>
   <p><img src="https://www.w3.org/WAI/wcag2AAA-blue.png" alt="W3C WAI-AAA WCAG 2.0" width="88" height="32"> <img src="https://www.w3.org/WAI/wcag2AAA.png" alt="W3C WAI-AAA WCAG 2.0" width="88" height="32"> Web pages with one of these logos claim conformance to WCAG 2.0 at Level AAA.</p>
   <p><strong><em>Important note:</em> Claims are not verified by W3C. Content providers are solely responsible for the use of these logos.</strong></p>

diff --git a/content/conformance-logos.md b/content/conformance-logos.md
@@ -34,7 +34,7 @@ This page provides information about conformance logos for WCAG 2.
 {% include_cached toc.html type="start" title="Page Contents" class="simple" %}
 {:/}
 
-{::options toc_levels="2" /}
+{::options toc_levels="2,3" /}
 
 -   This text will be replaced by the TOC.
 {:toc}
@@ -58,6 +58,56 @@ Please see [WCAG 2 Conformance section](https://www.w3.org/TR/WCAG/#conformance)
 
 Place the icon for the appropriate conformance level using the HTML source code below.
 
+### WCAG 2.2
+
+#### WCAG 2.2 Level A Conformance
+
+Put the following HTML markup in your page:
+
+```html
+<a href="https://www.w3.org/WAI/WCAG2A-Conformance"
+   title="Explanation of WCAG 2 Level A Conformance">
+  <img height="32" width="88"
+       src="https://www.w3.org/WAI/WCAG22/wcag2.2A"
+       alt="Level A conformance,
+            W3C WAI Web Content Accessibility Guidelines 2.2">
+</a>
+```
+
+If you would like to use the blue logo, append "-blue" to the image src.
+
+#### WCAG 2.2 Level AA Conformance
+
+Put the following HTML markup in your page:
+
+```html
+<a href="https://www.w3.org/WAI/WCAG2AA-Conformance"
+   title="Explanation of WCAG 2 Level AA conformance">
+  <img height="32" width="88"
+       src="https://www.w3.org/WAI/WCAG22/wcag2.2AA"
+       alt="Level AA conformance,
+            W3C WAI Web Content Accessibility Guidelines 2.2">
+</a>
+```
+
+If you would like to use the blue logo, append "-blue" to the image src.
+
+#### WCAG 2.2 Level AAA Conformance
+
+Put the following HTML markup in your page:
+
+```html
+<a href="https://www.w3.org/WAI/WCAG2AAA-Conformance"
+   title="Explanation of WCAG 2 Level AAA conformance">
+  <img height="32" width="88"
+       src="https://www.w3.org/WAI/WCAG22/wcag2.2AAA"
+       alt="Level AAA conformance,
+            W3C WAI Web Content Accessibility Guidelines 2.2">
+</a>
+```
+
+If you would like to use the blue logo, append "-blue" to the image src.
+
 ### WCAG 2.1
 
 #### WCAG 2.1 Level A Conformance
@@ -167,6 +217,38 @@ Below are the logos as they will appear in your site.
 You may also choose to download and use local copies of the logos, using the links provided for each logo. You will have to adjust the HTML accordingly, and please use the same alternative text and link for the logo.
 
 
+### WCAG 2.2 Logos
+<table>
+  <thead>
+    <tr>
+      <th>&nbsp;</th>
+      <th scope="col">A</th>
+      <th scope="col">AA</th>
+      <th scope="col">AAA</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">Gold</th>
+      <td><img src="https://www.w3.org/WAI/WCAG22/wcag2.2A.png" alt="Level A conformance icon, W3C-WAI Web Content Accessibility Guidelines 2.2" width="88" height="31" /><br />
+        (<a href="https://www.w3.org/WAI/WCAG22/wcag2.2A.png" title="PNG version of WCAG 2.2 Level A conformance icon">png</a>, <a href="https://www.w3.org/WAI/WCAG22/wcag2.2A.gif" title="GIF version of WCAG 2.2 Level A conformance icon">gif</a>, <a href="https://www.w3.org/WAI/WCAG22/wcag2.2A.svg" title="SVG version of WCAG 2.2 Level A conformance icon">svg</a>, <a href="https://www.w3.org/WAI/WCAG22/wcag2.2A.eps" title="EPS version of WCAG 2.2 Level A conformance icon">eps</a>)</td>
+      <td><img src="https://www.w3.org/WAI/WCAG22/wcag2.2AA.png" alt="Level AA conformance icon, W3C-WAI Web Content Accessibility Guidelines 2.2" width="88" height="31" /><br />
+        (<a href="https://www.w3.org/WAI/WCAG22/wcag2.2AA.png" title="PNG version of WCAG 2.2 Level AA conformance icon">png</a>, <a href="https://www.w3.org/WAI/WCAG22/wcag2.2AA.gif" title="GIF version of WCAG 2.2 Level AA conformance icon">gif</a>, <a href="https://www.w3.org/WAI/WCAG22/wcag2.2AA.svg" title="SVG version of WCAG 2.2 Level AA conformance icon">svg</a>, <a href="https://www.w3.org/WAI/WCAG22/wcag2.2AA.eps" title="EPS version of WCAG 2.2 Level AA conformance icon">eps</a>)</td>
+      <td><img src="https://www.w3.org/WAI/WCAG22/wcag2.2AAA.png" alt="Level AAA conformance icon, W3C-WAI Web Content Accessibility Guidelines 2.2" width="88" height="31" /><br />
+        (<a href="https://www.w3.org/WAI/WCAG22/wcag2.2AAA.png" title="PNG version of WCAG 2.2 Level AAA conformance icon">png</a>, <a href="https://www.w3.org/WAI/WCAG22/wcag2.2AAA.gif" title="GIF version of WCAG 2.2 Level AAA conformance icon">gif</a>, <a href="https://www.w3.org/WAI/WCAG22/wcag2.2AAA.svg" title="SVG version of WCAG 2.2 Level AAA conformance icon">svg</a>, <a href="https://www.w3.org/WAI/WCAG22/wcag2.2AAA.eps" title="EPS version of WCAG 2.2 Level AAA conformance icon">eps</a>)</td>
+    </tr>
+    <tr>
+      <th scope="row">Blue</th>
+      <td><img src="https://www.w3.org/WAI/WCAG22/wcag2.2A-blue.png" alt="Level A conformance icon, W3C-WAI Web Content Accessibility Guidelines 2.2 (blue)" width="88" height="31" /><br />
+        (<a href="https://www.w3.org/WAI/WCAG22/wcag2.2A-blue.png" title="PNG version of WCAG 2.2 Level A conformance icon (blue)">png</a>, <a href="https://www.w3.org/WAI/WCAG22/wcag2.2A-blue.gif" title="GIF version of WCAG 2.2 Level A conformance icon (blue)">gif</a>, <a href="https://www.w3.org/WAI/WCAG22/wcag2.2A-blue.svg" title="SVG version of WCAG 2.2 Level A conformance icon (blue)">svg</a>, <a href="https://www.w3.org/WAI/WCAG22/wcag2.2A-blue.eps" title="EPS version of WCAG 2.2 Level A conformance icon (blue)">eps</a>)</td>
+      <td><img src="https://www.w3.org/WAI/WCAG22/wcag2.2AA-blue.png" alt="WCAG 2.2 AA (blue)" width="88" height="31" /><br />
+        (<a href="https://www.w3.org/WAI/WCAG22/wcag2.2AA-blue.png" title="PNG version of WCAG 2.2 Level AA conformance icon (blue)">png</a>, <a href="https://www.w3.org/WAI/WCAG22/wcag2.2AA-blue.gif" title="GIF version of WCAG 2.2 Level AA conformance icon (blue)">gif</a>, <a href="https://www.w3.org/WAI/WCAG22/wcag2.2AA-blue.svg" title="SVG version of WCAG 2.2 Level AA conformance icon (blue)">svg</a>, <a href="https://www.w3.org/WAI/WCAG22/wcag2.2AA-blue.eps" title="EPS version of WCAG 2.2 Level AA conformance icon (blue)">eps</a>)</td>
+      <td><img src="https://www.w3.org/WAI/WCAG22/wcag2.2AAA-blue.png" alt="Level AAA conformance icon, W3C-WAI Web Content Accessibility Guidelines 2.2 (blue)" width="88" height="31" /><br />
+        (<a href="https://www.w3.org/WAI/WCAG22/wcag2.2AAA-blue.png" title="PNG version of WCAG 2.2 Level AAA conformance icon (blue)">png</a>, <a href="https://www.w3.org/WAI/WCAG22/wcag2.2AAA-blue.gif" title="GIF version of WCAG 2.2 Level AAA conformance icon (blue)">gif</a>, <a href="https://www.w3.org/WAI/WCAG22/wcag2.2AAA-blue.svg" title="SVG version of WCAG 2.2 Level AAA conformance icon (blue)">svg</a>, <a href="https://www.w3.org/WAI/WCAG22/wcag2.2AAA-blue.eps" title="EPS version of WCAG 2.2 Level AAA conformance icon (blue)">eps</a>)</td>
+    </tr>
+  </tbody>
+</table>
+
 ### WCAG 2.1 Logos
 <table>
   <thead>