Skip to content

Improve accessibility for screen reader users #318

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
stormdragon2976 wants to merge 12 commits into
base: master
Choose a base branch
from
Open

Improve accessibility for screen reader users #318

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
e03c0be
Add accessibility improvements for screen readers and keyboard naviga…
stormdragon2976 Nov 27, 2025
82ab7e5
Add additional accessibility improvements (quick wins)
stormdragon2976 Nov 27, 2025
3c58e13
Add keyboard navigation support and raise hand commands
stormdragon2976 Nov 27, 2025
c092924
Add keyboard navigation and accessibility to context menus
stormdragon2976 Nov 27, 2025
ef2eeb0
Fix accessibility labels and context menu activation
stormdragon2976 Nov 27, 2025
5e4b9ae
Fixed problems with radio button grouping. Also added headings to cha…
stormdragon2976 Nov 28, 2025
6f1cb95
Add keyboard shortcuts for some actions.
stormdragon2976 Nov 28, 2025
d51cb1a
Changed shortcuts a bit, added a mute/unmute shortcut to control+alt+t.
stormdragon2976 Nov 28, 2025
34a2751
Attempt fix for control+alt+t and c shortcuts. Add keyboard shortcuts…
stormdragon2976 Nov 28, 2025
160cd72
Merge remote-tracking branch 'upstream/master' into a11y
stormdragon2976 May 9, 2026
564d8fc
Fix keyboard access for logout control
stormdragon2976 May 9, 2026
f718385
Fix typo in missing user error
stormdragon2976 May 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion rtpconn/webclient.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1906,7 +1906,7 @@ func handleClientMessage(c *webClient, m clientMessage) error {
}
t := g.GetClient(m.Dest)
if t == nil {
return c.error(group.UserError("no suck user"))
return c.error(group.UserError("no such user"))
}
target, ok := t.(*webClient)
if !ok {
Expand Down
38 changes: 33 additions & 5 deletions static/galene.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,27 @@
/* Accessibility: Visible focus indicators for keyboard navigation */
button:focus,
[role="button"]:focus,
select:focus,
input:focus,
textarea:focus,
a:focus {
outline: 2px solid #0066cc;
outline-offset: 2px;
}

/* Accessibility: Screen reader only content */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}

.nav-fixed .topnav {
z-index: 1039;
}
Expand Down Expand Up @@ -109,15 +133,18 @@
display: none;
}

.sidenav .user-logout a {
.sidenav .user-logout button {
background: transparent;
border: 0;
font-size: 1em;
padding: 7px 0 0;
color: #e4157e;
cursor: pointer;
font: inherit;
line-height: .7;
}

.sidenav .user-logout a:hover {
.sidenav .user-logout button:hover {
color: #ab0659;
}

Expand Down Expand Up @@ -312,7 +339,6 @@
resize: none;
overflow: hidden;
padding: 5px;
outline: none;
border: none;
text-indent: 5px;
box-shadow: none;
Expand Down Expand Up @@ -865,11 +891,13 @@ h1 {
}

#input:focus {
outline: none;
outline: 2px solid #0066cc;
outline-offset: 2px;
}

#inputbutton:focus {
outline: none;
outline: 2px solid #0066cc;
outline-offset: 2px;
}

#resizer {
Expand Down
130 changes: 68 additions & 62 deletions static/galene.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
</head>

<body>
<div id="main" class="app">
<main id="main" class="app">
<div class="row full-height">
<nav id="left-sidebar">
<div class="users-header">
Expand All @@ -29,71 +29,73 @@
<header>
<nav class="topnav navbar navbar-expand navbar-light fixed-top">
<div id="header">
<div class="collapse" title="Collapse left panel" id="sidebarCollapse">
<button class="collapse" aria-label="Toggle left panel" aria-expanded="true" id="sidebarCollapse">
<i class="fas fa-align-left" aria-hidden="true"></i>
</div>
</button>
<h1 id="title" class="header-title">Galène</h1>
</div>

<ul class="nav-menu">
<li>
<button id="presentbutton" class="invisible btn btn-success">
<button id="presentbutton" class="invisible btn btn-success" aria-label="Enable camera and microphone">
<i class="fas fa-play" aria-hidden="true"></i><span class="nav-text"> Enable</span>
</button>
</li>
<li>
<button id="unpresentbutton" class="invisible btn btn-cancel">
<button id="unpresentbutton" class="invisible btn btn-cancel" aria-label="Disable camera and microphone">
<i class="fas fa-stop" aria-hidden="true"></i><span class="nav-text"> Disable</span>
</button>
</li>
<li>
<div id="mutebutton" class="nav-link nav-button">
<button id="mutebutton" class="nav-link nav-button" aria-pressed="false" aria-label="Mute microphone">
<span><i class="fas fa-microphone-slash" aria-hidden="true"></i></span>
<label>Mute</label>
</div>
<span class="nav-text">Mute</span>
</button>
</li>
<li>
<div id="sharebutton" class="invisible nav-link nav-button">
<button id="sharebutton" class="invisible nav-link nav-button" aria-label="Share screen">
<span><i class="fas fa-share-square" aria-hidden="true"></i></span>
<label>Share Screen</label>
</div>
<span class="nav-text">Share Screen</span>
</button>
</li>
<li>
<div class="nav-button nav-link nav-more" id="openside">
<button class="nav-button nav-link nav-more" id="openside" aria-label="More options" aria-haspopup="true">
<span><i class="fas fa-ellipsis-v" aria-hidden="true"></i></span>
</div>
</button>
</li>
</ul>
</nav>
</header>
<div class="row full-width" id="mainrow">
<div class="coln-left" id="left">
<div id="chat">
<div id="chat" role="region" aria-label="Chat">
<div id="chatbox">
<div class="close-chat" id="close-chat" title="Hide chat">
<button class="close-chat" id="close-chat" aria-label="Hide chat">
<span class="close-icon"></span>
</div>
</button>
<h2 id="chat-history-heading" class="sr-only">Chat History</h2>
<div id="box"></div>
<div id="chat-announcements" aria-live="polite" aria-atomic="true" class="sr-only"></div>
<div class="reply">
<form id="inputform">
<textarea id="input" class="form-reply"></textarea>
<input id="inputbutton" type="submit" value="&#10148;" class="btn btn-default"/>
<textarea id="input" class="form-reply" aria-label="Message or /command"></textarea>
<input id="inputbutton" type="submit" value="&#10148;" class="btn btn-default" aria-label="Send message"/>
</form>
</div>
</div>
</div>
</div>
<div id="resizer"></div>
<div id="resizer" tabindex="0" role="separator" aria-label="Chat resize handle" aria-orientation="vertical"></div>
<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>
</span>
<div class="chat-btn show-chat invisible" id="show-chat">
<i class="far fa-comment-alt icon-chat" title="Show chat"></i>
</div>
<div class="chat-btn collapse-video invisible" id="collapse-video">
<i class="far fa-comment-alt icon-chat" title="Hide video and show chat"></i>
</div>
</button>
<button class="chat-btn show-chat invisible" id="show-chat" aria-label="Show chat">
<i class="far fa-comment-alt icon-chat" aria-hidden="true"></i>
</button>
<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" aria-hidden="true"></i>
</button>
<div class="video-container invisible" id="video-container">
<div id="expand-video" class="expand-video">
<div id="peers"></div>
Expand All @@ -115,21 +117,23 @@ <h1 id="title" class="header-title">Galène</h1>
<input id="password" type="password" name="password"
autocomplete="current-password" class="form-control"/>
</div>
<label>Enable at start:</label>
<div class="present-switch">
<p class="switch-radio">
<input id="presentoff" type="radio" name="presentradio" value="" checked/>
<label for="presentoff">Nothing</label>
</p>
<p class="switch-radio">
<input id="presentmike" type="radio" name="presentradio" value="mike"/>
<label for="presentmike">Microphone</label>
</p>
<p class="switch-radio">
<input id="presentboth" type="radio" name="presentradio" value="both"/>
<label for="presentboth">Camera and microphone</label>
</p>
</div>
<fieldset>
<legend>Enable at start:</legend>
<div class="present-switch">
<p class="switch-radio">
<input id="presentoff" type="radio" name="presentradio" value="" checked/>
<label for="presentoff">Nothing</label>
</p>
<p class="switch-radio">
<input id="presentmike" type="radio" name="presentradio" value="mike"/>
<label for="presentmike">Microphone</label>
</p>
<p class="switch-radio">
<input id="presentboth" type="radio" name="presentradio" value="both"/>
<label for="presentboth">Camera and microphone</label>
</p>
</div>
</fieldset>
<div class="clear"></div>
<div class="connect">
<input id="connectbutton" type="submit" class="btn btn-blue" value="Connect"/>
Expand All @@ -142,12 +146,12 @@ <h1 id="title" class="header-title">Galène</h1>
</div>
</div>
</div>
</div>
</main>

<div id="sidebarnav" class="sidenav">
<aside id="sidebarnav" class="sidenav" aria-label="Settings">
<div class="sidenav-header">
<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 class="sidenav-content" id="optionsdiv">
<div id="profile" class="profile invisible">
Expand All @@ -158,13 +162,13 @@ <h2>Settings</h2>
<div class="profile-info">
<span id="userspan"></span>
<span id="permspan"></span>
<span id="chpwspan" class="invisible"><a id="change-password">Change password</a></span>
<span id="chpwspan" class="invisible"><a id="change-password" aria-label="Change password">Change password</a></span>
</div>
<div class="user-logout">
<a id="disconnectbutton">
<span class="logout-icon"><i class="fas fa-sign-out-alt"></i></span>
<button id="disconnectbutton" type="button" aria-label="Logout">
<span class="logout-icon"><i class="fas fa-sign-out-alt" aria-hidden="true"></i></span>
<span class="logout-text">Logout</span>
</a>
</button>
</div>
</div>
</div>
Expand Down Expand Up @@ -255,34 +259,36 @@ <h2>Settings</h2>
</form>
</fieldset>
</div>
</div>
</aside>

<div id="videocontrols-template" class="invisible">
<div class="video-controls vc-overlay">
<div class="controls-button controls-left">
<span class="video-play" title="Play video">
<i class="fas fa-play"></i>
</span>
<span class="volume" title="Volume">
<i class="fas fa-volume-up volume-mute" aria-hidden="true"></i>
<input class="volume-slider" type="range" max="100" value="100" min="0" step="5" >
<button class="video-play" aria-label="Play video">
<i class="fas fa-play" aria-hidden="true"></i>
</button>
<span class="volume">
<button class="volume-mute" aria-label="Mute volume">
<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>
</div>
<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>
</span>
<span class="fullscreen" title="Fullscreen">
</button>
<button class="fullscreen" aria-label="Fullscreen">
<i class="fas fa-expand" aria-hidden="true"></i>
</span>
</button>
</div>
</div>
</div>
<div id="topvideocontrols-template" class="invisible">
<div class="top-video-controls">
<div class="controls-button controls-right">
<span class="close-icon video-stop" title="Stop video">
</span>
<button class="close-icon video-stop" aria-label="Stop video">
</button>
</div>
</div>
</div>
Expand Down
Loading