feat(a11y): corrections

components/article/terms.php

@@ -1,8 +1,7 @@
 <h3 class="sr-only">Tags et catégories</h3>
 <?php
   if (has_category('chapters')) {
-    echo "<ul class='nolist' aria-labelledby='title-article-taxo-romans'>";
-    echo '<h4 class="sr-only" id="title-article-taxo-romans">Romans</h4>';
+    echo "<ul class='nolist' aria-label='Romans'>";
     $romans = get_the_terms($post->ID, 'roman');
     foreach( $romans as $roman ) {
       echo "<li><a href= '" . esc_url( get_category_link( $roman->term_id ) ) . "' class='btn btn-small c-primary'><svg class='icon' alt=''><use xlink:href='#icon-folder'></use></svg>&nbsp;" . $roman->name . "</a></li>";
@@ -10,8 +9,7 @@
     echo "</ul>";
   } else {
     $categories = get_the_category();
-    echo "<ul class='nolist' aria-labelledby='title-article-taxo-categories'>";
-    echo '<h4 class="sr-only" id="title-article-taxo-categories">Catégories</h4>';
+    echo "<ul class='nolist' aria-label='Catégories'>";
     foreach( $categories as $category ) {
       echo "<li><a href= '" . esc_url( get_category_link( $category->term_id ) ) . "' class='btn btn-small c-primary'><svg class='icon' alt=''><use xlink:href='#icon-folder'></use></svg>&nbsp;" . $category->cat_name . "</a></li>";
     }
@@ -19,8 +17,7 @@
   }
   $tags = get_the_tags();
   if ($tags) {
-    echo "<ul class='nolist' aria-labelledby='title-article-taxo-tags'>";
-    echo '<h4 class="sr-only" id="title-article-taxo-tags">Tags</h4>';
+    echo "<ul class='nolist' aria-label='Tags'>";
     foreach( $tags as $tag ) {
       echo "<li><a href= '" . esc_url( get_tag_link( $tag->term_id ) ) . "' class='btn btn-small c-secondary'><svg class='icon' alt=''><use xlink:href='#icon-tags'></use></svg>&nbsp;" . $tag->name . "</a></li>";
     }

components/footer-content.php

@@ -1,6 +1,6 @@
 <footer class="bg-dark fg-light" aria-labelledby="title-footer">
   <h1 class="sr-only" id="title-footer">Informations sur le site</h1>
-  <nav class="container menu toolbar bg fg-dark" aria-labelledby="title-footer-social">
+  <nav class="container menu toolbar bg fg-dark" aria-label="title-footer-social">
     <h2 class="sr-only" id="title-footer-social">Me suivre</h2>
     <ul class="f-end">
       <?php
@@ -17,7 +17,7 @@
   </nav>
   <div class="container columns">
     <section class="col-12 col-md-4" aria-labelledby="title-footer-section-1">
-      <h2 class="sr-only" id="title-footer-section-1">Droit d'utiliations</h2>
+      <h2 class="sr-only" id="title-footer-section-1">Droit d'utilisations</h2>
       <p>Les contenus sont diffusé sous licence Creative Common Attribution - Partage à l'Identique 4.0 - hors mention contraire.</p>
       <p>Ces licences vous autorise à partager et copier mes travaux, tant que vous me citiez en source, et que vous autorisez la même chose pour les travaux qui en seraient dérivés. N'hésitez pas à partager ! ❤️</p>
     </section>
@@ -31,8 +31,7 @@
     <section class="col-12 col-md-4" aria-labelledby="title-footer-section-3">
       <h2 class="sr-only" id="title-footer-section-3">Informations annexes</h2>
       <p>Toute critique, remarque, etc. est la bienvenue. Pour cela, vous pouvez me contacter à kazhnuz [at] kobold [point] cafe ou sur mes <a href="https://kazhnuz.space/links">réseaux sociaux</a></p>
-      <ul>
-        <h3 class="sr-only">Pages annexes</h3>
+      <ul aria-label="Pages annexes">
         <?php
           $listmenu = get_nav_menu_locations();
           $menu = wp_get_nav_menu_items($listmenu['footer-pages']);

components/mobile-sidebar.php

@@ -1,10 +1,15 @@
 <nav id="mobile-sidebar" class="bg-dark fg-light sidebar menu hidden">
   <h1 class="align-center text-light">Menu du site</h1>
   <div class="mb-1">
-    <?php include(TEMPLATEPATH . '/components/searchform.php'); ?>
+    <form method="get" id="searchform" action="<?php bloginfo('home'); ?>/">
+      <div>
+        <label for="searchfield2" class="sr-only">Formulaire de recherche</label>
+        <input class="form-control" id="searchfield2" type="search" placeholder="Chercher sur le site" aria-label="Chercher sur le site" value="<?php the_search_query(); ?>" name="s" id="s" />
+      </div>
+    </form>
   </div>
-  <ul>
-    <h2>Menu principal</h2>
+  <h2 id="sidebar-menu-principal-titre">Menu principal</h2>
+  <ul aria-labelledby="sidebar-menu-principal-titre">
     <li>
       <a href="<?php echo site_url(); ?>" class="menu-item">
         <span><svg class="icon icon-home" alt=""><use xlink:href="#icon-home"></use></svg> Accueil</span>
@@ -18,8 +23,8 @@
         }
       ?>
   </ul>
-  <ul>
-    <h2>Liste des catégories</h2>
+  <h2 id="sidebar-categories-titre">Liste des catégories</h2>
+  <ul aria-labelledby="sidebar-categories-titre">
     <?php
       $categories = get_categories( array(
         'orderby' => 'name',
@@ -33,8 +38,8 @@
       <?php }
     ?>
   </ul>
-  <ul>
-    <h2>Pages</h2>
+  <h2 id="sidebar-pages-titre">Pages</h2>
+  <ul aria-labelledby="sidebar-pages-titre">
     <?php
       $listmenu = get_nav_menu_locations();
       $menu = wp_get_nav_menu_items($listmenu['top-navbar-2']);

components/previews.php

@@ -20,7 +20,7 @@
           <time><span class="badge c-secondary small-text m-0"><?php the_time('d/m/Y') ?></span></time>
         </div>
       </div>
-      <div class="preview-excerpt" aria-excerpt="true"><?php the_excerpt(); ?></div>
+      <div class="preview-excerpt"><?php the_excerpt(); ?></div>
     </div>
   </a>
 <?php endwhile; ?>

header.php

@@ -15,7 +15,7 @@
 	<link rel="shortcut icon" href="<?php echo get_template_directory_uri();?>/img/favicon.png">
 
 	<!-- CSS -->
-	<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet"/>
+	<link href="<?php bloginfo('stylesheet_url'); ?>#f6532d3" rel="stylesheet"/>
 </head>
 
 <!-- Début du vrai HTML -->

scss/definitions/_palette.scss

@@ -28,16 +28,16 @@ $palette: (
   "light2":#e9ecef);
 
 $palette-light: (
-  "blue": #a5d8ff,
-  "violet":#d0bfff,
-  "red":#ffc9c9,
-  "orange":#ffd8a8,
-  "green":#b2f2bb,
-  "skyblue":#99e9f2,
-  "yellow":#ffec99,
+  "blue": #d0ebff,
+  "violet":#e5dbff,
+  "red":#ffe3e3,
+  "orange":#ffe8cc,
+  "green":#d3f9d8,
+  "skyblue":#c5f6fa,
+  "yellow":#fff3bf,
   "light":#ffffff,
-  "grey":#e9ecef,
-  "dark":#adb5bd
+  "grey":#f1f3f5,
+  "dark":#ced4da
 );
 
 $semantics: (

style.css

@@ -98,7 +98,7 @@ sup {
   --accent-color: #e03131;
   --text-color-contrast: #ffffff;
   --accent-color-hover: #cc1f1f;
-  --accent-color-soft: #ffc9c9;
+  --accent-color-soft: #ffe3e3;
   --text-color:#212529;
   --link-color-hover:rgba(33, 37, 41, 0.15);
   --link-color:#c11d1d; }
@@ -780,43 +780,43 @@ textarea {
   --accent-color: #e03131;
   --text-color-contrast: #ffffff;
   --accent-color-hover: #cc1f1f;
-  --accent-color-soft: #ffc9c9; }
+  --accent-color-soft: #ffe3e3; }
 
 .c-secondary {
   --accent-color: #343a40;
   --text-color-contrast: #ffffff;
   --accent-color-hover: #3d444b;
-  --accent-color-soft: #adb5bd; }
+  --accent-color-soft: #ced4da; }
 
 .c-warning {
   --accent-color: #e8590c;
   --text-color-contrast: #ffffff;
   --accent-color-hover: #c44b0a;
-  --accent-color-soft: #ffd8a8; }
+  --accent-color-soft: #ffe8cc; }
 
 .c-danger {
   --accent-color: #e03131;
   --text-color-contrast: #ffffff;
   --accent-color-hover: #cc1f1f;
-  --accent-color-soft: #ffc9c9; }
+  --accent-color-soft: #ffe3e3; }
 
 .c-info {
   --accent-color: #1971c2;
   --text-color-contrast: #ffffff;
   --accent-color-hover: #155da0;
-  --accent-color-soft: #a5d8ff; }
+  --accent-color-soft: #d0ebff; }
 
 .c-success {
   --accent-color: #2f9e44;
   --text-color-contrast: #ffffff;
   --accent-color-hover: #268137;
-  --accent-color-soft: #b2f2bb; }
+  --accent-color-soft: #d3f9d8; }
 
 .c-muted {
   --accent-color: #adb5bd;
   --text-color-contrast: #ffffff;
   --accent-color-hover: #98a2ac;
-  --accent-color-soft: #e9ecef; }
+  --accent-color-soft: #f1f3f5; }
 
 .c-light {
   --accent-color: #ffffff;
@@ -828,7 +828,7 @@ textarea {
   --accent-color: #343a40;
   --text-color-contrast: #ffffff;
   --accent-color-hover: #3d444b;
-  --accent-color-soft: #adb5bd; }
+  --accent-color-soft: #ced4da; }
 
 .bg-accent {
   background-color: var(--accent-color); }