ORGANISATION-KA-INTERNATIONALE/kaubuntu.re
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add accessibility

Browse Source
This commit is contained in:
Cédric Famibelle-Pronzola
2025-07-22 11:54:05 +04:00
parent d40bd43d7b
commit 65b8753c82
5 changed files with 217 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files
includes/header.php
+34 -22
View File
@@ -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>