Make app more accessible

[bmlancien]

Right now the app has a 100% score on the Lighthouse accessibility tool in the browser, but there are still a few things that could/should be improved:

• Being able to navigate through all items with the tab key (right now the tabs map/charts are not accessible)
• Check if using the web accessibility features from echarts makes sense and if yes, implement them
• Optional: Think of a way to display map results/data to visually impaired users, e.g. display the results as a list that a user can go through with a screen reader (not sure if and how it is possible)

I also opened that issue to emphasise the importance of accessibility, especially because the RLI wants to be all inclusive. Web accessibility is quite a broad topic, so we won't be able to manage everything, but I think it is good to always have this on the back of our minds.

[bmlancien]

Optional: Think of a way to display map results/data to visually impaired users, e.g. display the results as a list that a user can go through with a screen reader (not sure if and how it is possible)

Something better and easier to build would be using tab key to navigate inside the map: Once the map is selected, a municipality popup shows up and from there the user can navigate to other municipalities popups.

[4lm]

Right now the app has a 100% score on the Lighthouse accessibility

@nesnoj and @henhuy, just not to give the wrong impression that our app is accessible and that @bmlancien's suggestions are optional or just improvements. A Lighthouse score of 100 % is easily reached by adding the necessary alt and aria attributes. These are standard today and part of the Bootstrap component library our components are based on. But this is the bare minimum, a starting point to make the app accessible for visually impaired people. To make the app ready for accessibility use, we need to fulfill the suggestions @bmlancien made.

[bmlancien]

After trying to work on that point I came to the conclusion that we are lacking the resources to take care of it, as this topic is quite huge and it is not possible to get into the matter of the subject in just in a few hours...

What we already do/try to do correctly:

• alt, aria and other attributes and also correct use of HTML5 tags (see Lighthouse)
• color contrast and use of safe colors for blindness
• typography with main text 16px (although a big part of items are on 14px, otherwise too difficult to pack everything "nicely" into the app)
• partially possible to navigate the app with keyboard
• graphs partially readable through echarts (one screenreader tested out of two was able to read it)

There are still many things to work on. What I see as most difficult right now is the use of a screenreader, but also keyboard navigation, as well as probably other topics that are not covered here.

We will have to keep that issue into the background as hopefully try to focus on that topic on a future project. @nesnoj will check if it is possible to get some more resources for that.