quarante-douze/qdouze2-wordpress-theme
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

fix: correction accessibilités

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

31
components/article.php
View file

@ -5,6 +5,8 @@
<article class="article container-article mb-1" id="post-<?php the_ID(); ?>"> <article class="article container-article mb-1" id="post-<?php the_ID(); ?>">
<?php if ($haveTitle) { ?> <?php if ($haveTitle) { ?>
<h1 class="page-title"><?php the_title(); ?></h1> <h1 class="page-title"><?php the_title(); ?></h1>
<?php } else { ?>
<h1 class="sr-only"><?php the_title(); ?></h1>
<?php } ?> <?php } ?>
<div class="thumbnail mb-half" aria-hidden="true"> <div class="thumbnail mb-half" aria-hidden="true">
@ -14,21 +16,24 @@
<div class="article-entry"> <div class="article-entry">
<?php the_content(); ?> <?php the_content(); ?>
</div> </div>
</article>
<section class="card card-noheader article-meta"> <aside class="card card-noheader article-meta">
<div class="author-area"> <h2 class="sr-only">Métadonnées de l'article</h2>
<?php echo get_avatar( get_the_author_meta('user_email'), $size = '120'); ?> <div class="card-body">
<div class="author-metadata"> <div class="author-area">
<div class="author-pseudo">Écrit par <a href="https://kazhnuz.space"><?php the_author() ?></a></div> <?php echo get_avatar( get_the_author_meta('user_email'), $size = '120'); ?>
<small class="author-date">Le <?php the_time('l j F Y à H:i') ?></small> <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> </aside>
</article>
<div class="article-category">
<?php include(TEMPLATEPATH . '/components/article/terms.php'); ?>
</div>
</section>
<?php endwhile; ?> <?php endwhile; ?>
<?php endif; ?> <?php endif; ?>

16
components/article/terms.php
View file

@ -1,19 +1,29 @@
<h3 class="sr-only">Tags et catégories</h3>
<?php <?php
if (has_category('chapters')) { 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'); $romans = get_the_terms($post->ID, 'roman');
foreach( $romans as $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 { } else {
$categories = get_the_category(); $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 ) { 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(); $tags = get_the_tags();
if ($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 ) { 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>";
} }
?> ?>

45
components/footer-content.php
View file

@ -1,31 +1,36 @@
<footer class="bg-dark fg-light"> <footer class="bg-dark fg-light" aria-labelledby="title-footer">
<nav class="container menu toolbar bg-light fg-dark"> <h1 class="sr-only" id="title-footer">Informations sur le site</h1>
<ul class="f-end"> <nav class="container menu toolbar bg-light fg-dark" aria-labelledby="title-footer-social">
<?php <h2 class="sr-only" id="title-footer-social">Me suivre</h2>
$listmenu = get_nav_menu_locations(); <ul class="f-end">
$menu = wp_get_nav_menu_items($listmenu['social']); <?php
if ($menu != null) { $listmenu = get_nav_menu_locations();
foreach ($menu as $menuElement) { $menu = wp_get_nav_menu_items($listmenu['social']);
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> '; 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>
<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>
</ul> </nav>
</nav>
<div class="container columns"> <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>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> <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>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> <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> <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> </div>
</footer> </footer>

2
components/logo.php
View file

@ -1,3 +1,3 @@
<div class="logo-area"> <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> </div>

1
components/navbar-category.php
View file

@ -1,4 +1,5 @@
<nav class="container menu toolbar bg-light fg-dark categories d-none d-flex-sm"> <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"> <ul class="f-around">
<?php <?php
$categories = get_categories( array( $categories = get_categories( array(

35
components/navbar-pages.php
View file

@ -1,19 +1,22 @@
<div class="osd"> <div class="osd">
<nav class="container menu toolbar fg-light d-block d-flex-sm"> <div class="container menu toolbar fg-light d-block d-flex-sm">
<ul> <nav>
<li> <h2 class="sr-only">Menu des pages</h2>
<a href="<?php echo site_url(); ?>" class="menu-item"> <ul>
<i class="fa fa-home" aria-hidden="true"></i><span class="sr-only">Accueil</span> <li>
</a> <a href="<?php echo site_url(); ?>" class="menu-item">
</li> <i class="fa fa-home" aria-hidden="true"></i><span class="sr-only">Accueil</span>
<?php </a>
$listmenu = get_nav_menu_locations(); </li>
$menu = wp_get_nav_menu_items($listmenu['top-navbar']); <?php
foreach ($menu as $menuElement) { $listmenu = get_nav_menu_locations();
echo '<li><a href="' . $menuElement->url . '" class="menu-item">'. $menuElement->title . '</a></li>'; $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> }
?>
</ul>
</nav>
<ul class="f-end d-none d-flex-sm"> <ul class="f-end d-none d-flex-sm">
<?php <?php
@ -25,5 +28,5 @@
?> ?>
<li class="f-column f-center"><?php include(TEMPLATEPATH . '/components/searchform.php'); ?></li> <li class="f-column f-center"><?php include(TEMPLATEPATH . '/components/searchform.php'); ?></li>
</ul> </ul>
</nav> </div>
</div> </div>

2
components/searchform.php
View file

@ -1,5 +1,5 @@
<form method="get" id="searchform" action="<?php bloginfo('home'); ?>/"> <form method="get" id="searchform" action="<?php bloginfo('home'); ?>/">
<div> <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> </div>
</form> </form>

6
components/sidebar/archives.php
View file

@ -1,8 +1,8 @@
<div class="card head-secondary"> <section class="card head-secondary">
<div class="card-header"><i class="fa fa-folder" aria-hidden="true"></i> Archives</div> <h2 class="card-header"><i class="fa fa-folder" aria-hidden="true"></i> Archives</h2>
<div class="card-body"> <div class="card-body">
<ul class="tag-list"> <ul class="tag-list">
<?php wp_get_archives('type=yearly&format=html&show_post_count=0'); ?> <?php wp_get_archives('type=yearly&format=html&show_post_count=0'); ?>
</ul> </ul>
</div> </div>
</div> </section>

6
components/sidebar/categories.php
View file

@ -1,5 +1,5 @@
<div class="card head-secondary"> <section class="card head-secondary">
<div class="card-header"><i class="fa fa-folder" aria-hidden="true"></i> Catégories</div> <h2 class="card-header"><i class="fa fa-folder" aria-hidden="true"></i> Catégories</h2>
<div class="menu fg-dark"> <div class="menu fg-dark">
<ul> <ul>
<?php <?php
@ -15,4 +15,4 @@
}?> }?>
</ul> </ul>
</div> </div>
</div> </section>

6
components/sidebar/last-articles.php
View file

@ -1,5 +1,5 @@
<div class="card head-secondary"> <section class="card head-secondary">
<div class="card-header"><i class="fa fa-rss" aria-hidden="true"></i> Publications</div> <h2 class="card-header"><i class="fa fa-rss" aria-hidden="true"></i> Publications</h2>
<div class="menu fg-dark"> <div class="menu fg-dark">
<ul> <ul>
<?php <?php
@ -12,4 +12,4 @@
?> ?>
</ul> </ul>
</div> </div>
</div> </section>

6
components/sidebar/links.php
View file

@ -3,8 +3,8 @@ $listmenu = get_nav_menu_locations();
$menu = wp_get_nav_menu_items($listmenu['link-menu']); $menu = wp_get_nav_menu_items($listmenu['link-menu']);
if ($menu != null) { if ($menu != null) {
?> ?>
<div class="card head-secondary"> <section class="card head-secondary">
<div class="card-header"><i class="fa fa-link" aria-hidden="true"></i> Liens</div> <h2 class="card-header"><i class="fa fa-link" aria-hidden="true"></i> Liens</h2>
<ul class="card-menu"> <ul class="card-menu">
<?php <?php
$menu = wp_get_nav_menu_items( 'link-menu'); $menu = wp_get_nav_menu_items( 'link-menu');
@ -13,7 +13,7 @@ if ($menu != null) {
} }
?> ?>
</ul> </ul>
</div> </section>
<?php <?php
} }
?> ?>

6
components/sidebar/tags.php
View file

@ -9,8 +9,8 @@ $tags = get_tags($args);
?> ?>
<div class="card head-secondary"> <section class="card head-secondary">
<div class="card-header"><i class="fa fa-tags" aria-hidden="true"></i> Tags</div> <h2 class="card-header"><i class="fa fa-tags" aria-hidden="true"></i> Tags</h2>
<div class="card-body"> <div class="card-body">
<ul class="tag-list"> <ul class="tag-list">
<?php foreach ($tags as $tag) {?> <?php foreach ($tags as $tag) {?>
@ -18,4 +18,4 @@ $tags = get_tags($args);
<?php } ?> <?php } ?>
</ul> </ul>
</div> </div>
</div> </section>

16
home.php
View file

@ -6,16 +6,21 @@
<?php if ( !is_paged() ) { <?php if ( !is_paged() ) {
$page = get_page_by_path( 'home' ); $page = get_page_by_path( 'home' );
if ($page != null) { 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 '<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'); 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> <section aria-labelledby="title-publications">
<?php include(TEMPLATEPATH . '/components/preview-grid.php'); ?> <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() ) { <?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 <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"> <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"> <ul class="f-around">
<?php <?php
$categories = get_categories( array( $categories = get_categories( array(

12
scss/core/_typography.scss
View file

@ -87,6 +87,18 @@ ul, ol {
margin-left: $lineheight; margin-left: $lineheight;
line-height: $lineheight; line-height: $lineheight;
} }
&.nolist {
display:inline;
list-style: none;
margin: 0;
padding: 0;
li {
display: inline;
margin: 0;
padding: 0;
}
}
} }
::selection, ::-moz-selection { ::selection, ::-moz-selection {

3
scss/mixins/_panels.scss
View file

@ -9,7 +9,8 @@
& > * { & > * {
margin-left: $size / 2; margin-left: $size / 2;
margin-right: $size / 2; margin-right: $size / 2;
&:first-child { &:first-child,
&.sr-only:first-child ~ * {
margin-top: $size; margin-top: $size;
&.card-header { &.card-header {
margin-top:$card-header-vmargin; margin-top:$card-header-vmargin;

3
sidebar.php
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'); ?> <?php include(TEMPLATEPATH . '/components/sidebar-content.php'); ?>
</aside> </aside>

17
style.css
View file

@ -439,6 +439,15 @@ ul, ol {
margin: 0; margin: 0;
margin-left: 1.6rem; margin-left: 1.6rem;
line-height: 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 { ::selection, ::-moz-selection {
background-color: #339af0; background-color: #339af0;
@ -1263,9 +1272,9 @@ nav.pagination {
.card > * { .card > * {
margin-left: 0.8rem; margin-left: 0.8rem;
margin-right: 0.8rem; } margin-right: 0.8rem; }
.card > *:first-child { .card > *:first-child, .card > *.sr-only:first-child ~ * {
margin-top: 1.6rem; } margin-top: 1.6rem; }
.card > *:first-child.card-header { .card > *:first-child.card-header, .card > *.sr-only:first-child ~ *.card-header {
margin-top: 0px; } margin-top: 0px; }
.card > *:last-child { .card > *:last-child {
margin-bottom: 1.6rem; } margin-bottom: 1.6rem; }
@ -1470,9 +1479,9 @@ ul.card-list, .card > ul {
.toast > * { .toast > * {
margin-left: 0.4rem; margin-left: 0.4rem;
margin-right: 0.4rem; } margin-right: 0.4rem; }
.toast > *:first-child { .toast > *:first-child, .toast > *.sr-only:first-child ~ * {
margin-top: 0.8rem; } margin-top: 0.8rem; }
.toast > *:first-child.card-header { .toast > *:first-child.card-header, .toast > *.sr-only:first-child ~ *.card-header {
margin-top: 0px; } margin-top: 0px; }
.toast > *:last-child { .toast > *:last-child {
margin-bottom: 0.8rem; } margin-bottom: 0.8rem; }

8
taxonomy-roman.php
View file

@ -5,8 +5,8 @@
<img class="cover" src="<?php <img class="cover" src="<?php
$term_meta = get_option( "taxonomy_term_$tag_id" ); $term_meta = get_option( "taxonomy_term_$tag_id" );
echo $term_meta['cover']; echo $term_meta['cover'];
?>"> ?>" alt="">
<div class="roman"> <article class="roman">
<div class="card"> <div class="card">
<h1><?php echo single_cat_title(); ?></h1> <h1><?php echo single_cat_title(); ?></h1>
<div class="card-body"> <div class="card-body">
@ -30,7 +30,7 @@
?> ?>
<div class="card head-primary"> <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"> <div class="card-menu">
<?php if($query->have_posts()) : ?> <?php if($query->have_posts()) : ?>
<?php $i = 1; ?> <?php $i = 1; ?>
@ -49,7 +49,7 @@
</div> </div>
</div> </div>
</div> </article>
</main> </main>
<?php get_sidebar(); ?> <?php get_sidebar(); ?>
<?php get_footer(); ?> <?php get_footer(); ?>