feat: add accessibility
This commit is contained in:
+34
-22
@@ -1,38 +1,50 @@
|
||||
<!-- Header avec barre de recherche et icônes -->
|
||||
<div class="header">
|
||||
<header class="header" role="banner">
|
||||
<div class="search-container">
|
||||
<form action="recherche.php" method="get">
|
||||
<input type="text" name="q" placeholder="Rechercher...">
|
||||
<button type="submit"><i class="fas fa-search"></i></button>
|
||||
<form action="recherche.php" method="get" role="search" aria-label="Recherche de vidéos">
|
||||
<label for="search-input" class="sr-only">Rechercher des vidéos</label>
|
||||
<input type="text" id="search-input" name="q" placeholder="Rechercher..." aria-describedby="search-help">
|
||||
<button type="submit" aria-label="Lancer la recherche">
|
||||
<i class="fas fa-search" aria-hidden="true"></i>
|
||||
</button>
|
||||
<div id="search-help" class="sr-only">Tapez vos mots-clés pour rechercher des vidéos</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="social-icons">
|
||||
<a target="_blank" rel="me noreferrer" href="<?php echo MASTODON_URL; ?>" class="icon-button"><i class="fab fa-mastodon icon-mastodon"></i></a>
|
||||
<a target="_blank" rel="noreferrer" href="<?php echo INSTAGRAM_URL; ?>" class="icon-button"><i class="fab fa-instagram icon-instagram"></i></a>
|
||||
<a target="_blank" rel="noreferrer" href="<?php echo TIKTOK_URL; ?>" class="icon-button"><i class="fab fa-tiktok icon-tiktok"></i></a>
|
||||
<nav class="social-icons" aria-label="Réseaux sociaux">
|
||||
<a target="_blank" rel="me noreferrer" href="<?php echo MASTODON_URL; ?>" class="icon-button" aria-label="Suivre sur Mastodon">
|
||||
<i class="fab fa-mastodon icon-mastodon" aria-hidden="true"></i>
|
||||
</a>
|
||||
<a target="_blank" rel="noreferrer" href="<?php echo INSTAGRAM_URL; ?>" class="icon-button" aria-label="Suivre sur Instagram">
|
||||
<i class="fab fa-instagram icon-instagram" aria-hidden="true"></i>
|
||||
</a>
|
||||
<a target="_blank" rel="noreferrer" href="<?php echo TIKTOK_URL; ?>" class="icon-button" aria-label="Suivre sur TikTok">
|
||||
<i class="fab fa-tiktok icon-tiktok" aria-hidden="true"></i>
|
||||
</a>
|
||||
<div class="more-social-container">
|
||||
<a href="#" class="icon-button more-social-toggle"><i class="fas fa-ellipsis-h"></i></a>
|
||||
<div class="more-social-dropdown">
|
||||
<a target="_blank" rel="noreferrer" href="<?php echo FACEBOOK_URL; ?>" class="more-social-item">
|
||||
<i class="fab fa-facebook icon-facebook"></i> Facebook
|
||||
<button type="button" class="icon-button more-social-toggle" aria-expanded="false" aria-controls="social-dropdown" aria-label="Voir plus de réseaux sociaux">
|
||||
<i class="fas fa-ellipsis-h" aria-hidden="true"></i>
|
||||
</button>
|
||||
<div id="social-dropdown" class="more-social-dropdown" role="menu">
|
||||
<a target="_blank" rel="noreferrer" href="<?php echo FACEBOOK_URL; ?>" class="more-social-item" role="menuitem">
|
||||
<i class="fab fa-facebook icon-facebook" aria-hidden="true"></i> Facebook
|
||||
</a>
|
||||
<a target="_blank" rel="noreferrer" href="<?php echo YOUTUBE_URL; ?>" class="more-social-item">
|
||||
<i class="fab fa-youtube icon-youtube"></i> YouTube
|
||||
<a target="_blank" rel="noreferrer" href="<?php echo YOUTUBE_URL; ?>" class="more-social-item" role="menuitem">
|
||||
<i class="fab fa-youtube icon-youtube" aria-hidden="true"></i> YouTube
|
||||
</a>
|
||||
<a target="_blank" rel="noreferrer" href="<?php echo X_URL; ?>" class="more-social-item">
|
||||
<i class="fab fa-x-twitter icon-x"></i> X
|
||||
<a target="_blank" rel="noreferrer" href="<?php echo X_URL; ?>" class="more-social-item" role="menuitem">
|
||||
<i class="fab fa-x-twitter icon-x" aria-hidden="true"></i> X
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="action-icons">
|
||||
<button id="install-pwa" class="icon-button install-pwa-button" style="display: none;" title="Installer l'application">
|
||||
<i class="fas fa-download"></i>
|
||||
<button id="install-pwa" class="icon-button install-pwa-button" style="display: none;" aria-label="Installer l'application">
|
||||
<i class="fas fa-download" aria-hidden="true"></i>
|
||||
</button>
|
||||
<button class="mobile-menu-toggle">
|
||||
<i class="fas fa-bars"></i>
|
||||
<button class="mobile-menu-toggle" aria-expanded="false" aria-controls="mobile-menu" aria-label="Ouvrir le menu de navigation">
|
||||
<i class="fas fa-bars" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
+16
-16
@@ -1,7 +1,7 @@
|
||||
<!-- Sidebar de navigation -->
|
||||
<div class="sidebar">
|
||||
<a href="/" class="logo">
|
||||
<img src="img/logo.png" alt="kaubuntu.re">
|
||||
<nav class="sidebar" role="navigation" aria-label="Navigation principale">
|
||||
<a href="/" class="logo" aria-label="Retour à l'accueil">
|
||||
<img src="img/logo.png" alt="Logo kaubuntu.re">
|
||||
</a>
|
||||
|
||||
<?php
|
||||
@@ -13,12 +13,12 @@
|
||||
$currentTag = $isTagSearch ? substr($currentQuery, 1) : '';
|
||||
?>
|
||||
|
||||
<nav class="sidebar-nav">
|
||||
<a href="/" class="nav-item <?php echo ($currentPage === 'index.php') ? 'active' : ''; ?>" data-title="Accueil">
|
||||
<i class="fas fa-home"></i> <span>Accueil</span>
|
||||
<div class="sidebar-nav">
|
||||
<a href="/" class="nav-item <?php echo ($currentPage === 'index.php') ? 'active' : ''; ?>" data-title="Accueil" aria-current="<?php echo ($currentPage === 'index.php') ? 'page' : 'false'; ?>">
|
||||
<i class="fas fa-home" aria-hidden="true"></i> <span>Accueil</span>
|
||||
</a>
|
||||
<a href="direct.php" class="nav-item <?php echo ($currentPage === 'direct.php') ? 'active' : ''; ?>" data-title="Direct">
|
||||
<i class="fas fa-broadcast-tower"></i> <span>Direct</span>
|
||||
<a href="direct.php" class="nav-item <?php echo ($currentPage === 'direct.php') ? 'active' : ''; ?>" data-title="Direct" aria-current="<?php echo ($currentPage === 'direct.php') ? 'page' : 'false'; ?>">
|
||||
<i class="fas fa-broadcast-tower" aria-hidden="true"></i> <span>Direct</span>
|
||||
</a>
|
||||
|
||||
<div class="nav-divider"></div>
|
||||
@@ -51,8 +51,8 @@
|
||||
foreach (PRIORITY_CATEGORIES as $id => $name) {
|
||||
$isActive = ($currentPage === 'categories.php' && $currentCategoryId === $id);
|
||||
$icon = isset($categoryIcons[$id]) ? $categoryIcons[$id] : 'fas fa-folder';
|
||||
echo '<a href="categories.php?id=' . $id . '" class="nav-item ' . ($isActive ? 'active' : '') . '" data-title="' . htmlspecialchars($name) . '">';
|
||||
echo '<i class="' . $icon . '"></i> <span>' . htmlspecialchars($name) . '</span>';
|
||||
echo '<a href="categories.php?id=' . $id . '" class="nav-item ' . ($isActive ? 'active' : '') . '" data-title="' . htmlspecialchars($name) . '" aria-current="' . ($isActive ? 'page' : 'false') . '">';
|
||||
echo '<i class="' . $icon . '" aria-hidden="true"></i> <span>' . htmlspecialchars($name) . '</span>';
|
||||
echo '</a>';
|
||||
}
|
||||
}
|
||||
@@ -60,8 +60,8 @@
|
||||
|
||||
<div class="nav-divider"></div>
|
||||
|
||||
<div class="category-title">
|
||||
<i class="fas fa-hashtag"></i> <span>Hashtags</span>
|
||||
<div class="category-title" role="heading" aria-level="2">
|
||||
<i class="fas fa-hashtag" aria-hidden="true"></i> <span>Hashtags</span>
|
||||
</div>
|
||||
|
||||
<?php
|
||||
@@ -70,12 +70,12 @@
|
||||
$encodedTag = urlencode('#' . $tag);
|
||||
$isActive = ($isTagSearch && strtolower($currentTag) === strtolower($tag));
|
||||
?>
|
||||
<a href="recherche.php?q=<?php echo $encodedTag; ?>" class="tag-item <?php echo $isActive ? 'active' : ''; ?>" data-title="<?php echo htmlspecialchars($tag); ?>">
|
||||
<i class="fas fa-hashtag tag-icon"></i> <span><?php echo htmlspecialchars($tag); ?></span>
|
||||
<a href="recherche.php?q=<?php echo $encodedTag; ?>" class="tag-item <?php echo $isActive ? 'active' : ''; ?>" data-title="<?php echo htmlspecialchars($tag); ?>" aria-current="<?php echo $isActive ? 'page' : 'false'; ?>">
|
||||
<i class="fas fa-hashtag tag-icon" aria-hidden="true"></i> <span><?php echo htmlspecialchars($tag); ?></span>
|
||||
</a>
|
||||
<?php
|
||||
endforeach;
|
||||
endif;
|
||||
?>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
Reference in New Issue
Block a user