Aller au contenu principal

Améliorer l'accessibilité

Requests & InsightsTranslations

L'accessibilité de FeatureBase est déjà meilleure que celle de la plupart de ses concurrents !
Quelques modifications très simples peuvent être apportées pour améliorer l'accessibilité de FeatureBase pour les personnes qui utilisent FeatureBase avec des technologies d'assistance.
Voici quelques commentaires de nos utilisateurs malvoyants qui utilisent des lecteurs d'écran (par exemple, VoiceOver) pour naviguer sur FeatureBase.


Étiquettes ARIA

Ajoutez des balises aria-label aux boutons qui ne comportent que des icônes afin que les lecteurs d'écran puissent lire le contenu aux utilisateurs. 

<!-- Utilisation d'aria-label -->
<button aria-label="Ajouter un média">
  <MediaIcon/>
</button>

Cela serait particulièrement utile pour les boutons iconiques permettant de créer des commentaires (ajouter un média, mettre en gras, en italique, en titre…) ainsi que pour le bouton « nombre de votes positifs » dans le composant principal de commentaires.
Les balises aria-label doivent être localisées afin que le lecteur d'écran puisse les lire dans la langue de l'utilisateur. Un lecteur d'écran français lisant des balises aria-label en anglais est un cauchemar :)

Tous les boutons doivent être sélectionnables

Les quatre boutons situés après « Quelle importance cela a-t-il pour vous ? » ne sont pas sélectionnables, ce qui rend toute interaction impossible avec un lecteur d'écran !



Aria-hidden sur les icônes décoratives

Par exemple, l’icône de l’auteur située à gauche de son nom est actuellement lue par les lecteurs d’écran (par exemple « 29879824109hfaljs89.png »), ce qui n’est pas très utile.
Il en va de même pour l’image de la « section de commentaires vide » ; il serait préférable d’indiquer simplement « Personne n’a encore laissé de commentaire ».



Utilisez des titres pour diviser une page en différentes sections

Les utilisateurs de lecteurs d'écran parcourent presque toujours la page en suivant les titres (h1, h2, h3…), ce qui leur permet de naviguer plus rapidement. Vous le faites déjà très bien, mais je le mentionne juste à titre d'information.

Autres idées

Il existe d'autres fonctionnalités qui seraient intéressantes, mais qui pourraient prendre plus de temps à ajouter et qui sont moins importantes pour nous pour le moment, comme permettre aux utilisateurs et aux administrateurs de décrire une image avec un texte alternatif. Peut-être qu'une autre demande pourrait être déposée à ce sujet.

Publié par Nathan D. ·
6 commentaires

Connectez-vous pour commenter et voter

Commentaires6

  • Nathan D.

    •

    13 mars 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.

    •

    13 mars 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.

    •

    13 mars 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.

    •

    29 janv. 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

    Équipe•

    20 août 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.

      •

      20 août 2024

      Great thank you :)