Add accessibility page with link and compliant mention (#425)

* Add mandatory RGAA mentions and page * Add html lang value * Remove useless html tags and css classes from static pages
dnum-mi · Apr 16, 2024 · a3fa0b5 · a3fa0b5
1 parent e0f142a
commit a3fa0b5
Show file tree

Hide file tree

Showing 9 changed files with 311 additions and 227 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="">
+<html lang="fr">
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">

diff --git a/frontend/src/components.d.ts b/frontend/src/components.d.ts
@@ -7,6 +7,7 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    AccessibilityPage: typeof import('./components/AccessibilityPage.vue')['default']
     AskingExpert: typeof import('./components/AskingExpert.vue')['default']
     ContactExpert: typeof import('./components/ContactExpert.vue')['default']
     DsfrAccordion: typeof import('@gouvminint/vue-dsfr')['DsfrAccordion']

diff --git a/frontend/src/components/HeaderMain.vue b/frontend/src/components/HeaderMain.vue
@@ -33,6 +33,10 @@ const quickLinks: InstanceType<typeof DsfrHeader>['$props']['quickLinks'] = [
     label: 'Contact',
     to: '/contact',
   },
+  {
+    label: 'Accessibilité : partiellement conforme',
+    to: '/accessibilite',
+  },
 ]
 </script>
 

diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
@@ -10,6 +10,7 @@ const PageNotFound = () => import('@/views/PageNotFound.vue')
 const AboutPage = () => import('@/views/AboutPage.vue')
 const LegalPage = () => import('@/views/LegalPage.vue')
 const ContactPage = () => import('@/views/ContactPage.vue')
+const AccessibilityPage = () => import('@/views/AccessibilityPage.vue')
 
 const GuideSecuringFirearm = () => import('@/views/GuideSecuringFirearm/GuideSecuringFirearm.vue')
 const SecuringIntroduction = () => import('@/views/GuideSecuringFirearm/SecuringIntroduction.vue')
@@ -170,6 +171,15 @@ const routes: RouteRecordRaw[] = [
       wholeLogo: true,
     },
   },
+  {
+    path: '/accessibilite',
+    name: 'AccessibilityPage',
+    component: AccessibilityPage,
+    beforeEnter: clearLocalStorage,
+    meta: {
+      wholeLogo: true,
+    },
+  },
   {
     path: '/:pathMach(.*)*',
     name: 'PageNotFound',

diff --git a/frontend/src/views/AboutPage.vue b/frontend/src/views/AboutPage.vue
@@ -31,85 +31,53 @@ const imgs = ref([
 </script>
 
 <template>
-  <div>
-    <div class="fr-container mt-4">
-      <h1>À propos</h1>
-      <div>
-        <p class="title-space">
-          Basegun est un projet d'application par apprentissage automatique capable
-          d'identifier et de classer de manière fiable et rapide une arme à feu.
-        </p>
-        <p>
-          Le projet a été initié en 2021 dans le contexte du programme
-          <a
-            target="_blank"
-            href="https://eig.etalab.gouv.fr/defis/basegun/"
-          >Entrepreneurs d’Intérêt Général</a>.
-        </p>
-        <p>
-          Il est actuellement piloté par <span class="font-bold">la Fabrique Numérique de la Direction de la Transformation Numérique</span> du Ministère de l'Intérieur et des Outre-Mer,
-          en partenariat avec le <span class="font-bold">Service Central des Armes et Explosifs.</span>
-        </p>
-        <p>
-          <span class="font-bold">La Direction Générale de la Police Nationale</span>
-          et <span class="font-bold">la Direction Générale de la Gendarmerie Nationale</span> sont associées pour les tests et le suivi de l'application.
-        </p>
-        <div />
-        <p>
-          A ce jour, Basegun permet de prendre en photo une arme à feu et d'obtenir un
-          résultat parmi 12 typologies possibles. Ce résultat donne une indication sur la ou les catégories légales
-          à laquelle l'arme appartient.
-        </p>
-        <p class="fr-callout">
-          <VIcon
-            class="fr-icon-alert-fill"
-            name="ri-alert-fill"
-          />Basegun prend en compte uniquement l'identification d'armes à feu létales et d'armes factices type airsoft.
-          <br>Elle ne permet donc pas encore de distinguer les armes à air comprimé > 2 joules, les armes à blanc ou neutralisées.
-        </p>
+  <div class="fr-container mt-4">
+    <h1>À propos</h1>
+    <p>
+      Basegun est un projet d'application par apprentissage automatique capable
+      d'identifier et de classer de manière fiable et rapide une arme à feu.
+    </p>
+    <p>
+      Le projet a été initié en 2021 dans le contexte du programme
+      <a
+        target="_blank"
+        href="https://eig.etalab.gouv.fr/defis/basegun/"
+      >Entrepreneurs d’Intérêt Général</a>.
+    </p>
+    <p>
+      Il est actuellement piloté par <span class="font-bold">la Fabrique Numérique de la Direction de la Transformation Numérique</span> du Ministère de l'Intérieur et des Outre-Mer,
+      en partenariat avec le <span class="font-bold">Service Central des Armes et Explosifs.</span>
+    </p>
+    <p>
+      <span class="font-bold">La Direction Générale de la Police Nationale</span>
+      et <span class="font-bold">la Direction Générale de la Gendarmerie Nationale</span> sont associées pour les tests et le suivi de l'application.
+    </p>
+    <p>
+      A ce jour, Basegun permet de prendre en photo une arme à feu et d'obtenir un
+      résultat parmi 12 typologies possibles. Ce résultat donne une indication sur la ou les catégories légales
+      à laquelle l'arme appartient.
+    </p>
+    <div class="fr-callout fr-icon-alert-fill">
+      Basegun prend en compte uniquement l'identification d'armes à feu létales et d'armes factices type airsoft.<br/>
+      Elle ne permet donc pas encore de distinguer les armes à air comprimé > 2 joules, les armes à blanc ou neutralisées.
+    </div>
 
-        <div class="container-img">
-          <div
-            v-for="img in imgs"
-            :key="img.id"
-          >
-            <img
-              class="img"
-              :src="img.src"
-              :alt="img.alt"
-            >
-          </div>
-        </div>
+    <div class="container-img">
+      <div
+        v-for="img in imgs"
+        :key="img.id"
+      >
+        <img
+          class="img"
+          :src="img.src"
+          :alt="img.alt"
+        >
       </div>
     </div>
   </div>
 </template>
 
 <style scoped>
-.content {
-  margin: min(5vw, 10rem);
-}
-
-.contact-list {
-  margin-left: 2rem;
-}
-
-.small-text {
-  font-size: 10pt;
-  margin-bottom: 0;
-}
-
-.small-link {
-  color: var(--blue-france-sun-113-625);
-}
-
-.small-link:hover {
-  color: #1212ff
-}
-
-  .title-space {
-margin-top: 20px;
-}
 
 .container-img {
   display: flex;
@@ -125,11 +93,6 @@ margin-top: 20px;
   height: auto;
 }
 
-.list {
-  margin-left: 2em;
-  list-style: square;
-}
-
 :deep(.fr-icon-alert-fill) {
   padding-right: .1em;
 }

diff --git a/frontend/src/views/AccessibilityPage.vue b/frontend/src/views/AccessibilityPage.vue
@@ -0,0 +1,128 @@
+<template>
+  <div class="fr-container mt-4">
+    <h1>Déclaration d’accessibilité</h1>
+    <p>Établie le <span>16 avril 2024</span>.</p>
+    <p>
+      <strong>Ministère de l'Intérieur et des Outre-Mer</strong> s’engage à
+      rendre ses sites internet, intranet, extranet et ses progiciels
+      accessibles (et ses applications mobiles et mobilier urbain numérique)
+      conformément à l’article 47 de la loi n°2005-102 du 11 février 2005.
+    </p>
+
+    <p>
+      Cette déclaration d’accessibilité s’applique à
+      <strong>https://basegun.interieur.gouv.fr/</strong>.
+    </p>
+
+    <h2>État de conformité</h2>
+
+    <p>
+      <strong
+        >Basegun
+        <a target="_blank" href="https://basegun.interieur.gouv.fr/"
+          >https://basegun.interieur.gouv.fr/</a
+        ></strong
+      >
+      est <strong>partiellement</strong> conforme avec le référentiel général
+      d’amélioration de l’accessibilité (RGAA), version 4 en raison des
+      non-conformités et des dérogations énumérées ci-dessous.
+    </p>
+
+    <h2>Résultats des tests</h2>
+
+    <p>
+      L’audit de conformité réalisé par <strong>Basegun</strong> révèle que
+      <strong>71%</strong> des critères du RGAA version 4 sont respectés.<br/>
+      Lien vers le rapport d'audit : <a href="https://ara.numerique.gouv.fr/rapports/LiVL4Hwa_64Cgdaq6Fgpt" class="underline">https://ara.numerique.gouv.fr/rapports/LiVL4Hwa_64Cgdaq6Fgpt</a>
+    </p>
+
+    <h2>Établissement de cette déclaration d’accessibilité</h2>
+
+    <h3>Technologies utilisées pour la réalisation de l’audit</h3>
+
+    <ul>
+      <li>HTML</li>
+      <li>CSS</li>
+      <li>Javascript</li>
+    </ul>
+
+    <h3>Environnement de test</h3>
+
+    <p>
+      Les vérifications de restitution de contenus ont été réalisées sur la base
+      de la combinaison fournie par la base de référence du RGAA, avec les
+      versions suivantes :
+    </p>
+
+    <ul></ul>
+
+    <h3>Outils pour évaluer l’accessibilité</h3>
+
+    <ul>
+      <li>Validateur HTML du W3C</li>
+      <li>Web Developer Toolbar</li>
+    </ul>
+
+    <h3>Pages du site ayant fait l’objet de la vérification de conformité</h3>
+
+    <ul>
+      <li>
+        Accueil <strong>https://basegun.interieur.gouv.fr/accueil</strong>
+      </li>
+      <li>
+        Contact <strong>https://basegun.interieur.gouv.fr/contact</strong>
+      </li>
+      <li>
+        Mentions légales
+        <strong>https://basegun.interieur.gouv.fr/contact</strong>
+      </li>
+      <li>
+        Accessibilité
+        <strong>https://basegun.interieur.gouv.fr/accessibilite</strong>
+      </li>
+      <li>
+        A Propos <strong>https://basegun.interieur.gouv.fr/a-propos</strong>
+      </li>
+    </ul>
+
+    <h2>Retour d’information et contact</h2>
+
+    <p>
+      Si vous n’arrivez pas à accéder à un contenu ou à un service, vous pouvez
+      contacter le responsable de Basegun pour être orienté vers une alternative
+      accessible ou obtenir le contenu sous une autre forme.
+    </p>
+
+    <ul>
+      <li>
+        Contacter
+        <strong
+          >Ministère de l'Intérieur et des Outre-Mer :
+          [email protected]</strong
+        >
+      </li>
+    </ul>
+
+    <h2>Voies de recours</h2>
+
+    <p>
+      Si vous constatez un défaut d’accessibilité vous empêchant d’accéder à un
+      contenu ou une fonctionnalité du site, que vous nous le signalez et que
+      vous ne parvenez pas à obtenir une réponse de notre part, vous êtes en
+      droit de faire parvenir vos doléances ou une demande de saisine au
+      Défenseur des droits.
+    </p>
+
+    <p>Plusieurs moyens sont à votre disposition :</p>
+
+    <ul>
+      <li>Écrire un message au Défenseur des droits</li>
+      <li>Contacter le délégué du Défenseur des droits dans votre région</li>
+    </ul>
+
+    <p>
+      Envoyer un courrier par la poste (gratuit, ne pas mettre de timbre)
+      Défenseur des droits Libre réponse 71120 75342 Paris CEDEX 07
+    </p>
+  </div>
+</template>
diff --git a/frontend/src/views/ContactPage.vue b/frontend/src/views/ContactPage.vue
@@ -1,42 +1,21 @@
 <template>
-  <div>
-    <div class="fr-container mt-4">
-      <h1>Contact</h1>
-      <div>
-        <p class="title-space">
-          Pour toute question ou problème lié au fonctionnement de l'application, veuillez contacter le support utilisateurs : <a
-            class="underline"
-            href="mailto:[email protected]"
-          >[email protected]</a>.
-        </p>
-
-        <p class="title-space">
-          Pour toute question ou remarque liée au projet Basegun ou proposition d'amélioration, veuillez contacter : <a
-            class="underline"
-            href="mailto:[email protected]"
-          >[email protected]</a>.
-        </p>
-      </div>
-    </div>
+  <div class="fr-container mt-4">
+    <h1>Contact</h1>
+    <p>
+      Pour toute question ou problème lié au fonctionnement de l'application,
+      veuillez contacter le support utilisateurs :
+      <a
+        class="underline"
+        href="mailto:[email protected]"
+      >[email protected]</a>.
+    </p>
+    <p>
+      Pour toute question ou remarque liée au projet Basegun ou proposition
+      d'amélioration, veuillez contacter :
+      <a
+        class="underline"
+        href="mailto:[email protected]"
+      >[email protected]</a>.
+    </p>
   </div>
 </template>
-
-<style scoped>
-  .title-space {
-    margin-top: 20px;
-  }
-
-  .small-text {
-    font-size: 10pt;
-    margin-bottom: 0;
-  }
-
-  .small-link {
-    color: var(--blue-france-sun-113-625);
-  }
-
-  .small-link:hover {
-    color: #1212ff
-  }
-
-</style>