Summary
I've found some accessibility issues with UI components, specifically regarding Icon Buttons and Server Icons. Since there are keyboard shortcuts for these actions, I suggest adding them to the aria-label. For example, the label could read: '{Label}, press {Keybinding} to activate'.Steps to reproduce
- Enable a screen reader (such as VoiceOver or NVDA).
- Tab to the buttons in the DM interface; the screen reader announces all buttons simply as "Image".
- Tab to the server icons in the sidebar; the screen reader reads only the first letter of the server name, not the full name.
- In the User Area, the Settings button has no aria-label. Additionally, in the Italian localization, the aria-labels for both "Mute" and "Deafen" are identical ("disattiva audio"), making them indistinguishable.
- Navigate through the interface with NVDA or VoiceOver to identify any other unlabeled element
Environment (optional)
- OS: Windows (NVDA) VoiceOver (Macos / iOS From Web)
- Browser: Safari
Logs or screenshots (optional)
here's the elements i've found- Mute Button:
<button type="button" aria-label="Riattiva audio" class="UserArea.module__controlButton___XzEyMT UserArea.module__active___XzEyMT"></button> - Deafen Button
<button type="button" aria-label="Disattiva audio" class="UserArea.module__controlButton___XzEyMT"></button> - Server Icon
<div class="GuildsLayout.module__guildListItem___XzkwZG" aria-pressed="false" role="button" tabindex="0" data-guild-list-focus-item="true" data-scroll-id="guild-1473390168502640699" data-guild-read-sentinel="0" aria-haspopup="true" aria-expanded="false" aria-labelledby="_r_9_" draggable="true"><div class="GuildsLayout.module__relative___XzkwZG"><div tabindex="-1" class="GuildsLayout.module__guildIcon___XzkwZG GuildsLayout.module__guildIconNoImage___XzkwZG" data-initials-length="short" style="opacity: 1; border-radius: 50%;"><span class="GuildsLayout.module__guildIconInitials___XzkwZG">D</span></div><div class="GuildsLayout.module__guildBadge___XzkwZG"></div></div></div> - Add Button (DMs)
<button type="button" class="TextareaButton.module__button___XzMzZT" aria-haspopup="true" aria-expanded="false" aria-labelledby="_r_2a_"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256" class="TextareaButton.module__icon___XzMzZT"><path d="M128,24A104,104,0,1,0,232,128,104.13,104.13,0,0,0,128,24Zm40,112H136v32a8,8,0,0,1-16,0V136H88a8,8,0,0,1,0-16h32V88a8,8,0,0,1,16,0v32h32a8,8,0,0,1,0,16Z"></path></svg></button> - GIF Icon :
<button data-expression-picker-tab="gifs" type="button" class="TextareaButton.module__button___XzMzZT" aria-haspopup="true" aria-expanded="false" aria-labelledby="_r_2b_"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256" class="TextareaButton.module__icon___XzMzZT"><path d="M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40ZM112,144a32,32,0,0,1-64,0V112a32,32,0,0,1,55.85-21.33,8,8,0,1,1-11.92,10.66A16,16,0,0,0,64,112v32a16,16,0,0,0,32,0v-8H88a8,8,0,0,1,0-16h16a8,8,0,0,1,8,8Zm32,24a8,8,0,0,1-16,0V88a8,8,0,0,1,16,0Zm60-72H176v24h20a8,8,0,0,1,0,16H176v32a8,8,0,0,1-16,0V88a8,8,0,0,1,8-8h36a8,8,0,0,1,0,16Z"></path></svg></button> - Media Button:
<button data-expression-picker-tab="memes" type="button" class="TextareaButton.module__button___XzMzZT" aria-haspopup="true" aria-expanded="false" aria-labelledby="_r_2c_"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256" class="TextareaButton.module__icon___XzMzZT"><path d="M208,32H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM48,48H208v77.38l-24.69-24.7a16,16,0,0,0-22.62,0L53.37,208H48ZM80,96a16,16,0,1,1,16,16A16,16,0,0,1,80,96Z"></path></svg></button> - Sticker Button:
<button data-expression-picker-tab="stickers" type="button" class="TextareaButton.module__button___XzMzZT" aria-haspopup="true" aria-expanded="false" aria-labelledby="_r_2d_"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256" class="TextareaButton.module__icon___XzMzZT"><path d="M168,32H88A56.06,56.06,0,0,0,32,88v80a56.06,56.06,0,0,0,56,56h48a8.07,8.07,0,0,0,2.53-.41c26.23-8.75,76.31-58.83,85.06-85.06A8.07,8.07,0,0,0,224,136V88A56.06,56.06,0,0,0,168,32ZM136,207.42V176a40,40,0,0,1,40-40h31.42C198.16,157.55,157.55,198.16,136,207.42Z"></path></svg></button> - Emoji Button:
<button data-expression-picker-tab="emojis" type="button" class="TextareaButton.module__button___XzMzZT" aria-haspopup="true" aria-expanded="false" aria-labelledby="_r_2e_"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256" class="TextareaButton.module__icon___XzMzZT"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24ZM92,96a12,12,0,1,1-12,12A12,12,0,0,1,92,96Zm82.92,60c-10.29,17.79-27.39,28-46.92,28s-36.63-10.2-46.92-28a8,8,0,1,1,13.84-8c7.47,12.91,19.21,20,33.08,20s25.61-7.1,33.08-20a8,8,0,1,1,13.84,8ZM164,120a12,12,0,1,1,12-12A12,12,0,0,1,164,120Z"></path></svg></button>
1 comment
Comment by Rex