storm/skald
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add additional accessibility improvements (quick wins)

Browse Source 
This commit adds more accessibility enhancements that improve usability
for screen reader and keyboard users with minimal code changes.

Changes:
- Add aria-labels to all icon-only buttons
  * Show/hide video and chat toggle buttons
  * Video controls (play, volume, pip, fullscreen, stop)
  * Chat submit button (send message)
  * All buttons converted from spans/divs to proper button elements

- Add aria-label to volume slider
  * Screen readers can now identify the volume control

- Increase error message timeout from 4s to 8s
  * Gives screen reader users more time to read error messages
  * Messages still dismissible with close button

- Add semantic HTML landmarks
  * Changed main div to <main> element
  * Changed settings sidebar div to <aside> with aria-label
  * Added role="region" and aria-label to chat area
  * Left sidebar already uses <nav> element

- Fix typo and improve close button
  * Fixed id from "clodeside" to "closeside"
  * Converted close button from anchor to button element
  * Added aria-label "Close settings"

These changes improve navigation for screen reader users through proper
landmarks and ensure all interactive elements are properly labeled.
This commit is contained in:
Storm Dragon
2025-11-27 00:11:39 -05:00
parent e03c0be0f7
commit 82ab7e553d
2 changed files with 31 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/galene.html
+29 -27
View File
@@ -16,7 +16,7 @@
</head> </head>
<body> <body>
<div id="main" class="app"> <main id="main" class="app">
<div class="row full-height"> <div class="row full-height">
<nav id="left-sidebar"> <nav id="left-sidebar">
<div class="users-header"> <div class="users-header">
@@ -68,7 +68,7 @@
</header> </header>
<div class="row full-width" id="mainrow"> <div class="row full-width" id="mainrow">
<div class="coln-left" id="left"> <div class="coln-left" id="left">
<div id="chat"> <div id="chat" role="region" aria-label="Chat">
<div id="chatbox"> <div id="chatbox">
<button class="close-chat" id="close-chat" aria-label="Hide chat"> <button class="close-chat" id="close-chat" aria-label="Hide chat">
<span class="close-icon"></span> <span class="close-icon"></span>
@@ -78,7 +78,7 @@
<div class="reply"> <div class="reply">
<form id="inputform"> <form id="inputform">
<textarea id="input" class="form-reply"></textarea> <textarea id="input" class="form-reply"></textarea>
<input id="inputbutton" type="submit" value="&#10148;" class="btn btn-default"/> <input id="inputbutton" type="submit" value="&#10148;" class="btn btn-default" aria-label="Send message"/>
</form> </form>
</div> </div>
</div> </div>
@@ -86,15 +86,15 @@
</div> </div>
<div id="resizer"></div> <div id="resizer"></div>
<div class="coln-right" id="right"> <div class="coln-right" id="right">
<span class="show-video blink invisible" id="show-video"> <button class="show-video blink invisible" id="show-video" aria-label="Show video">
<i class="fas fa-exchange-alt" aria-hidden="true"></i> <i class="fas fa-exchange-alt" aria-hidden="true"></i>
</span> </button>
<div class="chat-btn show-chat invisible" id="show-chat"> <button class="chat-btn show-chat invisible" id="show-chat" aria-label="Show chat">
<i class="far fa-comment-alt icon-chat" title="Show chat"></i> <i class="far fa-comment-alt icon-chat" aria-hidden="true"></i>
</div> </button>
<div class="chat-btn collapse-video invisible" id="collapse-video"> <button class="chat-btn collapse-video invisible" id="collapse-video" aria-label="Hide video and show chat">
<i class="far fa-comment-alt icon-chat" title="Hide video and show chat"></i> <i class="far fa-comment-alt icon-chat" aria-hidden="true"></i>
</div> </button>
<div class="video-container invisible" id="video-container"> <div class="video-container invisible" id="video-container">
<div id="expand-video" class="expand-video"> <div id="expand-video" class="expand-video">
<div id="peers"></div> <div id="peers"></div>
@@ -143,12 +143,12 @@
</div> </div>
</div> </div>
</div> </div>
</div> </main>
<div id="sidebarnav" class="sidenav"> <aside id="sidebarnav" class="sidenav" aria-label="Settings">
<div class="sidenav-header"> <div class="sidenav-header">
<h2>Settings</h2> <h2>Settings</h2>
<a class="closebtn" id="clodeside"><i class="fas fa-times" aria-hidden="true"></i></a> <button class="closebtn" id="closeside" aria-label="Close settings"><i class="fas fa-times" aria-hidden="true"></i></button>
</div> </div>
<div class="sidenav-content" id="optionsdiv"> <div class="sidenav-content" id="optionsdiv">
<div id="profile" class="profile invisible"> <div id="profile" class="profile invisible">
@@ -256,34 +256,36 @@
</form> </form>
</fieldset> </fieldset>
</div> </div>
</div> </aside>
<div id="videocontrols-template" class="invisible"> <div id="videocontrols-template" class="invisible">
<div class="video-controls vc-overlay"> <div class="video-controls vc-overlay">
<div class="controls-button controls-left"> <div class="controls-button controls-left">
<span class="video-play" title="Play video"> <button class="video-play" aria-label="Play video">
<i class="fas fa-play"></i> <i class="fas fa-play" aria-hidden="true"></i>
</span> </button>
<span class="volume" title="Volume"> <span class="volume">
<i class="fas fa-volume-up volume-mute" aria-hidden="true"></i> <button class="volume-mute" aria-label="Mute volume">
<input class="volume-slider" type="range" max="100" value="100" min="0" step="5" > <i class="fas fa-volume-up" aria-hidden="true"></i>
</button>
<input class="volume-slider" type="range" max="100" value="100" min="0" step="5" aria-label="Volume">
</span> </span>
</div> </div>
<div class="controls-button controls-right"> <div class="controls-button controls-right">
<span class="pip" title="Picture In Picture"> <button class="pip" aria-label="Picture in picture">
<i class="far fa-clone" aria-hidden="true"></i> <i class="far fa-clone" aria-hidden="true"></i>
</span> </button>
<span class="fullscreen" title="Fullscreen"> <button class="fullscreen" aria-label="Fullscreen">
<i class="fas fa-expand" aria-hidden="true"></i> <i class="fas fa-expand" aria-hidden="true"></i>
</span> </button>
</div> </div>
</div> </div>
</div> </div>
<div id="topvideocontrols-template" class="invisible"> <div id="topvideocontrols-template" class="invisible">
<div class="top-video-controls"> <div class="top-video-controls">
<div class="controls-button controls-right"> <div class="controls-button controls-right">
<span class="close-icon video-stop" title="Stop video"> <button class="close-icon video-stop" aria-label="Stop video">
</span> </button>
</div> </div>
</div> </div>
</div> </div>
static/galene.js
+2 -2
View File
@@ -4344,7 +4344,7 @@ function displayError(message, level) {
/** @ts-ignore */ /** @ts-ignore */
Toastify({ Toastify({
text: message, text: message,
duration: 4000, duration: 8000, // Increased from 4000 for screen reader users
close: true, close: true,
position: position, position: position,
gravity: gravity, gravity: gravity,
@@ -4417,7 +4417,7 @@ document.getElementById('openside').onclick = function(e) {
}; };
document.getElementById('clodeside').onclick = function(e) { document.getElementById('closeside').onclick = function(e) {
e.preventDefault(); e.preventDefault();
closeNav(); closeNav();
}; };