Better accessibility support in the frontend

spwoodcock commented 3 months ago

Is your feature request related to a problem? Please describe.

We have accessibility requirements: visually impaired, or low literacy levels.
The UI should be designed with this in mind, using icons, images, and easy intuitive navigation.
We also need ARIA for screen reader compatibility, amongst other accessibility optimisations.
Examples: https://docs.hotosm.org/dev-guide/accessibility/

Describe the solution you'd like

Add aria to all components and generally make improvements to the UI with accessibility in mind.
This might take a bit of time to go through, but isn't a difficult task.

Notes

While it's possible for us to add dark mode, high contrasts options etc for the visually impaired, it's not necessary with modern OS and browser accessibility options. There are also browser extensions that can handle this much better than we ever could.

spwoodcock commented 2 months ago

We should definitely use this as a reference https://github.com/hotosm/tasking-manager/issues/1257 when deciding on colour schemes, taking accessibility into account.

manjitapandey commented 2 months ago

Thanks @spwoodcock this could be definitely something interesting to have look. Are you aware that miro board of FMTM has a colour pallete for FMTM. I had been taking reference from there. https://miro.com/app/board/uXjVPX4XLcI=/?moveToWidget=3458764534814634286&cot=14 Make sure of it while designing further.

manjitapandey commented 1 month ago

The design team has run some experimentation on colour for different visual level. The figma design for it. https://www.figma.com/design/P4ZluaHvS9bSlB8mf7IOHu/Color-Blindness-test?node-id=0-1&t=EMC9KY4fXSuaRaiv-0

hotosm / fmtm