From bc91a1349363d0d6e5aacc72f8dd4c3f0679a7ad Mon Sep 17 00:00:00 2001
From: Kazhnuz <kazhnuz@kobold.cafe>
Date: Tue, 2 May 2023 09:23:01 +0200
Subject: [PATCH] =?UTF-8?q?fix:=20correction=20accessibilit=C3=A9s?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes #3
Fixes #4
---
 components/article.php               | 31 +++++++++++--------
 components/article/terms.php         | 16 ++++++++--
 components/footer-content.php        | 45 +++++++++++++++-------------
 components/logo.php                  |  2 +-
 components/navbar-category.php       |  1 +
 components/navbar-pages.php          | 35 ++++++++++++----------
 components/searchform.php            |  2 +-
 components/sidebar/archives.php      |  6 ++--
 components/sidebar/categories.php    |  6 ++--
 components/sidebar/last-articles.php |  6 ++--
 components/sidebar/links.php         |  6 ++--
 components/sidebar/tags.php          |  6 ++--
 home.php                             | 16 ++++++----
 scss/core/_typography.scss           | 12 ++++++++
 scss/mixins/_panels.scss             |  3 +-
 sidebar.php                          |  3 +-
 style.css                            | 17 ++++++++---
 taxonomy-roman.php                   |  8 ++---
 18 files changed, 137 insertions(+), 84 deletions(-)

diff --git a/components/article.php b/components/article.php
index a959f62..deaf252 100644
--- a/components/article.php
+++ b/components/article.php
@@ -5,6 +5,8 @@
 <article class="article container-article mb-1" id="post-<?php the_ID(); ?>">
   <?php if ($haveTitle) { ?>
     <h1 class="page-title"><?php the_title(); ?></h1>
+  <?php } else { ?>
+    <h1 class="sr-only"><?php the_title(); ?></h1>
   <?php } ?>
 
   <div class="thumbnail mb-half" aria-hidden="true">
@@ -14,21 +16,24 @@
   <div class="article-entry">
     <?php the_content(); ?>
   </div>
-</article>
 
-<section class="card card-noheader article-meta">
-  <div class="author-area">
-    <?php echo get_avatar( get_the_author_meta('user_email'), $size = '120'); ?>
-    <div class="author-metadata">
-      <div class="author-pseudo">Écrit par <a href="https://kazhnuz.space"><?php the_author() ?></a></div>
-      <small class="author-date">Le <?php the_time('l j F Y à H:i') ?></small>
+  <aside class="card card-noheader article-meta">
+    <h2 class="sr-only">Métadonnées de l'article</h2>
+    <div class="card-body">
+      <div class="author-area">
+        <?php echo get_avatar( get_the_author_meta('user_email'), $size = '120'); ?>
+        <div class="author-metadata">
+          <div class="author-pseudo">Écrit par <a href="https://kazhnuz.space"><?php the_author() ?></a></div>
+          <small class="author-date">Le <?php the_time('l j F Y à H:i') ?></small>
+        </div>
+      </div>
+
+      <div class="article-category">
+        <?php include(TEMPLATEPATH . '/components/article/terms.php'); ?>
+      </div>
     </div>
-  </div>
-
-  <div class="article-category">
-    <?php include(TEMPLATEPATH . '/components/article/terms.php'); ?>
-  </div>
-</section>
+  </aside>
+</article>
 
 <?php endwhile; ?>
 <?php endif; ?>
diff --git a/components/article/terms.php b/components/article/terms.php
index f997392..bac3f8a 100644
--- a/components/article/terms.php
+++ b/components/article/terms.php
@@ -1,19 +1,29 @@
+<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>';
     $romans = get_the_terms($post->ID, 'roman');
     foreach( $romans as $roman ) {
-      echo "<a href= '" . esc_url( get_category_link( $roman->term_id ) ) . "' class='badge btn-primary'><i class='fa fa-book'></i>&nbsp;" . $roman->name . "</a>";
+      echo "<li><a href= '" . esc_url( get_category_link( $roman->term_id ) ) . "' class='badge btn-primary'><i class='fa fa-book'></i>&nbsp;" . $roman->name . "</a></li>";
     }
+    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>';
     foreach( $categories as $category ) {
-      echo "<a href= '" . esc_url( get_category_link( $category->term_id ) ) . "' class='badge btn-primary'><i class='fa fa-folder'></i>&nbsp;" . $category->cat_name . "</a>";
+      echo "<li><a href= '" . esc_url( get_category_link( $category->term_id ) ) . "' class='badge btn-primary'><i class='fa fa-folder'></i>&nbsp;" . $category->cat_name . "</a></li>";
     }
+    echo "</ul>";
   }
   $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>';
     foreach( $tags as $tag ) {
-      echo "<a href= '" . esc_url( get_tag_link( $tag->term_id ) ) . "' class='badge btn-secondary'><i class='fa fa-tag'></i>&nbsp;" . $tag->name . "</a> ";
+      echo "<li><a href= '" . esc_url( get_tag_link( $tag->term_id ) ) . "' class='badge btn-secondary'><i class='fa fa-tag'></i>&nbsp;" . $tag->name . "</a></li>";
     }
+    echo "</ul>";
   }
 ?>
diff --git a/components/footer-content.php b/components/footer-content.php
index 827b154..f4a6cd9 100644
--- a/components/footer-content.php
+++ b/components/footer-content.php
@@ -1,31 +1,36 @@
-<footer class="bg-dark fg-light">
-  <nav class="container menu toolbar bg-light fg-dark">
-  <ul class="f-end">
-    <?php
-      $listmenu = get_nav_menu_locations();
-      $menu = wp_get_nav_menu_items($listmenu['social']);
-      if ($menu != null) {
-        foreach ($menu as $menuElement) {
-          echo '<li><a class="menu-item" href="'. $menuElement->url .'" title="Accéder à mon '.$menuElement->title.'" aria-label="Accéder à mon '.$menuElement->title.'"><i class="fa fa-fw fa-'.$menuElement->title.'" aria-hidden="true"></i></a></li> ';
+<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-light fg-dark" aria-labelledby="title-footer-social">
+    <h2 class="sr-only" id="title-footer-social">Me suivre</h2>
+    <ul class="f-end">
+      <?php
+        $listmenu = get_nav_menu_locations();
+        $menu = wp_get_nav_menu_items($listmenu['social']);
+        if ($menu != null) {
+          foreach ($menu as $menuElement) {
+            echo '<li><a class="menu-item" href="'. $menuElement->url .'"><i class="fa fa-fw fa-'.$menuElement->title.'" aria-hidden="true"></i><span class="sr-only">Accéder à mon '.$menuElement->title.'</span></a></li> ';
+          }
         }
-      }
-    ?>
-    <li><a href="<?php bloginfo('rss2_url'); ?>" class="menu-item"><i class="fa fa-rss"  aria-hidden="true"></i><span class="sr-only">Flux RSS du site</span></a></li>
-  </ul>
-</nav>
+      ?>
+      <li><a href="<?php bloginfo('rss2_url'); ?>" class="menu-item"><i class="fa fa-rss"  aria-hidden="true"></i><span class="sr-only">Flux RSS du site</span></a></li>
+    </ul>
+  </nav>
   <div class="container columns">
-    <div class="col-12 col-md-4">
+    <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>
       <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 ! <i class="text-red fa fa-heart" aria-hidden="true"></i></p>
-    </div>
+    </section>
 
-    <div class="col-12 col-md-4">
+    <section class="col-12 col-md-4" aria-labelledby="title-footer-section-2">
+      <h2 class="sr-only" id="title-footer-section-2">Crédits</h2>
       <p>Ce site est propulsé par <a href="https://wordpress.org">Wordpress</a></p>
       <p>Le <a href="https://git.kobold.cafe/quarante-douze/qdouze2-wordpress-theme">theme wordpress</a> de ce site est disponible sous licence CC BY-SA et GPL v3. Il utilise <a href="https://picturepan2.github.io/spectre/">Spectre</a> et <a href="https://forkawesome.github.io/Fork-Awesome/">Fork-Awesome</a>.</p>
-    </div>
+    </section>
 
-    <div class="col-12 col-md-4">
+    <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>
-    </div>
+    </section>
   </div>
 </footer>
diff --git a/components/logo.php b/components/logo.php
index 9093918..7437f29 100644
--- a/components/logo.php
+++ b/components/logo.php
@@ -1,3 +1,3 @@
 <div class="logo-area">
-    <h1><a href="<?php echo site_url(); ?>"><img src="<?php echo get_template_directory_uri();?>/img/logo.png" alt="Kazhnuz"/></a></h1>
+    <h1><a href="<?php echo site_url(); ?>"><img src="<?php echo get_template_directory_uri();?>/img/logo.png" alt="<?php echo get_bloginfo( 'name' ); ?>"/></a></h1>
 </div>
diff --git a/components/navbar-category.php b/components/navbar-category.php
index 3d5d444..79fadf9 100644
--- a/components/navbar-category.php
+++ b/components/navbar-category.php
@@ -1,4 +1,5 @@
 <nav class="container menu toolbar bg-light fg-dark categories d-none d-flex-sm">
+  <h2 class="sr-only">Liste des catégories</h2>
   <ul class="f-around">
     <?php
       $categories = get_categories( array(
diff --git a/components/navbar-pages.php b/components/navbar-pages.php
index 1b13239..7a6efd6 100644
--- a/components/navbar-pages.php
+++ b/components/navbar-pages.php
@@ -1,19 +1,22 @@
 <div class="osd">
-  <nav class="container menu toolbar fg-light d-block d-flex-sm">
-    <ul>
-      <li>
-        <a href="<?php echo site_url(); ?>" class="menu-item">
-          <i class="fa fa-home"  aria-hidden="true"></i><span class="sr-only">Accueil</span>
-        </a>
-      </li>
-      <?php
-        $listmenu = get_nav_menu_locations();
-        $menu = wp_get_nav_menu_items($listmenu['top-navbar']);
-          foreach ($menu as $menuElement) {
-            echo '<li><a href="' . $menuElement->url . '" class="menu-item">'. $menuElement->title . '</a></li>';
-          }
-        ?>
-    </ul>
+  <div class="container menu toolbar fg-light d-block d-flex-sm">
+    <nav>
+      <h2 class="sr-only">Menu des pages</h2>
+      <ul>
+        <li>
+          <a href="<?php echo site_url(); ?>" class="menu-item">
+            <i class="fa fa-home"  aria-hidden="true"></i><span class="sr-only">Accueil</span>
+          </a>
+        </li>
+        <?php
+          $listmenu = get_nav_menu_locations();
+          $menu = wp_get_nav_menu_items($listmenu['top-navbar']);
+            foreach ($menu as $menuElement) {
+              echo '<li><a href="' . $menuElement->url . '" class="menu-item">'. $menuElement->title . '</a></li>';
+            }
+          ?>
+      </ul>
+    </nav>
 
     <ul class="f-end d-none d-flex-sm">
       <?php
@@ -25,5 +28,5 @@
         ?>
       <li class="f-column f-center"><?php include(TEMPLATEPATH . '/components/searchform.php'); ?></li>
     </ul>
-  </nav>
+  </div>
 </div>
diff --git a/components/searchform.php b/components/searchform.php
index f8d44e9..79cde27 100644
--- a/components/searchform.php
+++ b/components/searchform.php
@@ -1,5 +1,5 @@
 <form method="get" id="searchform" action="<?php bloginfo('home'); ?>/">
 	<div>
-		<input class="form-control" type="search" placeholder="Chercher" aria-label="Chercher" value="<?php the_search_query(); ?>" name="s" id="s" />
+		<input class="form-control" type="search" placeholder="Chercher sur le site" aria-label="Chercher sur le site" value="<?php the_search_query(); ?>" name="s" id="s" />
 	</div>
 </form>
diff --git a/components/sidebar/archives.php b/components/sidebar/archives.php
index 7cf1acc..11f7ecc 100644
--- a/components/sidebar/archives.php
+++ b/components/sidebar/archives.php
@@ -1,8 +1,8 @@
-<div class="card head-secondary">
-  <div class="card-header"><i class="fa fa-folder" aria-hidden="true"></i> Archives</div>
+<section class="card head-secondary">
+  <h2 class="card-header"><i class="fa fa-folder" aria-hidden="true"></i> Archives</h2>
   <div class="card-body">
     <ul class="tag-list">
       <?php wp_get_archives('type=yearly&format=html&show_post_count=0'); ?>
     </ul>
   </div>
-</div>
+</section>
diff --git a/components/sidebar/categories.php b/components/sidebar/categories.php
index 44fcb82..b223aa8 100644
--- a/components/sidebar/categories.php
+++ b/components/sidebar/categories.php
@@ -1,5 +1,5 @@
-<div class="card head-secondary">
-  <div class="card-header"><i class="fa fa-folder" aria-hidden="true"></i> Catégories</div>
+<section class="card head-secondary">
+  <h2 class="card-header"><i class="fa fa-folder" aria-hidden="true"></i> Catégories</h2>
   <div class="menu fg-dark">
     <ul>
       <?php
@@ -15,4 +15,4 @@
         }?>
     </ul>
   </div>
-</div>
+</section>
diff --git a/components/sidebar/last-articles.php b/components/sidebar/last-articles.php
index 07d9372..fad7310 100644
--- a/components/sidebar/last-articles.php
+++ b/components/sidebar/last-articles.php
@@ -1,5 +1,5 @@
-<div class="card head-secondary">
-  <div class="card-header"><i class="fa fa-rss" aria-hidden="true"></i> Publications</div>
+<section class="card head-secondary">
+  <h2 class="card-header"><i class="fa fa-rss" aria-hidden="true"></i> Publications</h2>
   <div class="menu fg-dark">
     <ul>
     <?php
@@ -12,4 +12,4 @@
       ?>
     </ul>
   </div>
-</div>
+</section>
diff --git a/components/sidebar/links.php b/components/sidebar/links.php
index 8df3a98..0e82b1d 100644
--- a/components/sidebar/links.php
+++ b/components/sidebar/links.php
@@ -3,8 +3,8 @@ $listmenu = get_nav_menu_locations();
 $menu = wp_get_nav_menu_items($listmenu['link-menu']);
 if ($menu != null) {
 ?>
-<div class="card head-secondary">
-  <div class="card-header"><i class="fa fa-link"  aria-hidden="true"></i> Liens</div>
+<section class="card head-secondary">
+  <h2 class="card-header"><i class="fa fa-link"  aria-hidden="true"></i> Liens</h2>
   <ul class="card-menu">
     <?php
       $menu = wp_get_nav_menu_items( 'link-menu');
@@ -13,7 +13,7 @@ if ($menu != null) {
         }
       ?>
   </ul>
-</div>
+</section>
 <?php
 }
 ?>
diff --git a/components/sidebar/tags.php b/components/sidebar/tags.php
index ca80356..98c12b3 100644
--- a/components/sidebar/tags.php
+++ b/components/sidebar/tags.php
@@ -9,8 +9,8 @@ $tags = get_tags($args);
 
 ?>
 
-<div class="card head-secondary">
-  <div class="card-header"><i class="fa fa-tags" aria-hidden="true"></i> Tags</div>
+<section class="card head-secondary">
+  <h2 class="card-header"><i class="fa fa-tags" aria-hidden="true"></i> Tags</h2>
   <div class="card-body">
     <ul class="tag-list">
       <?php foreach ($tags as $tag) {?>
@@ -18,4 +18,4 @@ $tags = get_tags($args);
       <?php } ?>
     </ul>
   </div>
-</div>
+</section>
diff --git a/home.php b/home.php
index 74b3003..61c145f 100644
--- a/home.php
+++ b/home.php
@@ -6,16 +6,21 @@
   <?php if ( !is_paged() ) {
     $page = get_page_by_path( 'home' );
       if ($page != null) {
-        echo '<h1 class="page-title">' . get_the_title( $page ) . '</h1>';
+        echo '<section aria-labelledby="title-description">';
+        echo '<h1 class="page-title" id="title-description">' . get_the_title( $page ) . '</h1>';
         echo '<div>' . $page->post_content . '</div>';
+        echo '</section>';
       }
-      echo '<h1 class="page-title"><i class="fa fa-fw fa-star" aria-hidden="true"></i> À la une</h1>';
+      echo '<section aria-labelledby="title-featured">';
+      echo '<h1 class="page-title" id="title-featured"><i class="fa fa-fw fa-star" aria-hidden="true"></i> À la une</h1>';
       include(TEMPLATEPATH . '/components/featured.php');
+      echo '</section>';
     }
   ?>
-  <h1 class="page-title"><i class="fa fa-fw fa-clock-o" aria-hidden="true"></i> Publications</h1>
-	<?php include(TEMPLATEPATH . '/components/preview-grid.php'); ?>
-
+  <section aria-labelledby="title-publications">
+    <h1 class="page-title" id="title-publications"><i class="fa fa-fw fa-clock-o" aria-hidden="true"></i> Publications</h1>
+    <?php include(TEMPLATEPATH . '/components/preview-grid.php'); ?>
+  </section>
     <?php if ( !is_paged() ) {
       ?>
         <div class="toast mb-1 bg-blue home-toast"><strong class="m-0"><i class="fa fa-fw fa-info"></i> Note :</strong>  Si vous êtes intéressé pour découvrir plus
@@ -26,6 +31,7 @@
   ?>
 
   <nav class="container menu bg-light fg-dark categories d-block d-none-sm">
+  <h1 class="sr-only">Menu des catégories</h1>
   <ul class="f-around">
     <?php
       $categories = get_categories( array(
diff --git a/scss/core/_typography.scss b/scss/core/_typography.scss
index 7d466b7..397eac4 100644
--- a/scss/core/_typography.scss
+++ b/scss/core/_typography.scss
@@ -87,6 +87,18 @@ ul, ol {
     margin-left: $lineheight;
     line-height: $lineheight;
   }
+
+  &.nolist {
+    display:inline;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    li {
+      display: inline;
+      margin: 0;
+      padding: 0;
+    }
+  }
 }
 
 ::selection, ::-moz-selection {
diff --git a/scss/mixins/_panels.scss b/scss/mixins/_panels.scss
index be05fdb..a9cb999 100644
--- a/scss/mixins/_panels.scss
+++ b/scss/mixins/_panels.scss
@@ -9,7 +9,8 @@
     & > * {
       margin-left: $size / 2;
       margin-right: $size / 2;
-      &:first-child {
+      &:first-child,
+      &.sr-only:first-child ~ * {
         margin-top: $size;
         &.card-header {
           margin-top:$card-header-vmargin;
diff --git a/sidebar.php b/sidebar.php
index 251e9de..b003bb4 100644
--- a/sidebar.php
+++ b/sidebar.php
@@ -1,3 +1,4 @@
-<aside class="sidebar">
+<aside class="sidebar" aria-labelledby="title-sidebar">
+  <h1 class="sr-only" id="title-sidebar">Menu de navigation</h1>
   <?php include(TEMPLATEPATH . '/components/sidebar-content.php'); ?>
 </aside>
diff --git a/style.css b/style.css
index d87b38e..52c404f 100644
--- a/style.css
+++ b/style.css
@@ -439,6 +439,15 @@ ul, ol {
     margin: 0;
     margin-left: 1.6rem;
     line-height: 1.6rem; }
+  ul.nolist, ol.nolist {
+    display: inline;
+    list-style: none;
+    margin: 0;
+    padding: 0; }
+    ul.nolist li, ol.nolist li {
+      display: inline;
+      margin: 0;
+      padding: 0; }
 
 ::selection, ::-moz-selection {
   background-color: #339af0;
@@ -1263,9 +1272,9 @@ nav.pagination {
   .card > * {
     margin-left: 0.8rem;
     margin-right: 0.8rem; }
-    .card > *:first-child {
+    .card > *:first-child, .card > *.sr-only:first-child ~ * {
       margin-top: 1.6rem; }
-      .card > *:first-child.card-header {
+      .card > *:first-child.card-header, .card > *.sr-only:first-child ~ *.card-header {
         margin-top: 0px; }
     .card > *:last-child {
       margin-bottom: 1.6rem; }
@@ -1470,9 +1479,9 @@ ul.card-list, .card > ul {
   .toast > * {
     margin-left: 0.4rem;
     margin-right: 0.4rem; }
-    .toast > *:first-child {
+    .toast > *:first-child, .toast > *.sr-only:first-child ~ * {
       margin-top: 0.8rem; }
-      .toast > *:first-child.card-header {
+      .toast > *:first-child.card-header, .toast > *.sr-only:first-child ~ *.card-header {
         margin-top: 0px; }
     .toast > *:last-child {
       margin-bottom: 0.8rem; }
diff --git a/taxonomy-roman.php b/taxonomy-roman.php
index eeedcaa..ad2202c 100644
--- a/taxonomy-roman.php
+++ b/taxonomy-roman.php
@@ -5,8 +5,8 @@
     <img class="cover" src="<?php
     $term_meta = get_option( "taxonomy_term_$tag_id" );
     echo $term_meta['cover'];
-     ?>">
-		<div class="roman">
+     ?>" alt="">
+		<article class="roman">
 	    <div class="card">
 				<h1><?php echo single_cat_title(); ?></h1>
 				<div class="card-body">
@@ -30,7 +30,7 @@
       ?>
 
 			<div class="card head-primary">
-			  <div class="card-header"><i class="fa fa-list" aria-hidden="true"></i> Chapitres</div>
+			  <h2 class="card-header"><i class="fa fa-list" aria-hidden="true"></i> Chapitres</h2>
 			  <div class="card-menu">
           <?php if($query->have_posts()) : ?>
             <?php $i = 1; ?>
@@ -49,7 +49,7 @@
 			  </div>
 			</div>
 
-		</div>
+		</article>
 </main>
 <?php get_sidebar(); ?>
 <?php get_footer(); ?>