Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

WCAG Accessibility Improvements - Low Hanging Fruits #10158

Open
1 task done
fkellner opened this issue Apr 4, 2024 · 0 comments · Fixed by #10159 or #10547 · May be fixed by #10161
Open
1 task done

WCAG Accessibility Improvements - Low Hanging Fruits #10158

fkellner opened this issue Apr 4, 2024 · 0 comments · Fixed by #10159 or #10547 · May be fixed by #10161
Assignees
@fkellner
Labels
enhancement
Milestone
2025.01.00

Comments

@fkellner
Copy link
Contributor

fkellner commented Apr 4, 2024

Description

image

Running the MapStore dashboard through Lighthouse currently yields a bad accessibility score of 62, and the
map view does not score much better (66). As a german company using MapStore, we are required by law to
put some effort into the accessibility of public facing websites.

Some changes that we did to improve the score are relatively painless and trivial, others, especially relating
to the labelling of buttons, introduce some small overhead. So, I will provide two PRs with our changes:

  • One with the tiny changes that should not be an issue with the rest of the code (like setting document language, alt tag for logo), but already improve the score considerably
  • One with the more complicated changes (mainly button labels with i18n).

I hope the first one should not be a problem for you to merge, but the second one I am interested in your feedback, but it is not a high priority enhancement.

A small accessibility issue in the navbar is currently caused by a react-bootstrap-Component, once you move on to the next major version, it should be fixed.

What kind of improvement you want to add? (check one with "x", remove the others)

  • Minor changes to existing features

Other useful information
fkellner pushed a commit to fkellner/MapStore2 that referenced this issue Apr 4, 2024
geosolutions-it#10158: set HTML document language
f7db699 
On Behalf of DB Systel
fkellner pushed a commit to fkellner/MapStore2 that referenced this issue Apr 4, 2024
geosolutions-it#10158: re-enable browser zoom
ca86ac3 
Too much Zoom does seem to break the layout, but handing that responsibility to the end user is more accessible than
disabling it. Map zoom is unaffected, and since using browser zoom enlarges map controls, users who tried zooming
into the map using browser zoom should be able to notice the actual controls and recover from their mistake.

On Behalf of DB Systel
fkellner pushed a commit to fkellner/MapStore2 that referenced this issue Apr 4, 2024
geosolutions-it#10158: Tiny Accessibility Fixes
6010b43 
- Convert heading that, semantically, should not be a heading, to a div
- correctly assign label to scalebox
- add alt tag to attribution logo

On Behalf of DB Systel
fkellner pushed a commit to fkellner/MapStore2 that referenced this issue Apr 4, 2024
geosolutions-it#10158: set HTML document language
94eb74a 
On Behalf of DB Systel
fkellner pushed a commit to fkellner/MapStore2 that referenced this issue Apr 4, 2024
geosolutions-it#10158: re-enable browser zoom
2d09822 
Too much Zoom does seem to break the layout, but handing that responsibility to the end user is more accessible than
disabling it. Map zoom is unaffected, and since using browser zoom enlarges map controls, users who tried zooming
into the map using browser zoom should be able to notice the actual controls and recover from their mistake.

On Behalf of DB Systel
fkellner pushed a commit to fkellner/MapStore2 that referenced this issue Apr 4, 2024
geosolutions-it#10158: Tiny Accessibility Fixes
548407d 
- Convert heading that, semantically, should not be a heading, to a div
- correctly assign label to scalebox
- add alt tag to attribution logo

On Behalf of DB Systel
@fkellner fkellner mentioned this issue Apr 4, 2024
Merged
2 tasks
@tdipisa tdipisa linked a pull request Apr 4, 2024 that will close this issue
#10158 painless accessibility improvements #10159
Merged
2 tasks
fkellner pushed a commit to fkellner/MapStore2 that referenced this issue Apr 4, 2024
geosolutions-it#10158: tooltip enhancer adds 'aria-label' with l10n
0463e49 
Modify tooltip enhancer to also provide `aria-label`-property to wrapped objects
(most commonly glyph-only buttons). Does localization on a best-effort basis, trying
to unwrap messages passed in as tooltip prop.

On Behalf of DB Systel
fkellner pushed a commit to fkellner/MapStore2 that referenced this issue Apr 4, 2024
geosolutions-it#10158: refactor more buttons to use tooltip enhancer
53867bf 
Use accessible tooltip enhancer in Locate, Redo, Undo, Zoom and Toggle button components

On Behalf of DB Systel
fkellner pushed a commit to fkellner/MapStore2 that referenced this issue Apr 4, 2024
geosolutions-it#10158: add aria-labels to maps search bar and home bu…
0425114 
…tton

This required adding some new text to the translation dictionaries.

On Behalf of DB Systel
@fkellner fkellner linked a pull request Apr 4, 2024 that will close this issue
Open
2 tasks
@tdipisa tdipisa linked a pull request Apr 4, 2024 that will close this issue
Add localized aria-labels to glyph buttons #10161
Open
2 tasks
fkellner added a commit to fkellner/MapStore2 that referenced this issue Sep 10, 2024
@fkellner
geosolutions-it#10158: set HTML document language once per mount/update
fed18c5 
As requested, the document language is now set when the component is mounted or the language is changed instead of with every rerender.
fkellner added a commit to fkellner/MapStore2 that referenced this issue Sep 10, 2024
@fkellner
geosolutions-it#10158: set HTML document language once per mount/update
b05cd29 
now with eslint fixes
fkellner added a commit to fkellner/MapStore2 that referenced this issue Sep 10, 2024
@fkellner
geosolutions-it#10158: set HTML document language once per mount/update
375292a 
As requested, the document language is now set when the component is mounted or the language is changed instead of with every rerender.
@tdipisa tdipisa added this to the 2024.02.00 milestone Sep 11, 2024
@tdipisa tdipisa added the BackportNeeded Commits provided for an issue need to be backported to the milestone's stable branch label Sep 11, 2024
allyoucanmap pushed a commit that referenced this issue Sep 13, 2024
@fkellner
#10158 painless accessibility improvements (#10159)
6f6b28a 
* #10158: set HTML document language

On Behalf of DB Systel

* #10158: re-enable browser zoom

Too much Zoom does seem to break the layout, but handing that responsibility to the end user is more accessible than
disabling it. Map zoom is unaffected, and since using browser zoom enlarges map controls, users who tried zooming
into the map using browser zoom should be able to notice the actual controls and recover from their mistake.

On Behalf of DB Systel

* #10158: Tiny Accessibility Fixes

- Convert heading that, semantically, should not be a heading, to a div
- correctly assign label to scalebox
- add alt tag to attribution logo

On Behalf of DB Systel

* #10158: set HTML document language once per mount/update

As requested, the document language is now set when the component is mounted or the language is changed instead of with every rerender.

---------

Co-authored-by: Florian Kellner <florian.fl.kellner@deutschebahn.com>
@tdipisa tdipisa modified the milestones: 2024.02.00, 2025.01.00 Sep 13, 2024
@tdipisa tdipisa removed the BackportNeeded Commits provided for an issue need to be backported to the milestone's stable branch label Sep 13, 2024
@tdipisa tdipisa reopened this Sep 13, 2024
allyoucanmap pushed a commit to allyoucanmap/MapStore2 that referenced this issue Sep 16, 2024
@fkellner @allyoucanmap
geosolutions-it#10158 painless accessibility improvements (geosolutio…
d29b8f7 
…ns-it#10159)

* geosolutions-it#10158: set HTML document language

On Behalf of DB Systel

* geosolutions-it#10158: re-enable browser zoom

Too much Zoom does seem to break the layout, but handing that responsibility to the end user is more accessible than
disabling it. Map zoom is unaffected, and since using browser zoom enlarges map controls, users who tried zooming
into the map using browser zoom should be able to notice the actual controls and recover from their mistake.

On Behalf of DB Systel

* geosolutions-it#10158: Tiny Accessibility Fixes

- Convert heading that, semantically, should not be a heading, to a div
- correctly assign label to scalebox
- add alt tag to attribution logo

On Behalf of DB Systel

* geosolutions-it#10158: set HTML document language once per mount/update

As requested, the document language is now set when the component is mounted or the language is changed instead of with every rerender.

---------

Co-authored-by: Florian Kellner <florian.fl.kellner@deutschebahn.com>
@allyoucanmap allyoucanmap mentioned this issue Sep 16, 2024
Merged
2 tasks
@allyoucanmap allyoucanmap linked a pull request Sep 16, 2024 that will close this issue
[Backport 2024.02.xx] #10158 painless accessibility improvements (#10159) #10547
Merged
2 tasks
tdipisa pushed a commit that referenced this issue Sep 16, 2024
@allyoucanmap @fkellner
#10158 painless accessibility improvements (#10159) (#10547)
a4e4f36 
* #10158: set HTML document language

On Behalf of DB Systel

* #10158: re-enable browser zoom

Too much Zoom does seem to break the layout, but handing that responsibility to the end user is more accessible than
disabling it. Map zoom is unaffected, and since using browser zoom enlarges map controls, users who tried zooming
into the map using browser zoom should be able to notice the actual controls and recover from their mistake.

On Behalf of DB Systel

* #10158: Tiny Accessibility Fixes

- Convert heading that, semantically, should not be a heading, to a div
- correctly assign label to scalebox
- add alt tag to attribution logo

On Behalf of DB Systel

* #10158: set HTML document language once per mount/update

As requested, the document language is now set when the component is mounted or the language is changed instead of with every rerender.

---------

Co-authored-by: fkellner <mr.florian.kellner@posteo.de>
Co-authored-by: Florian Kellner <florian.fl.kellner@deutschebahn.com>
offtherailz pushed a commit that referenced this issue Oct 18, 2024
@fkellner @offtherailz
#10158 painless accessibility improvements (#10159)
b4bfa14 
* #10158: set HTML document language

On Behalf of DB Systel

* #10158: re-enable browser zoom

Too much Zoom does seem to break the layout, but handing that responsibility to the end user is more accessible than
disabling it. Map zoom is unaffected, and since using browser zoom enlarges map controls, users who tried zooming
into the map using browser zoom should be able to notice the actual controls and recover from their mistake.

On Behalf of DB Systel

* #10158: Tiny Accessibility Fixes

- Convert heading that, semantically, should not be a heading, to a div
- correctly assign label to scalebox
- add alt tag to attribution logo

On Behalf of DB Systel

* #10158: set HTML document language once per mount/update

As requested, the document language is now set when the component is mounted or the language is changed instead of with every rerender.

---------

Co-authored-by: Florian Kellner <florian.fl.kellner@deutschebahn.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@fkellner fkellner

Labels
enhancement
Projects
None yet
Milestone
2025.01.00
2 participants
@tdipisa @fkellner