Accessibility: Compass not properly working for screenreader or keyboard-only users

[behofer]

General description

Visually impaired users like myself rely on a screenreader to have information read by a speech synthesizer or displayed on a braille display. Popular screenreaders are VoiceOver on Mac OS as well as JAWS and NVDA on Windows or Orca on Linux Desktop.
Currently a screenreader isn't able to work properly with MongoDB Compass.

Steps to reproduce

• Download or use a free screenreader like NVDA (Windows), Microsoft Narrator (Windows) or VoiceOver
• Launch Compass and connect to a database
• Navigate Compass, e.g. explore the tree displaying your databases and collections, try to interact with elements on screen
• You will notice that screenreaders will announce buttons without labels, missing or not clearly labeled navigation elements as well as overall keyboard navigation problems

Actual behaviour

A screenreader doesn't read elements properly. Symbolic buttons are not labeled which makes it impossible for the user to find out their purpose. Navigation elements like trees are not navigatable by keyboard. ...

Expected behaviour

Compass is accessible for screenreader users as well as keyboard-only users.

Suggestions

It's not necessarily about fully implementing Web Content Accessibility Guidelines. A screenreader user will be helped by labeling elements correctly using HTML/JavaScript, using ARIA and having navigational elements accessible for a first step.

A few resources

• Writing JavaScript with Accessibility in Mind - Medium
• React Accessibility Tools – How to Build More Accessible React Apps
• Making React Apps More Accessible | DigitalOcean
• Accessibility in React
• Accessibility in React (Mozilla article)
• Making trees navigatable with keyboard (ARIA tree)