Complete 4.5.2: Screen Reader Support - Add ARIA live regions and enhanced attributes for accessibility

This commit is contained in:
VinnyNC 2025-09-30 18:54:16 -04:00
parent 4c2b627e2e
commit 8d41a60ac4

View file

@ -342,7 +342,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action'])) {
</svg>
</div>
<div class="stats-card__content">
<div class="stats-card__value" id="statsViewersCount">0</div>
<div class="stats-card__value" id="statsViewersCount" aria-live="polite" aria-label="Active viewers count">0</div>
<div class="stats-card__label">Active Viewers</div>
</div>
</div>
@ -356,7 +356,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action'])) {
</svg>
</div>
<div class="stats-card__content">
<div class="stats-card__value" id="statsStreamQuality">HD</div>
<div class="stats-card__value" id="statsStreamQuality" aria-live="polite" aria-label="Current stream quality">HD</div>
<div class="stats-card__label">Stream Quality</div>
</div>
</div>
@ -369,7 +369,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action'])) {
</svg>
</div>
<div class="stats-card__content">
<div class="stats-card__value" id="statsUptime">00:00</div>
<div class="stats-card__value" id="statsUptime" aria-live="polite" aria-label="Stream uptime">00:00</div>
<div class="stats-card__label">Stream Uptime</div>
</div>
</div>
@ -380,7 +380,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action'])) {
<header class="widget__header">
<h3 class="widget__title">Recent Activity</h3>
</header>
<div class="widget__content" id="recentActivity">
<div class="widget__content" id="recentActivity" aria-live="polite" aria-label="Recent activity updates">
<div class="activity-item">
<div class="activity-item__avatar">🎥</div>
<div class="activity-item__content">
@ -395,7 +395,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action'])) {
<header class="widget__header">
<h3 class="widget__title">Active Users</h3>
</header>
<div class="widget__content" id="activeUsers">
<div class="widget__content" id="activeUsers" aria-live="polite" aria-label="Active users list">
<div class="user-item">
<div class="user-item__status online"></div>
<div class="user-item__nickname">Welcome to chat!</div>
@ -468,7 +468,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action'])) {
</div>
<div class="form-group">
<div class="chat__nickname-input">
<input type="text" id="nickname" placeholder="Choose a nickname..." maxlength="20" autocomplete="off" aria-label="Enter your nickname">
<input type="text" id="nickname" placeholder="Choose a nickname..." maxlength="20" autocomplete="off" aria-label="Enter your nickname" aria-describedby="nicknameError">
</div>
<div class="form-error" id="nicknameError" style="display: none;"></div>
</div>
@ -491,7 +491,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action'])) {
<h3 id="chat-input-heading" class="sr-only">Send Message</h3>
<div class="form-group">
<div class="chat__input-group">
<input type="text" id="messageInput" placeholder="Type a message..." maxlength="1000" autocomplete="off" aria-label="Type your message">
<input type="text" id="messageInput" placeholder="Type a message..." maxlength="1000" autocomplete="off" aria-label="Type your message" aria-describedby="messageError">
<button data-action="send-message" aria-label="Send message">Send</button>
</div>
<div class="form-error" id="messageError" style="display: none;"></div>