fix: correction accessibilités

Fixes #3
Fixes #4
This commit is contained in:
Kazhnuz 2023-05-02 09:23:01 +02:00
parent fbb85ad5aa
commit bc91a13493
18 changed files with 137 additions and 84 deletions

View file

@ -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; ?>

View file

@ -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>";
}
?>

View file

@ -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>

View file

@ -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>

View file

@ -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(

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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
}
?>

View file

@ -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>

View file

@ -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(

View file

@ -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 {

View file

@ -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;

View file

@ -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>

View file

@ -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; }

View file

@ -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(); ?>