Better accessibility support in the frontend

[spwoodcock]

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]

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

[manjitapandey]

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]

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