♿️(frontend) introduce dedicated accessibility page
Created a proper accessibility page within the application to replace external doc page redirects. Implemented based on Sophie's accessibility requirements to improve user experience for all users regardless of ability.
This commit is contained in:
lebaudantoine
committed by
aleb_the_flash
aleb_the_flash
parent
6cf8e23ab2
commit
5f07d4a88b
80
src/frontend/src/features/legalsTerms/Accessibility.tsx
Normal file
80
src/frontend/src/features/legalsTerms/Accessibility.tsx
Normal file
@@ -0,0 +1,80 @@
|
||||
import { Screen } from '@/layout/Screen'
|
||||
import { Bold, H, P, A, Italic, Ul } from '@/primitives'
|
||||
import { css } from '@/styled-system/css'
|
||||
import { HStack } from '@/styled-system/jsx'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
export const AccessibilityRoute = () => {
|
||||
const { t } = useTranslation('accessibility', { keyPrefix: 'accessibility' })
|
||||
|
||||
const indentedStyle = css({
|
||||
paddingLeft: '1.5rem',
|
||||
marginLeft: '1rem',
|
||||
borderLeft: '1px solid black',
|
||||
marginTop: '1.5rem',
|
||||
})
|
||||
|
||||
return (
|
||||
<Screen layout="centered" headerTitle={t('title')}>
|
||||
<HStack display={'block'} padding={'2rem'}>
|
||||
<P dangerouslySetInnerHTML={{ __html: t('introduction') }}></P>
|
||||
|
||||
<H lvl={2} bold>
|
||||
{t('declaration.title')}
|
||||
</H>
|
||||
<Italic>{t('declaration.date')}</Italic>
|
||||
<P>{t('scope')}</P>
|
||||
|
||||
<H lvl={2} bold>
|
||||
{t('complianceStatus.title')}
|
||||
</H>
|
||||
<P>{t('complianceStatus.body')}</P>
|
||||
<H lvl={2} bold>
|
||||
{t('improvement.title')}
|
||||
</H>
|
||||
<P>{t('improvement.body')}</P>
|
||||
<Ul
|
||||
style={{
|
||||
marginBottom: '1rem',
|
||||
}}
|
||||
>
|
||||
<li>
|
||||
{t('improvement.contact.email').replace(
|
||||
'visio@numerique.gouv.fr',
|
||||
''
|
||||
)}
|
||||
<A href="mailto:visio@numerique.gouv.fr" color="primary">
|
||||
visio@numerique.gouv.fr
|
||||
</A>
|
||||
</li>
|
||||
<li>{t('improvement.contact.address')}</li>
|
||||
</Ul>
|
||||
<P>{t('improvement.response')}</P>
|
||||
|
||||
<H lvl={2} bold>
|
||||
{t('recourse.title')}
|
||||
</H>
|
||||
<P>{t('recourse.introduction')}</P>
|
||||
|
||||
<P>{t('recourse.options.intro')}</P>
|
||||
|
||||
<Ul>
|
||||
<li>{t('recourse.options.option1')}</li>
|
||||
<li>{t('recourse.options.option2')}</li>
|
||||
<li>
|
||||
{t('recourse.options.option3')}
|
||||
<P className={indentedStyle}>
|
||||
<Bold>{t('dataProtection.line1')}</Bold>
|
||||
<br />
|
||||
{t('dataProtection.line2')}
|
||||
<br />
|
||||
{t('dataProtection.line3')}
|
||||
<br />
|
||||
{t('dataProtection.line4')}
|
||||
</P>
|
||||
</li>
|
||||
</Ul>
|
||||
</HStack>
|
||||
</Screen>
|
||||
)
|
||||
}
|
||||
@@ -242,17 +242,14 @@ export const Footer = () => {
|
||||
</A>
|
||||
</StyledLi>
|
||||
<StyledLi divider>
|
||||
<A
|
||||
externalIcon
|
||||
<Link
|
||||
underline={false}
|
||||
footer="minor"
|
||||
href="https://docs.numerique.gouv.fr/docs/94bd1e3b-a44d-4cf5-b7ee-708a5386a111/"
|
||||
aria-label={
|
||||
t('links.accessibility') + ' - ' + t('links.ariaLabel')
|
||||
}
|
||||
to="/accessibilite"
|
||||
aria-label={t('links.accessibility')}
|
||||
>
|
||||
{t('links.accessibility')}
|
||||
</A>
|
||||
</Link>
|
||||
</StyledLi>
|
||||
<StyledLi divider>
|
||||
<A
|
||||
|
||||
@@ -154,6 +154,7 @@ export const Header = () => {
|
||||
const { t } = useTranslation()
|
||||
const isHome = useMatchesRoute('home')
|
||||
const isLegalTerms = useMatchesRoute('legalTerms')
|
||||
const isAccessibility = useMatchesRoute('accessibility')
|
||||
const isRoom = useMatchesRoute('room')
|
||||
const { user, isLoggedIn, logout } = useUser()
|
||||
|
||||
@@ -203,12 +204,15 @@ export const Header = () => {
|
||||
</header>
|
||||
<nav>
|
||||
<Stack gap={1} direction="row" align="center">
|
||||
{isLoggedIn === false && !isHome && !isLegalTerms && (
|
||||
<>
|
||||
<ProConnectButton hint={false} />
|
||||
<LoginHint />
|
||||
</>
|
||||
)}
|
||||
{isLoggedIn === false &&
|
||||
!isHome &&
|
||||
!isLegalTerms &&
|
||||
!isAccessibility && (
|
||||
<>
|
||||
<ProConnectButton hint={false} />
|
||||
<LoginHint />
|
||||
</>
|
||||
)}
|
||||
{!!user && (
|
||||
<Menu>
|
||||
<Button
|
||||
|
||||
40
src/frontend/src/locales/de/accessibility.json
Normal file
40
src/frontend/src/locales/de/accessibility.json
Normal file
@@ -0,0 +1,40 @@
|
||||
{
|
||||
"accessibility": {
|
||||
"title": "",
|
||||
"introduction": "",
|
||||
"declaration": {
|
||||
"title": "",
|
||||
"date": ""
|
||||
},
|
||||
"scope": "",
|
||||
"complianceStatus": {
|
||||
"title": "",
|
||||
"body": ""
|
||||
},
|
||||
"improvement": {
|
||||
"title": "",
|
||||
"body": "",
|
||||
"contact": {
|
||||
"email": "",
|
||||
"address": ""
|
||||
},
|
||||
"response": ""
|
||||
},
|
||||
"recourse": {
|
||||
"title": "",
|
||||
"introduction": "",
|
||||
"options": {
|
||||
"intro": "",
|
||||
"option1": "",
|
||||
"option2": "",
|
||||
"option3": ""
|
||||
}
|
||||
},
|
||||
"dataProtection": {
|
||||
"line1": "",
|
||||
"line2": "",
|
||||
"line3": "",
|
||||
"line4": ""
|
||||
}
|
||||
}
|
||||
}
|
||||
40
src/frontend/src/locales/en/accessibility.json
Normal file
40
src/frontend/src/locales/en/accessibility.json
Normal file
@@ -0,0 +1,40 @@
|
||||
{
|
||||
"accessibility": {
|
||||
"title": "Accessibility",
|
||||
"introduction": "Visio is committed to making its digital services accessible, in accordance with Article 47 of Law No. 2005-102 of February 11, 2005.",
|
||||
"declaration": {
|
||||
"title": "Accessibility Declaration",
|
||||
"date": "Established on March 5, 2025."
|
||||
},
|
||||
"scope": "This accessibility declaration applies to the site visio.numerique.gouv.fr",
|
||||
"complianceStatus": {
|
||||
"title": "Compliance Status",
|
||||
"body": "visio.numerique.gouv.fr is not compliant with RGAA 4.1. The site has not yet been audited. However, the team is striving to create a site accessible to all by following RGAA recommendations."
|
||||
},
|
||||
"improvement": {
|
||||
"title": "Improvement and Contact",
|
||||
"body": "If you are unable to access content or a service, you can contact the administrator of lasuite.numerique.gouv.fr to be directed to an accessible alternative or obtain the content in another format.",
|
||||
"contact": {
|
||||
"email": "Email: visio@numerique.gouv.fr",
|
||||
"address": "Address: DINUM, 20 avenue de Ségur 75007 Paris"
|
||||
},
|
||||
"response": "We try to respond within 2 business days."
|
||||
},
|
||||
"recourse": {
|
||||
"title": "Recourse",
|
||||
"introduction": "This procedure should be used in the following case: you have reported an accessibility issue to the website administrator that prevents you from accessing content or services on the portal, and you have not received a satisfactory response.",
|
||||
"options": {
|
||||
"intro": "You can:",
|
||||
"option1": "Send a message to the Defender of Rights",
|
||||
"option2": "Contact the delegate of the Defender of Rights in your region",
|
||||
"option3": "Send a letter by mail (free, do not put a stamp):"
|
||||
}
|
||||
},
|
||||
"dataProtection": {
|
||||
"line1": "Service du Premier ministre",
|
||||
"line2": "A l'attention du délégué à la protection des données (DPD)",
|
||||
"line3": "56 rue de Varenne",
|
||||
"line4": "75007 Paris"
|
||||
}
|
||||
}
|
||||
}
|
||||
40
src/frontend/src/locales/fr/accessibility.json
Normal file
40
src/frontend/src/locales/fr/accessibility.json
Normal file
@@ -0,0 +1,40 @@
|
||||
{
|
||||
"accessibility": {
|
||||
"title": "Accessibilité",
|
||||
"introduction": "Visio s'engage à rendre ses services numériques accessibles, conformément à l'article 47 de la loi n°2005-102 du 11 février 2005.",
|
||||
"declaration": {
|
||||
"title": "Déclaration d'accessibilité",
|
||||
"date": "Établie le 05 mars 2025."
|
||||
},
|
||||
"scope": "Cette déclaration d'accessibilité s'applique au site visio.numerique.gouv.fr",
|
||||
"complianceStatus": {
|
||||
"title": "État de conformité",
|
||||
"body": "visio.numerique.gouv.fr est non conforme avec le RGAA 4.1. Le site n'a pas encore été audité. Cependant, l'équipe s'efforce de créer un site accessible à tous en suivant les recommandations du RGAA."
|
||||
},
|
||||
"improvement": {
|
||||
"title": "Amélioration et contact",
|
||||
"body": "Si vous n'arrivez pas à accéder à un contenu ou à un service, vous pouvez contacter le responsable de lasuite.numerique.gouv.fr pour être orienté vers une alternative accessible ou obtenir le contenu sous une autre forme.",
|
||||
"contact": {
|
||||
"email": "E-mail : visio@numerique.gouv.fr",
|
||||
"address": "Adresse : DINUM, 20 avenue de Ségur 75007 Paris"
|
||||
},
|
||||
"response": "Nous essayons de répondre dans les 2 jours ouvrés."
|
||||
},
|
||||
"recourse": {
|
||||
"title": "Voie de recours",
|
||||
"introduction": "Cette procédure est à utiliser dans le cas suivant : vous avez signalé au responsable du site internet un défaut d'accessibilité qui vous empêche d'accéder à un contenu ou à un des services du portail et vous n'avez pas obtenu de réponse satisfaisante.",
|
||||
"options": {
|
||||
"intro": "Vous pouvez :",
|
||||
"option1": "Écrire un message au Défenseur des droits",
|
||||
"option2": "Contacter le délégué du Défenseur des droits dans votre région",
|
||||
"option3": "Envoyer un courrier par la poste (gratuit, ne pas mettre de timbre) :"
|
||||
}
|
||||
},
|
||||
"dataProtection": {
|
||||
"line1": "Service du Premier ministre",
|
||||
"line2": "A l'attention du délégué à la protection des données (DPD)",
|
||||
"line3": "56 rue de Varenne",
|
||||
"line4": "75007 Paris"
|
||||
}
|
||||
}
|
||||
}
|
||||
40
src/frontend/src/locales/nl/accessibility.json
Normal file
40
src/frontend/src/locales/nl/accessibility.json
Normal file
@@ -0,0 +1,40 @@
|
||||
{
|
||||
"accessibility": {
|
||||
"title": "Accessibility",
|
||||
"introduction": "Visio is committed to making its digital services accessible, in accordance with Article 47 of Law No. 2005-102 of February 11, 2005.",
|
||||
"declaration": {
|
||||
"title": "Accessibility Declaration",
|
||||
"date": "Established on March 5, 2025."
|
||||
},
|
||||
"scope": "This accessibility declaration applies to the site visio.numerique.gouv.fr",
|
||||
"complianceStatus": {
|
||||
"title": "Compliance Status",
|
||||
"body": "visio.numerique.gouv.fr is not compliant with RGAA 4.1. The site has not yet been audited. However, the team is striving to create a site accessible to all by following RGAA recommendations."
|
||||
},
|
||||
"improvement": {
|
||||
"title": "Improvement and Contact",
|
||||
"body": "If you are unable to access content or a service, you can contact the administrator of lasuite.numerique.gouv.fr to be directed to an accessible alternative or obtain the content in another format.",
|
||||
"contact": {
|
||||
"email": "Email: visio@numerique.gouv.fr",
|
||||
"address": "Address: DINUM, 20 avenue de Ségur 75007 Paris"
|
||||
},
|
||||
"response": "We try to respond within 2 business days."
|
||||
},
|
||||
"recourse": {
|
||||
"title": "Recourse",
|
||||
"introduction": "This procedure should be used in the following case: you have reported an accessibility issue to the website administrator that prevents you from accessing content or services on the portal, and you have not received a satisfactory response.",
|
||||
"options": {
|
||||
"intro": "You can:",
|
||||
"option1": "Send a message to the Defender of Rights",
|
||||
"option2": "Contact the delegate of the Defender of Rights in your region",
|
||||
"option3": "Send a letter by mail (free, do not put a stamp):"
|
||||
}
|
||||
},
|
||||
"dataProtection": {
|
||||
"line1": "Service du Premier ministre",
|
||||
"line2": "A l'attention du délégué à la protection des données (DPD)",
|
||||
"line3": "56 rue de Varenne",
|
||||
"line4": "75007 Paris"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,9 +1,10 @@
|
||||
import { FeedbackRoute, RoomRoute, roomIdPattern } from '@/features/rooms'
|
||||
import { HomeRoute } from '@/features/home'
|
||||
import { LegalTermsRoute } from '@/features/legalsTerms/LegalTermsRoute'
|
||||
import { AccessibilityRoute } from '@/features/legalsTerms/Accessibility'
|
||||
|
||||
export const routes: Record<
|
||||
'home' | 'room' | 'feedback' | 'legalTerms',
|
||||
'home' | 'room' | 'feedback' | 'legalTerms' | 'accessibility',
|
||||
{
|
||||
name: RouteName
|
||||
path: RegExp | string
|
||||
@@ -33,6 +34,11 @@ export const routes: Record<
|
||||
path: '/mentions-legales',
|
||||
Component: LegalTermsRoute,
|
||||
},
|
||||
accessibility: {
|
||||
name: 'accessibility',
|
||||
path: '/accessibilite',
|
||||
Component: AccessibilityRoute,
|
||||
},
|
||||
}
|
||||
|
||||
export type RouteName = keyof typeof routes
|
||||
|
||||
Reference in New Issue
Block a user