feat: add accessibility
This commit is contained in:
@@ -65,12 +65,13 @@ setSecurityHeaders();
|
||||
<body>
|
||||
<?php include 'includes/sidebar.php'; ?>
|
||||
<!-- Contenu principal -->
|
||||
<div class="main-content">
|
||||
<main class="main-content" id="main-content" role="main">
|
||||
<?php include 'includes/header.php'; ?>
|
||||
<!-- Hero and Mastodon container -->
|
||||
<div class="hero-mastodon-wrapper">
|
||||
<!-- Hero Banner -->
|
||||
<div class="hero">
|
||||
<section class="hero" aria-labelledby="live-section-title">
|
||||
<h2 id="live-section-title" class="sr-only">Diffusion en direct</h2>
|
||||
<?php
|
||||
// Vérifier s'il y a un direct en cours
|
||||
$liveStream = getLiveStream();
|
||||
@@ -87,20 +88,24 @@ setSecurityHeaders();
|
||||
frameborder="0"
|
||||
allowfullscreen="allowfullscreen"
|
||||
allow="autoplay; fullscreen"
|
||||
title="<?php echo htmlspecialchars($liveStream['title']); ?>">
|
||||
title="Diffusion en direct: <?php echo htmlspecialchars($liveStream['title']); ?>"
|
||||
aria-describedby="live-description">
|
||||
</iframe>
|
||||
<div id="live-description" class="sr-only">
|
||||
Lecteur vidéo pour la diffusion en direct de <?php echo htmlspecialchars($liveStream['channel']); ?>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-video-info">
|
||||
<h2><?php echo htmlspecialchars($liveStream['title']); ?></h2>
|
||||
<div class="hero-channel-info">
|
||||
<?php if (strpos($liveStream['channelAvatar'], 'default-avatar.png') !== false || empty($liveStream['channelAvatar'])): ?>
|
||||
<div class="channel-avatar-placeholder">
|
||||
<i class="fas fa-user-circle"></i>
|
||||
<div class="channel-avatar-placeholder" role="img" aria-label="Avatar par défaut">
|
||||
<i class="fas fa-user-circle" aria-hidden="true"></i>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<img src="<?php echo $liveStream['channelAvatar']; ?>" alt="<?php echo $liveStream['channel']; ?>" class="channel-avatar">
|
||||
<img src="<?php echo $liveStream['channelAvatar']; ?>" alt="Avatar de la chaîne <?php echo htmlspecialchars($liveStream['channel']); ?>" class="channel-avatar">
|
||||
<?php endif; ?>
|
||||
<span class="channel-name"><?php echo $liveStream['channel']; ?></span>
|
||||
<span class="channel-name"><?php echo htmlspecialchars($liveStream['channel']); ?></span>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
@@ -115,7 +120,7 @@ setSecurityHeaders();
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div id="mt-container" class="mt-container">
|
||||
<div class="mt-header">
|
||||
@@ -146,12 +151,12 @@ setSecurityHeaders();
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- Section Shorts -->
|
||||
<div class="video-section">
|
||||
<section class="video-section" aria-labelledby="shorts-heading">
|
||||
<div class="section-header">
|
||||
<div class="section-logo">
|
||||
<img src="img/logo.png" alt="kaubuntu.re">
|
||||
<img src="img/logo.png" alt="Logo kaubuntu.re" aria-hidden="true">
|
||||
</div>
|
||||
<h2 class="section-title">Shorts</h2>
|
||||
<h2 id="shorts-heading" class="section-title">Shorts</h2>
|
||||
</div>
|
||||
|
||||
<div class="carousel">
|
||||
@@ -167,7 +172,7 @@ setSecurityHeaders();
|
||||
foreach ($shorts as $video):
|
||||
?>
|
||||
<div class="carousel-item">
|
||||
<div class="video-card" data-video-id="<?php echo $video['id']; ?>">
|
||||
<article class="video-card" data-video-id="<?php echo $video['id']; ?>">
|
||||
<div class="video-thumbnail">
|
||||
<img src="<?php echo $video['thumbnail']; ?>" alt="<?php echo $video['title']; ?>">
|
||||
<div class="video-play-icon">
|
||||
@@ -190,19 +195,19 @@ setSecurityHeaders();
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Séparateur stylisé -->
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- Section Dernières vidéos -->
|
||||
<div class="video-section">
|
||||
<div class="section-header">
|
||||
<section class="video-section" aria-labelledby="recent-videos-heading">
|
||||
<header class="section-header">
|
||||
<div class="section-logo">
|
||||
<img src="img/logo.png" alt="kaubuntu.re">
|
||||
<img src="img/logo.png" alt="Logo kaubuntu.re" aria-hidden="true">
|
||||
</div>
|
||||
<h2 class="section-title">Dernières vidéos</h2>
|
||||
</div>
|
||||
<h2 id="recent-videos-heading" class="section-title">Dernières vidéos</h2>
|
||||
</header>
|
||||
|
||||
<div class="video-grid">
|
||||
<?php
|
||||
@@ -215,16 +220,18 @@ setSecurityHeaders();
|
||||
} else {
|
||||
foreach ($recentVideos as $video):
|
||||
?>
|
||||
<div class="video-card" data-video-id="<?php echo $video['id']; ?>">
|
||||
<article class="video-card" data-video-id="<?php echo $video['id']; ?>">
|
||||
<div class="video-thumbnail">
|
||||
<img src="<?php echo $video['thumbnail']; ?>" alt="<?php echo $video['title']; ?>">
|
||||
<div class="video-play-icon">
|
||||
<img src="<?php echo $video['thumbnail']; ?>" alt="Miniature de la vidéo: <?php echo htmlspecialchars($video['title']); ?>">
|
||||
<div class="video-play-icon" aria-hidden="true">
|
||||
<i class="fas fa-play-circle"></i>
|
||||
</div>
|
||||
<div class="video-duration"><?php echo formatDuration($video['duration']); ?></div>
|
||||
<div class="video-duration" aria-label="Durée: <?php echo formatDuration($video['duration']); ?>">
|
||||
<?php echo formatDuration($video['duration']); ?>
|
||||
</div>
|
||||
</div>
|
||||
<div class="video-info">
|
||||
<h3 class="video-title"><?php echo $video['title']; ?></h3>
|
||||
<h3 class="video-title"><?php echo htmlspecialchars($video['title']); ?></h3>
|
||||
<div class="video-channel">
|
||||
<?php if (strpos($video['channelAvatar'], 'default-avatar.png') !== false || empty($video['channelAvatar'])): ?>
|
||||
<div class="channel-avatar-placeholder">
|
||||
@@ -240,7 +247,7 @@ setSecurityHeaders();
|
||||
<span class="video-date"><i class="far fa-calendar-alt"></i> <?php echo formatDate($video['date']); ?></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<?php
|
||||
endforeach;
|
||||
}
|
||||
@@ -248,19 +255,19 @@ setSecurityHeaders();
|
||||
</div>
|
||||
|
||||
<button class="view-more">Voir plus</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Séparateur stylisé -->
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- Section Tendances -->
|
||||
<div class="video-section">
|
||||
<div class="section-header">
|
||||
<section class="video-section" aria-labelledby="trending-videos-heading">
|
||||
<header class="section-header">
|
||||
<div class="section-logo">
|
||||
<img src="img/logo.png" alt="kaubuntu.re">
|
||||
<img src="img/logo.png" alt="Logo kaubuntu.re" aria-hidden="true">
|
||||
</div>
|
||||
<h2 class="section-title">Tendances</h2>
|
||||
</div>
|
||||
<h2 id="trending-videos-heading" class="section-title">Tendances</h2>
|
||||
</header>
|
||||
|
||||
<div class="video-grid">
|
||||
<?php
|
||||
@@ -273,7 +280,7 @@ setSecurityHeaders();
|
||||
} else {
|
||||
foreach ($trendingVideos as $video):
|
||||
?>
|
||||
<div class="video-card" data-video-id="<?php echo $video['id']; ?>">
|
||||
<article class="video-card" data-video-id="<?php echo $video['id']; ?>">
|
||||
<div class="video-thumbnail">
|
||||
<img src="<?php echo $video['thumbnail']; ?>" alt="<?php echo $video['title']; ?>">
|
||||
<div class="video-play-icon">
|
||||
@@ -298,7 +305,7 @@ setSecurityHeaders();
|
||||
<span class="video-date"><i class="far fa-calendar-alt"></i> <?php echo formatDate($video['date']); ?></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<?php
|
||||
endforeach;
|
||||
}
|
||||
@@ -306,7 +313,7 @@ setSecurityHeaders();
|
||||
</div>
|
||||
|
||||
<button class="view-more">Voir plus</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Séparateur stylisé -->
|
||||
<hr class="section-divider">
|
||||
@@ -321,17 +328,17 @@ setSecurityHeaders();
|
||||
if (!empty($category['videos'])):
|
||||
?>
|
||||
<!-- Section Catégorie: <?php echo $category['name']; ?> -->
|
||||
<div class="video-section" data-category-id="<?php echo $category['id']; ?>">
|
||||
<div class="section-header">
|
||||
<section class="video-section" data-category-id="<?php echo $category['id']; ?>" aria-labelledby="category-heading-<?php echo $category['id']; ?>">
|
||||
<header class="section-header">
|
||||
<div class="section-logo">
|
||||
<img src="img/logo.png" alt="kaubuntu.re">
|
||||
<img src="img/logo.png" alt="Logo kaubuntu.re" aria-hidden="true">
|
||||
</div>
|
||||
<h2 class="section-title"><?php echo $category['name']; ?></h2>
|
||||
</div>
|
||||
<h2 id="category-heading-<?php echo $category['id']; ?>" class="section-title"><?php echo htmlspecialchars($category['name']); ?></h2>
|
||||
</header>
|
||||
|
||||
<div class="video-grid">
|
||||
<?php foreach ($category['videos'] as $video): ?>
|
||||
<div class="video-card" data-video-id="<?php echo $video['id']; ?>">
|
||||
<article class="video-card" data-video-id="<?php echo $video['id']; ?>">
|
||||
<div class="video-thumbnail">
|
||||
<img src="<?php echo $video['thumbnail']; ?>" alt="<?php echo $video['title']; ?>">
|
||||
<div class="video-play-icon">
|
||||
@@ -356,12 +363,12 @@ setSecurityHeaders();
|
||||
<span class="video-date"><i class="far fa-calendar-alt"></i> <?php echo formatDate($video['date']); ?></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
|
||||
<button class="view-more">Voir plus</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Séparateur stylisé -->
|
||||
<hr class="section-divider">
|
||||
@@ -372,10 +379,10 @@ setSecurityHeaders();
|
||||
?>
|
||||
|
||||
<!-- Section Flexbox pour Informations et Tendances Hashtags -->
|
||||
<div class="info-tags-container">
|
||||
<section class="info-tags-container">
|
||||
<?php if (defined('MOVEMENT_DESCRIPTION') && !empty(MOVEMENT_DESCRIPTION)): ?>
|
||||
<!-- Section Informations -->
|
||||
<div class="info-section">
|
||||
<article class="info-section">
|
||||
<h2 class="info-header"><?php echo MOVEMENT_DESCRIPTION; ?></h2>
|
||||
|
||||
<?php if (defined('MOVEMENT_IMAGE') && !empty(MOVEMENT_IMAGE)): ?>
|
||||
@@ -388,12 +395,12 @@ setSecurityHeaders();
|
||||
<?php endif; ?>
|
||||
</figure>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</article>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- Section Tendances Hashtags -->
|
||||
<div class="tags-section-container">
|
||||
<h2 class="section-title centered">Tendances</h2>
|
||||
<aside class="tags-section-container" aria-labelledby="hashtags-heading">
|
||||
<h2 id="hashtags-heading" class="section-title centered">Tendances</h2>
|
||||
|
||||
<div class="tags-section">
|
||||
<?php
|
||||
@@ -407,9 +414,9 @@ setSecurityHeaders();
|
||||
endif;
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</section>
|
||||
</main>
|
||||
<?php include 'includes/footer.php'; ?>
|
||||
<?php include 'includes/mobile-menu.php'; ?>
|
||||
<script src="js/main.js"></script>
|
||||
|
||||
Reference in New Issue
Block a user