AllBugsFeaturesChangelogSearchNew post
Sign in with Fluxer
Bugs

Edit history

Earlier versions of Some accessibility issues with screen readers, newest first.

Current version | Edited by Rex
Changes
Here's what i've foundRemoved: ### ChecksRemoved: Removed: - ☑ I searched for existing issues and didn't find a duplicate.Removed:
Show

Some accessibility issues with screen readers

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
  1. Mute Button: <button type="button" aria-label="Riattiva audio" class="UserArea.module__controlButton___XzEyMT UserArea.module__active___XzEyMT"></button>
  2. Deafen Button <button type="button" aria-label="Disattiva audio" class="UserArea.module__controlButton___XzEyMT"></button>
  3. 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>
  4. 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>
  5. 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>
  6. 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>
  7. 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>
  8. 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>
Here's what i've found
Original by Rex
Show

Some accessibility issues with screen readers

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
  1. Mute Button: <button type="button" aria-label="Riattiva audio" class="UserArea.module__controlButton___XzEyMT UserArea.module__active___XzEyMT"></button>
  2. Deafen Button <button type="button" aria-label="Disattiva audio" class="UserArea.module__controlButton___XzEyMT"></button>
  3. 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>
  4. 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>
  5. 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>
  6. 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>
  7. 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>
  8. 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>
Here's what i've found

Checks

  • ☑ I searched for existing issues and didn't find a duplicate.