Feature/f 160 accessibility improvements #124
Conversation
✅ Deploy Preview for wfp-hungermap ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
oopsie, didn't realise this task was assigned to you so I also worked on a11y in #131. I didn't do much with the contrast so your solution is definitely better, but yu can check mine, maybe you can use something from there. Also leaflet puts role='button' on every marker, so we probably won't get a perfect score, but that warning is also on the old hungermap |
Yes, I will check it, we will try to improve our score as much as possible, after merge your and my PR I think we will have made a lot of improvements. |
|
feel free to merge this before mine btw, you're solutions are much better and I wasn't supposed to work on a11y anyway |
|
Finally, a11y works again locally, to be check in preview! |
Before totally ok for lighthouse a11y score
Right now struggling on solve this issue since no enough hint and explaination about this error from devtools,
its really hard to find solution to resolve contrast issue. Before it works but from idk some timepoint it doesn't work anymore
Now issue has been adressed in MapLegendLoader once delete this component ,then lighthouse works again. But why is this happend no idea, I found nothing related to color contrast. @marinovl7 @Tschonti
This pull request focuses on improving accessibility across various components and adding new accessibility-related features. The most important changes include adding aria-labels to interactive elements, enhancing color contrast, and ensuring proper HTML structure for better accessibility.
Accessibility Improvements:
Aria-labels and attributes:
aria-labelto buttons inAccordionBoxItems.tsx,Chatbot.tsx,LegendContainer.tsx,ZoomControl.tsx, andThemeSwitch.tsxto improve accessibility for screen readers. [1] [2] [3] [4] [5] [6]aria-hidden="true"toSkeletoncomponents in multiple files to indicate that these elements are for visual presentation only and should be ignored by screen readers. [1] [2] [3] [4] [5]Color contrast and styles: This is what I do for other pages, to improve contrast, so you will see it works for other pages but for map page, currently lighthouse not working because of contrast error.
ExternalLink.tsx,StyledLink.tsx, andTopbar.tsxto ensure sufficient color contrast between text and background for better readability. [1] [2] [3]Map accessibility:
AccessibilityOperationsclass to add aria-labels and styles to map markers, making them more accessible and easier to interact with. [1] [2]These changes significantly enhance the accessibility of the application, making it more user-friendly for individuals with disabilities.