Improve accessibility
Accessibility in FeatureBase is already better than most competitors !
A few very simple fixes can be made to improve FeatureBase accessibility for people using FeatureBase with Assistive technologies.
Here is some feedback from our users who are visually impaired and use screen readers (e.g. Voiceover) to navigate on Featurebase.
Aria Labels
Add aria-labels to buttons who only have icons so that screen readers can read the content to the users.
<!-- Using aria-label -->
<button aria-label="Add media">
<MediaIcon/>
</button>This would be particularly useful in the icon buttons for creating comments (add media, bold, italic, heading…) and also for the ‘number of upvotes’ button in the main feedback component.
Aria-labels should be localized so that the screen reader can read them in the user’s language. A French screen-reader reading English aria-labels is a nightmare :)
All Buttons should be focusable
The four buttons after “How important is this to you?” are not focusable making them impossible to interact with with a screen reader !
Aria-hidden on decorative icons
For example the author’s icon on the left of the author’s name is currently read by screen readers. (e.g. “29879824109hfaljs89.png”) which isn’t very helpful.
Same thing for the “empty comment section” image, it would be better just to have “No one has commented yet”.
Use headings to cut a page into different sections
Screen-reader users almost always traverse the page using the headers (h1, h2, h3…) allowing them to navigate faster. You already do this really well, but I add it just for info.
Other ideas
There are other features which would be nice, but might take longer to add and are less important to us at the moment, such as allowing users and admins to describe an image with alt-text. Perhaps another request could be filed for that one.
Log in to comment and vote
Comments6
Nathan D.
Mar 13, 2025
The buttons in the AppBar + Feedback board selector aren’t accessible with a screen reader click. This is probably because you overrode the default event to open the language switcher with keypress of the enter button.
On desktop, the language switcher cannot be opened with a voiceover click action.
The notifications can be opened, but it seems you haven’t used a modal, which focuses the cursor on the first element of the notification component. So in the HTML hierarchy, the notification component is all the way at the bottom ! Anyway, the screen-reader user won’t be able to navigate there, because when you unfocus the notification button, the popup disappears.
The profile button cannot be opened either.
Since adding the aria-label to “feedback”, you cannotno longeropen the dropdown menu allowing you to select your board, or even navigate to the default board.Nathan D.
Mar 13, 2025
Say a post was written in French, and was automatically translated to English thanks to your new AI translations.
The screen reader will read french title of the original post, and not the translated version :
Nathan D.
Mar 13, 2025
Thank you for a first set of fixes yesterday @Bruno from Featurebase ! (12 of March 2025)
- Upvote button now has aria-label and reads “n upvotes. Click to upvote.”
- The navigation tabs for “Feedback”, “Roadmap”, “Changelog” and “Help Center” have been fixed.
- The filtering buttons on a feedback board now read “Sort by New”, “Sort by Top” and sort by “Trending”.
However, the new aria-labels are not yet translated to other languages. When using a french screen-reader for example, you get “Sorrrt by Trranding, boutonne” (← harsh french accent 🍷🥖).
Nathan D.
Jan 29, 2025
Some of these accessibility issues also affect the Help Center, such as icons which I had to remove and author images which I deactivated.
Furthermore, images cannot be captioned for screen reader users. Fixing this would also improve SEO for said images. See Article image captions
Finally, for some reason when navigating to some pages (e.g. an article page), the screen reader focuses on the last element of the DOM instead of the page title (which by the way is in a <p> element instead of a <h1> within the <header> (also good for SEO)).
Robi Rohumaa
Aug 20, 2024
Hey,
Thanks for the post!
Opening this up to gather upvotes. We’re currently super tied up with other feature development, but we’ll want to make Featurebase even more accessible in the future.
Nathan D.
Aug 20, 2024
Great thank you :)