Skip to main content

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.

6 comments

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 cannot no longer open 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

    Team•

    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 :)