Skip to content

Commit 68b022d

Browse files
userquinuserquin
committed
feat(i18n,ui): add accessibility statement page
1 parent 588e1a1 commit 68b022d

12 files changed

Lines changed: 358 additions & 0 deletions

File tree

‎app/components/AppFooter.vue‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,13 @@ const isHome = computed(() => route.name === 'index')
2424
>
2525
{{ $t('privacy_policy.title') }}
2626
</NuxtLink>
27+
<NuxtLink
28+
:to="{ name: 'accessibility' }"
29+
:title="$t('a11y.title')"
30+
class="link-subtle font-mono text-xs flex items-center"
31+
>
32+
{{ $t('a11y.footer_title') }}
33+
</NuxtLink>
2734
<a
2835
href="https://docs.npmx.dev"
2936
target="_blank"

‎app/pages/accessibility.vue‎

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
<script setup lang="ts">
2+
definePageMeta({
3+
name: 'accessibility',
4+
})
5+
6+
useSeoMeta({
7+
title: () => `${$t('a11y.title')} - npmx`,
8+
description: () => $t('a11y.welcome', { app: 'npmx' }),
9+
})
10+
11+
defineOgImageComponent('Default', {
12+
title: () => $t('a11y.title'),
13+
description: () => $t('a11y.welcome', { app: 'npmx' }),
14+
})
15+
16+
const router = useRouter()
17+
</script>
18+
19+
<template>
20+
<main class="container flex-1 py-12 sm:py-16 overflow-x-hidden">
21+
<article class="max-w-2xl mx-auto">
22+
<header class="mb-12">
23+
<div class="flex items-baseline justify-between gap-4 mb-4">
24+
<h1 class="font-mono text-3xl sm:text-4xl font-medium">
25+
{{ $t('a11y.title') }}
26+
</h1>
27+
<button
28+
type="button"
29+
:title="$t('nav.back')"
30+
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"
31+
@click="router.back()"
32+
>
33+
<span class="i-carbon:arrow-left rtl-flip w-4 h-4" aria-hidden="true" />
34+
<span class="hidden sm:inline">{{ $t('nav.back') }}</span>
35+
</button>
36+
</div>
37+
</header>
38+
39+
<section class="prose prose-invert max-w-none space-y-8">
40+
<p class="text-fg-muted leading-relaxed">
41+
<i18n-t keypath="a11y.welcome" tag="span" scope="global">
42+
<template #app>
43+
<strong class="text-fg">npmx</strong>
44+
</template>
45+
</i18n-t>
46+
</p>
47+
48+
<!-- Commitment to Accessibility -->
49+
<div>
50+
<h2 class="text-lg text-fg-subtle uppercase tracking-wider mb-4">
51+
{{ $t('a11y.commitment.title') }}
52+
</h2>
53+
<p class="text-fg-muted leading-relaxed">
54+
{{ $t('a11y.commitment.p1') }}
55+
</p>
56+
</div>
57+
58+
<!-- Regulatory Framework and Compliance Status -->
59+
<div>
60+
<h2 class="text-lg text-fg-subtle uppercase tracking-wider mb-4">
61+
{{ $t('a11y.compliance.title') }}
62+
</h2>
63+
<p class="text-fg-muted leading-relaxed mb-4">
64+
<i18n-t keypath="a11y.compliance.p1" tag="span" scope="global">
65+
<template #guidelines>
66+
<strong class="text-fg">{{ $t('a11y.compliance.guidelines') }}</strong>
67+
</template>
68+
<template #aa>
69+
<strong class="text-fg">{{ $t('a11y.compliance.aa') }}</strong>
70+
</template>
71+
</i18n-t>
72+
</p>
73+
<a
74+
:title="$t('a11y.compliance.wcag_alt')"
75+
href="https://www.w3.org/WAI/WCAG2AA-Conformance"
76+
target="_blank"
77+
rel="noopener noreferrer"
78+
class="inline-flex items-center gap-1 text-fg-muted hover:text-fg underline decoration-fg-subtle/50 hover:decoration-fg"
79+
>
80+
<img
81+
src="/wcag2.1AA.svg"
82+
width="88"
83+
height="32"
84+
aria-hidden="true"
85+
:alt="$t('a11y.compliance.wcag_alt')"
86+
/>
87+
</a>
88+
</div>
89+
90+
<!-- Implementation Measures -->
91+
<div>
92+
<h2 class="text-lg text-fg-subtle uppercase tracking-wider mb-4">
93+
{{ $t('a11y.implementation.title') }}
94+
</h2>
95+
<p class="text-fg-muted leading-relaxed mb-4">
96+
{{ $t('a11y.implementation.p1') }}
97+
</p>
98+
<ul class="space-y-3 text-fg-muted list-none p-0 mb-4">
99+
<li class="flex items-start gap-3">
100+
<span class="text-fg-subtle shrink-0 mt-1">&mdash;</span>
101+
<span>{{ $t('a11y.implementation.li1') }}</span>
102+
</li>
103+
<li class="flex items-start gap-3">
104+
<span class="text-fg-subtle shrink-0 mt-1">&mdash;</span>
105+
<span>{{ $t('a11y.implementation.li2') }}</span>
106+
</li>
107+
<li class="flex items-start gap-3">
108+
<span class="text-fg-subtle shrink-0 mt-1">&mdash;</span>
109+
<span>{{ $t('a11y.implementation.li3') }}</span>
110+
</li>
111+
<li class="flex items-start gap-3">
112+
<span class="text-fg-subtle shrink-0 mt-1">&mdash;</span>
113+
<span>{{ $t('a11y.implementation.li4') }}</span>
114+
</li>
115+
<li class="flex items-start gap-3">
116+
<span class="text-fg-subtle shrink-0 mt-1">&mdash;</span>
117+
<span>{{ $t('a11y.implementation.li5') }}</span>
118+
</li>
119+
<li class="flex items-start gap-3">
120+
<span class="text-fg-subtle shrink-0 mt-1">&mdash;</span>
121+
<span>{{ $t('a11y.implementation.li6') }}</span>
122+
</li>
123+
</ul>
124+
</div>
125+
126+
<!-- Contact and Feedback -->
127+
<div>
128+
<h2 class="text-lg text-fg-subtle uppercase tracking-wider mb-4">
129+
{{ $t('a11y.contact.title') }}
130+
</h2>
131+
<p class="text-fg-muted leading-relaxed">
132+
<i18n-t keypath="a11y.contact.p1" tag="span" scope="global">
133+
<template #app>
134+
<strong class="text-fg">npmx</strong>
135+
</template>
136+
<template #link>
137+
<a
138+
href="https://github.com/npmx-dev/npmx.dev/issues"
139+
target="_blank"
140+
rel="noopener noreferrer"
141+
class="inline-flex items-center gap-1 text-fg-muted hover:text-fg underline decoration-fg-subtle/50 hover:decoration-fg"
142+
>
143+
{{ $t('a11y.contact.link') }}
144+
<span class="i-carbon:launch rtl-flip w-4 h-4" aria-hidden="true" />
145+
</a>
146+
</template>
147+
</i18n-t>
148+
</p>
149+
</div>
150+
</section>
151+
</article>
152+
</main>
153+
</template>

‎i18n/locales/en.json‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1052,5 +1052,36 @@
10521052
"title": "Changes to this policy",
10531053
"p1": "We may update this privacy policy from time to time. Any changes will be published on this page with an updated revision date."
10541054
}
1055+
},
1056+
"a11y": {
1057+
"title": "accessibility statement",
1058+
"footer_title": "a11y",
1059+
"welcome": "We are committed to making the {app} site accessible to everyone.",
1060+
"commitment": {
1061+
"title": "Commitment to Accessibility",
1062+
"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."
1063+
},
1064+
"compliance": {
1065+
"title": "Regulatory Framework and Compliance Status",
1066+
"p1": "This site has been developed to comply with the {guidelines} of the World Wide Web Consortium (W3C), aiming for a {aa} conformance level.",
1067+
"guidelines": "Web Content Accessibility Guidelines (WCAG 2.1)",
1068+
"aa": "Double-A (AA)",
1069+
"wcag_alt": "W3C WAI-AA WCAG 2.1 Conformance site (opens in a new window)"
1070+
},
1071+
"implementation": {
1072+
"title": "Implementation Measures",
1073+
"p1": "In addition to following the regulatory framework, we have taken the following measures to ensure the accessibility of this site:",
1074+
"li1": "The page semantics have been built using standard HTML5 and ARIA roles where necessary.",
1075+
"li2": "Text sizes are relative, allowing the user to adjust their size from the browser.",
1076+
"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.",
1077+
"li4": "The color palette meets Level AA contrast ratios in its standard themes.",
1078+
"li5": "Keyboard navigation is logical and predictable.",
1079+
"li6": "Animations and transitions are reduced or eliminated for users who have requested reduced motion in their operating system or browser preferences."
1080+
},
1081+
"contact": {
1082+
"title": "Contact and Feedback",
1083+
"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}.",
1084+
"link": "GitHub repository"
1085+
}
10551086
}
10561087
}

‎i18n/locales/es-419.json‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,5 +30,14 @@
3030
"skeleton": {
3131
"readme": "Léame"
3232
}
33+
},
34+
"a11y": {
35+
"commitment": {
36+
"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."
37+
},
38+
"contact": {
39+
"title": "Contacto y Retroalimentación",
40+
"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}."
41+
}
3342
}
3443
}

‎i18n/locales/es.json‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -935,5 +935,36 @@
935935
"vulnerabilities_summary": "{count} ({critical}C/{high}H)"
936936
}
937937
}
938+
},
939+
"a11y": {
940+
"title": "declaración de accesibilidad",
941+
"footer_title": "accesibilidad",
942+
"welcome": "Nos comprometemos a hacer que el sitio {app} sea accesible para todos.",
943+
"commitment": {
944+
"title": "Compromiso con la Accesibilidad",
945+
"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."
946+
},
947+
"compliance": {
948+
"title": "Marco Normativo y Estado de Cumplimiento",
949+
"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}.",
950+
"guidelines": "Pautas de Accesibilidad para el Contenido Web (WCAG 2.1)",
951+
"aa": "Doble-A (AA)",
952+
"wcag_alt": "Sitio web de Conformidad W3C WAI-AA WCAG 2.1 (se abre en una nueva ventana)"
953+
},
954+
"implementation": {
955+
"title": "Medidas de Implementación",
956+
"p1": "Además de seguir el marco normativo, hemos tomado las siguientes medidas para garantizar la accesibilidad de este sitio web:",
957+
"li1": "La semántica de la página se ha construido utilizando HTML5 estándar y roles ARIA donde es necesario.",
958+
"li2": "Los tamaños de texto son relativos, permitiendo al usuario ajustar su tamaño desde el navegador.",
959+
"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.",
960+
"li4": "La paleta de colores cumple con los ratios de contraste de Nivel AA en sus temas estándar.",
961+
"li5": "La navegación por teclado es lógica y predecible.",
962+
"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."
963+
},
964+
"contact": {
965+
"title": "Contacto y Comentarios",
966+
"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}.",
967+
"link": "repositorio de GitHub"
968+
}
938969
}
939970
}

‎lunaria/files/en-GB.json‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1052,5 +1052,36 @@
10521052
"title": "Changes to this policy",
10531053
"p1": "We may update this privacy policy from time to time. Any changes will be published on this page with an updated revision date."
10541054
}
1055+
},
1056+
"a11y": {
1057+
"title": "accessibility statement",
1058+
"footer_title": "a11y",
1059+
"welcome": "We are committed to making the {app} site accessible to everyone.",
1060+
"commitment": {
1061+
"title": "Commitment to Accessibility",
1062+
"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."
1063+
},
1064+
"compliance": {
1065+
"title": "Regulatory Framework and Compliance Status",
1066+
"p1": "This site has been developed to comply with the {guidelines} of the World Wide Web Consortium (W3C), aiming for a {aa} conformance level.",
1067+
"guidelines": "Web Content Accessibility Guidelines (WCAG 2.1)",
1068+
"aa": "Double-A (AA)",
1069+
"wcag_alt": "W3C WAI-AA WCAG 2.1 Conformance site (opens in a new window)"
1070+
},
1071+
"implementation": {
1072+
"title": "Implementation Measures",
1073+
"p1": "In addition to following the regulatory framework, we have taken the following measures to ensure the accessibility of this site:",
1074+
"li1": "The page semantics have been built using standard HTML5 and ARIA roles where necessary.",
1075+
"li2": "Text sizes are relative, allowing the user to adjust their size from the browser.",
1076+
"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.",
1077+
"li4": "The color palette meets Level AA contrast ratios in its standard themes.",
1078+
"li5": "Keyboard navigation is logical and predictable.",
1079+
"li6": "Animations and transitions are reduced or eliminated for users who have requested reduced motion in their operating system or browser preferences."
1080+
},
1081+
"contact": {
1082+
"title": "Contact and Feedback",
1083+
"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}.",
1084+
"link": "GitHub repository"
1085+
}
10551086
}
10561087
}

‎lunaria/files/en-US.json‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1052,5 +1052,36 @@
10521052
"title": "Changes to this policy",
10531053
"p1": "We may update this privacy policy from time to time. Any changes will be published on this page with an updated revision date."
10541054
}
1055+
},
1056+
"a11y": {
1057+
"title": "accessibility statement",
1058+
"footer_title": "a11y",
1059+
"welcome": "We are committed to making the {app} site accessible to everyone.",
1060+
"commitment": {
1061+
"title": "Commitment to Accessibility",
1062+
"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."
1063+
},
1064+
"compliance": {
1065+
"title": "Regulatory Framework and Compliance Status",
1066+
"p1": "This site has been developed to comply with the {guidelines} of the World Wide Web Consortium (W3C), aiming for a {aa} conformance level.",
1067+
"guidelines": "Web Content Accessibility Guidelines (WCAG 2.1)",
1068+
"aa": "Double-A (AA)",
1069+
"wcag_alt": "W3C WAI-AA WCAG 2.1 Conformance site (opens in a new window)"
1070+
},
1071+
"implementation": {
1072+
"title": "Implementation Measures",
1073+
"p1": "In addition to following the regulatory framework, we have taken the following measures to ensure the accessibility of this site:",
1074+
"li1": "The page semantics have been built using standard HTML5 and ARIA roles where necessary.",
1075+
"li2": "Text sizes are relative, allowing the user to adjust their size from the browser.",
1076+
"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.",
1077+
"li4": "The color palette meets Level AA contrast ratios in its standard themes.",
1078+
"li5": "Keyboard navigation is logical and predictable.",
1079+
"li6": "Animations and transitions are reduced or eliminated for users who have requested reduced motion in their operating system or browser preferences."
1080+
},
1081+
"contact": {
1082+
"title": "Contact and Feedback",
1083+
"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}.",
1084+
"link": "GitHub repository"
1085+
}
10551086
}
10561087
}

‎lunaria/files/es-419.json‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -935,5 +935,36 @@
935935
"vulnerabilities_summary": "{count} ({critical}C/{high}H)"
936936
}
937937
}
938+
},
939+
"a11y": {
940+
"title": "declaración de accesibilidad",
941+
"footer_title": "accesibilidad",
942+
"welcome": "Nos comprometemos a hacer que el sitio {app} sea accesible para todos.",
943+
"commitment": {
944+
"title": "Compromiso con la Accesibilidad",
945+
"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."
946+
},
947+
"compliance": {
948+
"title": "Marco Normativo y Estado de Cumplimiento",
949+
"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}.",
950+
"guidelines": "Pautas de Accesibilidad para el Contenido Web (WCAG 2.1)",
951+
"aa": "Doble-A (AA)",
952+
"wcag_alt": "Sitio web de Conformidad W3C WAI-AA WCAG 2.1 (se abre en una nueva ventana)"
953+
},
954+
"implementation": {
955+
"title": "Medidas de Implementación",
956+
"p1": "Además de seguir el marco normativo, hemos tomado las siguientes medidas para garantizar la accesibilidad de este sitio web:",
957+
"li1": "La semántica de la página se ha construido utilizando HTML5 estándar y roles ARIA donde es necesario.",
958+
"li2": "Los tamaños de texto son relativos, permitiendo al usuario ajustar su tamaño desde el navegador.",
959+
"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.",
960+
"li4": "La paleta de colores cumple con los ratios de contraste de Nivel AA en sus temas estándar.",
961+
"li5": "La navegación por teclado es lógica y predecible.",
962+
"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."
963+
},
964+
"contact": {
965+
"title": "Contacto y Retroalimentación",
966+
"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}.",
967+
"link": "repositorio de GitHub"
968+
}
938969
}
939970
}

0 commit comments

Comments
 (0)