fix: update page in line with new elements, reword statement

Author: danielroe

app/pages/accessibility.vue

@@ -14,6 +14,7 @@ defineOgImageComponent('Default', {
 })
 
 const router = useRouter()
+const canGoBack = useCanGoBack()
 </script>
 
 <template>
@@ -26,12 +27,12 @@ const router = useRouter()
           </h1>
           <button
             type="button"
-            :title="$t('nav.back')"
-            class="inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0"
+            class="cursor-pointer inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded shrink-0"
             @click="router.back()"
+            v-if="canGoBack"
           >
             <span class="i-carbon:arrow-left rtl-flip w-4 h-4" aria-hidden="true" />
-            <span class="hidden sm:inline">{{ $t('nav.back') }}</span>
+            <span class="sr-only sm:not-sr-only">{{ $t('nav.back') }}</span>
           </button>
         </div>
       </header>
@@ -45,88 +46,75 @@ const router = useRouter()
           </i18n-t>
         </p>
 
-        <!-- Commitment to Accessibility -->
+        <!-- Our Approach -->
         <div>
           <h2 class="text-lg text-fg-subtle uppercase tracking-wider mb-4">
-            {{ $t('a11y.commitment.title') }}
-          </h2>
-          <p class="text-fg-muted leading-relaxed">
-            {{ $t('a11y.commitment.p1') }}
-          </p>
-        </div>
-
-        <!-- Regulatory Framework and Compliance Status -->
-        <div>
-          <h2 class="text-lg text-fg-subtle uppercase tracking-wider mb-4">
-            {{ $t('a11y.compliance.title') }}
+            {{ $t('a11y.approach.title') }}
           </h2>
           <p class="text-fg-muted leading-relaxed mb-4">
-            <i18n-t keypath="a11y.compliance.p1" tag="span" scope="global">
-              <template #guidelines>
-                <strong class="text-fg">{{ $t('a11y.compliance.guidelines') }}</strong>
-              </template>
-              <template #aa>
-                <strong class="text-fg">{{ $t('a11y.compliance.aa') }}</strong>
+            {{ $t('a11y.approach.p1') }}
+          </p>
+          <p class="text-fg-muted leading-relaxed">
+            <i18n-t keypath="a11y.approach.p2" tag="span" scope="global">
+              <template #about>
+                <NuxtLink
+                  :to="{ name: 'about' }"
+                  class="text-fg-muted hover:text-fg underline decoration-fg-subtle/50 hover:decoration-fg"
+                >
+                  {{ $t('a11y.approach.about_link') }}
+                </NuxtLink>
               </template>
             </i18n-t>
           </p>
-          <a
-            :title="$t('a11y.compliance.wcag_alt')"
-            href="https://www.w3.org/WAI/WCAG2AA-Conformance"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="inline-flex items-center gap-1 text-fg-muted hover:text-fg underline decoration-fg-subtle/50 hover:decoration-fg"
-          >
-            <img
-              src="/wcag2.1AA.svg"
-              width="88"
-              height="32"
-              :alt="$t('a11y.compliance.wcag_alt')"
-            />
-          </a>
         </div>
 
-        <!-- Implementation Measures -->
+        <!-- What We Do -->
         <div>
           <h2 class="text-lg text-fg-subtle uppercase tracking-wider mb-4">
-            {{ $t('a11y.implementation.title') }}
+            {{ $t('a11y.measures.title') }}
           </h2>
           <p class="text-fg-muted leading-relaxed mb-4">
-            {{ $t('a11y.implementation.p1') }}
+            {{ $t('a11y.measures.p1') }}
           </p>
-          <ul class="space-y-3 text-fg-muted list-none p-0 mb-4">
-            <li class="flex items-start gap-3">
-              <span aria-hidden="true" class="text-fg-subtle shrink-0 mt-1">&mdash;</span>
-              <span>{{ $t('a11y.implementation.li1') }}</span>
-            </li>
+          <ul class="space-y-3 text-fg-muted list-none p-0">
             <li class="flex items-start gap-3">
-              <span aria-hidden="true" class="text-fg-subtle shrink-0 mt-1">&mdash;</span>
-              <span>{{ $t('a11y.implementation.li2') }}</span>
+              <span class="text-fg-subtle shrink-0">&mdash;</span>
+              <span>{{ $t('a11y.measures.li1') }}</span>
             </li>
             <li class="flex items-start gap-3">
-              <span class="text-fg-subtle shrink-0 mt-1">&mdash;</span>
-              <span>{{ $t('a11y.implementation.li3') }}</span>
+              <span class="text-fg-subtle shrink-0">&mdash;</span>
+              <span>{{ $t('a11y.measures.li2') }}</span>
             </li>
             <li class="flex items-start gap-3">
-              <span aria-hidden="true" class="text-fg-subtle shrink-0 mt-1">&mdash;</span>
-              <span>{{ $t('a11y.implementation.li4') }}</span>
+              <span class="text-fg-subtle shrink-0">&mdash;</span>
+              <span>{{ $t('a11y.measures.li3') }}</span>
             </li>
             <li class="flex items-start gap-3">
-              <span aria-hidden="true" class="text-fg-subtle shrink-0 mt-1">&mdash;</span>
-              <span>{{ $t('a11y.implementation.li5') }}</span>
+              <span class="text-fg-subtle shrink-0">&mdash;</span>
+              <span>{{ $t('a11y.measures.li4') }}</span>
             </li>
             <li class="flex items-start gap-3">
-              <span aria-hidden="true" class="text-fg-subtle shrink-0 mt-1">&mdash;</span>
-              <span>{{ $t('a11y.implementation.li6') }}</span>
+              <span class="text-fg-subtle shrink-0">&mdash;</span>
+              <span>{{ $t('a11y.measures.li5') }}</span>
             </li>
             <li class="flex items-start gap-3">
-              <span aria-hidden="true" class="text-fg-subtle shrink-0 mt-1">&mdash;</span>
-              <span>{{ $t('a11y.implementation.li7') }}</span>
+              <span class="text-fg-subtle shrink-0">&mdash;</span>
+              <span>{{ $t('a11y.measures.li6') }}</span>
             </li>
           </ul>
         </div>
 
-        <!-- Contact and Feedback -->
+        <!-- Known Limitations -->
+        <div>
+          <h2 class="text-lg text-fg-subtle uppercase tracking-wider mb-4">
+            {{ $t('a11y.limitations.title') }}
+          </h2>
+          <p class="text-fg-muted leading-relaxed">
+            {{ $t('a11y.limitations.p1') }}
+          </p>
+        </div>
+
+        <!-- Feedback -->
         <div>
           <h2 class="text-lg text-fg-subtle uppercase tracking-wider mb-4">
             {{ $t('a11y.contact.title') }}

i18n/locales/en.json

@@ -1067,34 +1067,32 @@
     }
   },
   "a11y": {
-    "title": "accessibility statement",
+    "title": "accessibility",
     "footer_title": "a11y",
-    "welcome": "We are committed to making the {app} site accessible to everyone.",
-    "commitment": {
-      "title": "Commitment to Accessibility",
-      "p1": "We continuously work to improve the user experience for everyone, applying relevant accessibility standards to ensure our site can be used by the widest possible audience, regardless of their abilities."
-    },
-    "compliance": {
-      "title": "Regulatory Framework and Compliance Status",
-      "p1": "This site has been developed to comply with the {guidelines} of the World Wide Web Consortium (W3C), aiming for a {aa} conformance level.",
-      "guidelines": "Web Content Accessibility Guidelines (WCAG 2.1)",
-      "aa": "Double-A (AA)",
-      "wcag_alt": "W3C WAI-AA WCAG 2.1 Conformance site (opens in a new window)"
-    },
-    "implementation": {
-      "title": "Implementation Measures",
-      "p1": "In addition to following the regulatory framework, we have taken the following measures to ensure the accessibility of this site:",
-      "li1": "The page semantics have been built using standard HTML5 and ARIA roles where necessary.",
-      "li2": "Text sizes are relative, allowing the user to adjust their size from the browser.",
-      "li3": "The design is responsive and allows for magnification (zoom) up to 250% without loss of content or functionality, exceeding the 200% minimum required by WCAG 2.1.",
-      "li4": "The color palette meets Level AA contrast ratios in its standard themes.",
-      "li5": "Keyboard navigation is logical and predictable.",
-      "li6": "Animations and transitions are reduced or eliminated for users who have requested reduced motion in their operating system or browser preferences.",
-      "li7": "The site employs progressive enhancement, ensuring essential content remains accessible without JavaScript, although some personalization features may require it."
+    "welcome": "We want {app} to be usable by as many people as possible.",
+    "approach": {
+      "title": "Our approach",
+      "p1": "We try to follow the Web Content Accessibility Guidelines (WCAG) 2.2 and use them as a reference when building features. We don't claim full conformance with any level of WCAG — accessibility is a continual process and there is always more work to do.",
+      "p2": "This site is an {about}. Accessibility improvements are made incrementally as part of our regular development.",
+      "about_link": "open-source, community-driven project"
+    },
+    "measures": {
+      "title": "What we do",
+      "p1": "Some of the things we aim to do across the site:",
+      "li1": "Use semantic HTML and ARIA attributes where appropriate.",
+      "li2": "Use relative text sizes so you can adjust them in your browser.",
+      "li3": "Support keyboard navigation throughout the interface.",
+      "li4": "Respect the prefers-reduced-motion and prefers-color-scheme media queries.",
+      "li5": "Design with sufficient color contrast in mind.",
+      "li6": "Ensure essential content is available without JavaScript, though some interactive features require it."
+    },
+    "limitations": {
+      "title": "Known limitations",
+      "p1": "Some parts of the site — particularly third-party content like package READMEs — may not meet accessibility standards. We are working to improve these areas over time."
     },
     "contact": {
-      "title": "Contact and Feedback",
-      "p1": "Accessibility is an ongoing effort. If you encounter any barriers or have any suggestions to improve the accessibility of {app}, please do not hesitate to contact us by opening an issue on our {link}.",
+      "title": "Feedback",
+      "p1": "If you encounter an accessibility barrier on {app}, please let us know by opening an issue on our {link}. We take these reports seriously and will do our best to address them.",
       "link": "GitHub repository"
     }
   }

i18n/locales/es-419.json

@@ -34,14 +34,5 @@
       "typeahead_description": "¡Compara contra no usar una dependencia! Aprobado por e18e.",
       "tooltip_description": "¡Compara contra no usar una dependencia! La {link} mantiene una lista de paquetes que pueden ser reemplazados con APIs nativas o alternativas más simples."
     }
-  },
-  "a11y": {
-    "commitment": {
-      "p1": "Trabajamos continuamente para mejorar la experiencia del usuario para todos, aplicando los estándares de accesibilidad pertinentes para garantizar que nuestro portal pueda ser utilizado por la audiencia más amplia posible, independientemente de sus habilidades."
-    },
-    "contact": {
-      "title": "Contacto y Retroalimentación",
-      "p1": "La accesibilidad es un esfuerzo continuo. Si encuentras alguna barrera o tienes alguna sugerencia para mejorar la accesibilidad de {app}, por favor no dudes en contactarnos abriendo un problema (issue) en nuestro {link}."
-    }
   }
 }

i18n/locales/es.json

@@ -1019,37 +1019,5 @@
       "title": "Cambios en esta política",
       "p1": "Podemos actualizar esta política de privacidad ocasionalmente. Cualquier cambio se publicará en esta página con una fecha de revisión actualizada."
     }
-  },
-  "a11y": {
-    "title": "declaración de accesibilidad",
-    "footer_title": "accesibilidad",
-    "welcome": "Nos comprometemos a hacer que el sitio {app} sea accesible para todos.",
-    "commitment": {
-      "title": "Compromiso con la Accesibilidad",
-      "p1": "Trabajamos continuamente para mejorar la experiencia de usuario para todos, aplicando los estándares de accesibilidad pertinentes para garantizar que nuestro sitio web pueda ser utilizado por la audiencia más amplia posible, independientemente de sus capacidades."
-    },
-    "compliance": {
-      "title": "Marco Normativo y Estado de Cumplimiento",
-      "p1": "Este sitio web ha sido desarrollado para cumplir con las {guidelines} del World Wide Web Consortium (W3C), con el objetivo de alcanzar un nivel de conformidad {aa}.",
-      "guidelines": "Pautas de Accesibilidad para el Contenido Web (WCAG 2.1)",
-      "aa": "Doble-A (AA)",
-      "wcag_alt": "Sitio web de Conformidad W3C WAI-AA WCAG 2.1 (se abre en una nueva ventana)"
-    },
-    "implementation": {
-      "title": "Medidas de Implementación",
-      "p1": "Además de seguir el marco normativo, hemos tomado las siguientes medidas para garantizar la accesibilidad de este sitio web:",
-      "li1": "La semántica de la página se ha construido utilizando HTML5 estándar y roles ARIA donde es necesario.",
-      "li2": "Los tamaños de texto son relativos, permitiendo al usuario ajustar su tamaño desde el navegador.",
-      "li3": "El diseño es responsivo y permite una ampliación (zoom) de hasta el 250% sin pérdida de contenido o funcionalidad, superando el mínimo del 200% requerido por WCAG 2.1.",
-      "li4": "La paleta de colores cumple con los ratios de contraste de Nivel AA en sus temas estándar.",
-      "li5": "La navegación por teclado es lógica y predecible.",
-      "li6": "Las animaciones y transiciones se reducen o eliminan para los usuarios que han solicitado movimiento reducido en las preferencias de su sistema operativo o del navegador.",
-      "li7": "El sitio web emplea mejora progresiva, asegurando que el contenido esencial permanezca accesible sin JavaScript, aunque algunas funciones de personalización pueden requerirlo."
-    },
-    "contact": {
-      "title": "Contacto y Comentarios",
-      "p1": "La accesibilidad es un esfuerzo continuo. Si encuentras alguna barrera o tienes alguna sugerencia para mejorar la accesibilidad de {app}, no dudes en contactarnos abriendo un problema (issue) en nuestro {link}.",
-      "link": "repositorio de GitHub"
-    }
   }
 }

i18n/schema.json

@@ -3202,6 +3202,96 @@
       },
       "additionalProperties": false
     },
+    "a11y": {
+      "type": "object",
+      "properties": {
+        "title": {
+          "type": "string"
+        },
+        "footer_title": {
+          "type": "string"
+        },
+        "welcome": {
+          "type": "string"
+        },
+        "approach": {
+          "type": "object",
+          "properties": {
+            "title": {
+              "type": "string"
+            },
+            "p1": {
+              "type": "string"
+            },
+            "p2": {
+              "type": "string"
+            },
+            "about_link": {
+              "type": "string"
+            }
+          },
+          "additionalProperties": false
+        },
+        "measures": {
+          "type": "object",
+          "properties": {
+            "title": {
+              "type": "string"
+            },
+            "p1": {
+              "type": "string"
+            },
+            "li1": {
+              "type": "string"
+            },
+            "li2": {
+              "type": "string"
+            },
+            "li3": {
+              "type": "string"
+            },
+            "li4": {
+              "type": "string"
+            },
+            "li5": {
+              "type": "string"
+            },
+            "li6": {
+              "type": "string"
+            }
+          },
+          "additionalProperties": false
+        },
+        "limitations": {
+          "type": "object",
+          "properties": {
+            "title": {
+              "type": "string"
+            },
+            "p1": {
+              "type": "string"
+            }
+          },
+          "additionalProperties": false
+        },
+        "contact": {
+          "type": "object",
+          "properties": {
+            "title": {
+              "type": "string"
+            },
+            "p1": {
+              "type": "string"
+            },
+            "link": {
+              "type": "string"
+            }
+          },
+          "additionalProperties": false
+        }
+      },
+      "additionalProperties": false
+    },
     "$schema": {
       "type": "string"
     }