Merge pull request #4574 from betagouv/landing_accessibility

Améliore l'accessibilité de la page d'accueil

app/assets/stylesheets/new_design/new_header.scss

@@ -23,29 +23,28 @@ $header-mobile-breakpoint: 550px;
 }
 
 .header-logo {
-  display: inline-block;
-  height: 100%;
-  background-size: contain;
-  background-position: center;
-  background-repeat: no-repeat;
+  display: flex;
+  flex-wrap: wrap;
 
-  // Logo large
-  background-image: image-url("header/logo-ds-wide.svg");
-  width: 360px;
-  margin-right: 4 * $default-spacer;
-
-  // Logo normal
-  @media (max-width: $header-landing-breakpoint) {
-    background-image: image-url("header/logo-ds.svg");
-    width: 132px;
-    margin-right: $default-spacer;
+  img {
+    margin-right: 10px;
   }
 
-  // Logo narrow
-  @media (max-width: $header-mobile-breakpoint) {
-    background-image: image-url("header/logo-ds-narrow.svg");
-    width: 32px;
-    margin-right: 0;
+  .site-title {
+    font-size: 24px;
+    font-weight: bold;
+
+    &.small {
+      @media (min-width: $header-mobile-breakpoint) {
+        display: none;
+      }
+    }
+
+    &.big {
+      @media (max-width: $header-mobile-breakpoint) {
+        display: none;
+      }
+    }
   }
 }
 

app/views/layouts/_new_header.haml

@@ -3,14 +3,17 @@
 - dossier = controller.try(:dossier_for_help)
 - procedure = controller.try(:procedure_for_help)
 
-%header.new-header{ class: current_page?(root_path) ? nil : "new-header-with-border" }
+%header.new-header{ class: current_page?(root_path) ? nil : "new-header-with-border", role: 'banner' }
   .header-inner-content
 
     .flex.align-center
       - if params[:controller] == 'users/commencer'
         = link_to 'Revenir en arrière', url_for(:back), class: "button", title: "Revenir sur le site de mon administration"
       - else
-        = link_to '', root_path_for_profile(nav_bar_profile), class: "header-logo", title: "Revenir à l’accueil"
+        = link_to root_path_for_profile(nav_bar_profile), class: 'header-logo', title: "Aller à la page d'accueil de demarches-simplifiees.fr" do
+          = image_tag 'marianne.svg', alt: '', width: 65
+          %span.big.site-title> demarches-simplifiees.fr
+          %span.small.site-title> d-s.fr
 
       - if nav_bar_profile == :instructeur && instructeur_signed_in?
         - current_url = request.path_info
@@ -34,7 +37,7 @@
     %ul.header-right-content
       - if nav_bar_profile == :instructeur && instructeur_signed_in?
         %li
-          .header-search
+          .header-search{ role: 'search' }
             = form_tag instructeur_recherche_path, method: :get, class: "form" do
               = text_field_tag "q", "#{@search_terms if @search_terms.present?}", placeholder: "Rechercher un dossier"
               %button{ title: "Rechercher" }
@@ -42,7 +45,7 @@
 
       - if nav_bar_profile == :user && user_signed_in? && current_user.dossiers.count > 2
         %li
-          .header-search
+          .header-search{ role: 'search' }
             = form_tag recherche_dossiers_path, method: :post, class: "form" do
               = text_field_tag :dossier_id, "", placeholder: "Numéro de dossier"
               %button{ title: "Rechercher" }

app/views/root/_footer.html.haml

@@ -1,4 +1,4 @@
-%footer.landing-footer
+%footer.landing-footer{ role: 'contentinfo' }
   .container
     %ul.footer-columns
 

app/views/root/landing.html.haml

@@ -6,7 +6,7 @@
     .container
       .hero-wrapper
         .hero-text
-          %p.hero-tagline
+          %h1.hero-tagline
             %em.hero-tagline-em Effectuer
             %br<>
             %em.hero-tagline-em une démarche administrative
@@ -14,16 +14,16 @@
             %em.hero-tagline-em en ligne
 
         .hero-illustration
-          %img{ :src => image_url("landing/hero/dematerialiser.svg"), alt: "dématérialisez" }
+          %img{ :src => image_url("landing/hero/dematerialiser.svg"), alt: '' }
 
   .landing-panel.usagers-panel
     .container
       .role-panel-wrapper
         .role-panel-30.role-usagers-image
-          %img.role-image{ :src => image_url("landing/roles/usagers.svg"), alt: "usager" }
+          %img.role-image{ :src => image_url("landing/roles/usagers.svg"), alt: '' }
 
         .role-panel-70
-          %h1.role-panel-title Vous souhaitez effectuer une demande auprès d'une administration ?
+          %h2.role-panel-title Vous souhaitez effectuer une demande auprès d'une administration ?
           %p.role-panel-explanation Réalisez vos demandes en toute simplicité et retrouvez vos dossiers en ligne
 
           = link_to "Comment trouver ma démarche ?",
@@ -67,7 +67,7 @@
     .container
       .cta-panel-wrapper
         %div
-          %h1.cta-panel-title Une question, un problème ?
+          %h2.cta-panel-title Une question, un problème ?
           %p.cta-panel-explanation Notre équipe est disponible pour vous renseigner et vous aider
         %div
           = contact_link "Contactez-nous",
@@ -80,7 +80,7 @@
     .container
       .cta-panel-wrapper
         %div
-          %h1.cta-panel-title Administration : vous voulez dématerialiser ?
+          %h2.cta-panel-title Administration : vous voulez dématerialiser ?
           %p.cta-panel-explanation Proposez à vos usagers de remplir leurs dossiers en ligne
         %div
           = link_to "Découvrez notre outil",