Framework and WCAG audit

[pietervdvn]

One of the NL-Net tasks is to pick a framework and do a WCAG-audit This is split in the following subtasks:

• [x] Choose a framework, refactor (most of) the UI to the new framework.
• [x] Do a WCAG-audit, address discovered issues (possibly with the help of the HAN University of Applied Sciences)

As this issue is mostly for project management, no discussions are allowed here. The actual discussion is in #1142

[pietervdvn]

• We have decided on Svelte.
• The build process has been switched to Vite (see branch feature/vite)

[pietervdvn]

• The first Svelte-components are now production

[pietervdvn]

WCAG-audit action points

• [x] The contrast between foreground and background is not sufficient for all gray subheaders and the placeholder in the search bar.
• [x] The language selector doesn’t have a name (label). Screenreaders need these to know what the element is and does.
• [x] On mobile devices zooming is disabled, but WCAG requires users to be able to zoom in and out.
• [x] Subtitles are no longer completely visible when zooming in 400%.
• [x] Buttons don’t have name (label) so the screenreader doesn’t know what the button is for.
• [x] Functional images and icons such as the hamburger menu don’t have describing (alt) texts.
• [x] The map doesn’t have a visible focus. The focus is sometimes not around the element but under it.
• [x] The background layer options don’t have a visible focus
• [x] Keyboard: you can’t select items on the map such as water points. Maybe a design like VRBO would work here (having a list on the side with all the POIs)
• [x] The edit button in changing a POI doesn’t have a name (label)Background layers
• [x] Form elements have missing labels. Placeholder text is not allowed as label. See also the forms tutorial under Chapter 3: References
• [x] Form: options for bike rack are read out twice. The radio button is not grouped with the image and text.
• [x] Form: missing label for ‘this is a bicycle parking of the type’

[pietervdvn]

Feedback from a blind user (source: https://en.osm.town/@pietervdvn/111574635301842126)

I've copied and slightly edited the conversation below. The aim of having everything here is to structure the conversation and making sure it can be found and referenced in the future.

First test results

@pietervdvn Huge thanks for spending your time on accessibility. I have opened an URL dev.mapcomplete.org/transit.ht… Then I used tab and shift+tab to navigate. I have identified all the buttons are clearly labelled such as Menu, Add a new feature, Filter data, Change background, Zoom in / Zoom out and Go to your current location. I have pressed the button Go to your current location. That has found my location and redirected me to this url dev.mapcomplete.org/transit.ht… . I have then switched orca to so called browse mode, if you would like to do a similar thing without orca running you might like to try enabling caret navigation by pressing F7 key. At the top of page I have noticed names of near by bus stops with some familiar names, so now I at least know I am doing it right. And from this point onwards I'd need some hints helping me to figure out what I can do. Is there a way to see all the details about a particular point from these? How do I scroll the map so I will find different area except of using the search? Should I change the zoom level, click and change the zoom level again or what are the appropriate actions? It's verry difficult for me to ask for more features, as I even don't know what to ask for. In order to possibly give you some inspiration, I can try to describe how I am using Walkers Guide or modified osmand apps for the navigation on android. Osmand access has a reverse geocoding builtin. It can be configured to announce the nearest point or nearest address when shaking the device. So for example when riding a bus I am using this feature to find out where I am heading to and if it's okay to go out on the next stop. Along with the address it prints relative direction and distance to that point so I have an idea of where the points are situated. For example by repeatedly using this functionality I am able to find out which side are odd address numbers and the other way round. Walkers guide does not have such a feature but it's showing a list of near by points. It's advantage is that it gives details of entrance and exit information and calculates intersections. So when using walkers guide I am refreshing the list and looking what's around from the top of the list. Osmand access also has so called Look around feature. When walking I am often using this kind of looking around, finding points I need to pass by approximatelly each 100 meters making sure I can find my destination.

Now back to the map complete. This is now starting to look very promising. I don't know how much accessibility you are planing spending your time on. But take this as my aloud thinking. It would be nice to make the points on the map interactive and allow kind of a virtual navigation from point to point presenting the direction and distance. When thinking about implementation details perhaps it should be presented as a never ending aria grid using arrow keys for navigating from point to point. For example the map that I am linking to in this post shows bus stops but it covers less than 2 kilometres. I know this because I do physically know this part of the city but by using the map alone I have issues figuring this out. Shall I try posting more of my ideas or is it not something that would be useful to you?

Second test results

@pietervdvn Thanks for the hints. I can now understand how to select closest feature. When pressing the space bar the dialog box comes up with first feature being preselected and there is a way to dismiss it by pressing the esc key, changing the feature can be done either by pressing 1, 2 or 3 on the keyboard or activating corresponding buttons. Answering the questions is working fine, I can recognize and activate the buttons and radio buttons there. This is really amazing.

Still I am not sure how to really move the map. I was trying to press arrow keys randomly no matter which direction and how much I was trying I can still only get the initial three features in the dialog when pressing the space bar key.

For me when showing the dialog for the first time its content is read automatically by orca. When invoking it multiple times it's not read. This might also be either orca or the browser issue so I will have to test this on different platform / screen reader combination as well for example with NVDA on windows. So far I am using Firefox 22 nightly on linux with orca.

I am sure orca is not consuming my keypresses as I have switched it to sticky focus mode by quickly pressing orca+a two times. Orca key is either insert key or capslock key depending on the config. The default is insert.

Third test

@pietervdvn I'm playing more with the dev.mapcomplete.org site. I think I am closer in understanding the accessibility issues. For displaying the map you are using maplibre. It renders the tiles and also adds labels. Non screen reader users can simply use their mouse to scroll the map widget and click on the labels and open the feature details this way. I think the proper way on how to solve this for majority of the apps would be introducing some accessibility related functionality into the maplibre rather than your app. I assume using the arrow keys to scroll the map widget is working but most likely it's not synchronized with the three buttons you have introduced into the map complete app.

When reading the content as a document from top to bottom I can read the labels on the maplibre widget. Making these labels navigable as a grid and actionable at the same time would most likely be an awesome achievement but I can imagine this is not under your control at all and is neither covered by your grant. Am I getting closer in understanding this?

and a bit later...

Oh not. Excuse me. I have found more. You do already have almost everything I'm looking for in place. My missunderstanding comes from the fact the maplibre component has a canvas for rendering the map data. That canvas has tabIndex=0 and is also the first focusable element on the page. It has an aria-label="Use arrow keys to move the map, press space to select the closest feature". I have assumed I have to focus this control and use the arrow keys to move. I think this should not be focusable.

If orca is off, pressing an arrow key will indeed pan the map. However, Orca intercepts the arrow keys to read various pieces of text so the maplibre-canvas should be selected to actually be able to move the map

Exploring the app more when navigating with the tab key, it takes two tab key presses to navigate from the canvas to the search field. There is a focusable control which has no role and no label at least orca is silent when navigating to it.

I have no idea which element this is, might be removed by now?

Pressing shift+F10 is not working either when this part of the app is focused so I could better describe it to you by listing its CSS classes or something however pressing arrow keys while this part of the app has focus indeed moves the map and orca is announcing alerts such as "Moving north. Closest features are:" However the closest features are buttons, these are not being read automatically. So perhaps duplicating their names as an off screen text inside the alert would be a good idea in order to make this part even more accessible.

There is a problem, buttons are not being read properly. I've changed them into a link, which is semantically more correct and reads correctly

Also would it be possible to also report a distance to the closest feature from the navigation point?

I assume that 'navigation point' means 'the location currently reported by the GPS-receiver' (thus: the location where you currently are in normal circumstances.) I've added a little text saying where the "map center" (aka "viewport center") is relative to the GPS-location.

Changing the zoom level and navigating in all directions we could get understanding on how far particular features are from each other. I know these would be a relative distances that are different as we are not navigating streets and sidewalks this way but it would still be helpful understanding the surrounding this way.

This way we would really get perfectly accessible map right in the browser. Huh... How much excited I am.

Direction is reported for all three closest features. Instead of direction angle in degrees would it be possible to change it to clock facing or 8 direction values such as front left, straight, front right and similar?

Should this be similar to the 'Walkers app'? The walkers app gives 'to your left', 'straight ahead', 'sharp right' at the moment one refreshes. This requires to have the compass available and won't work on desktop/laptop computers which generally don't have a compass builtin. Second, this should be updated when the user turns around. And what should happen if the user turns around while the screenreader is still reading this aloud?

Now the closest features are no longer buttons but clickable text and it's now being reported fine in firefox. We have lost navigating to them and activating them with keyboard. I know this is difficult decision and I don't have my final suggestion for this.

As earlier, with 'links' they are both read out aloud, navigatable and semantically correct.

Also I have tested this in chromium as an addition to firefox and the issue with ghost focusable node is not there with chromium so from the map to the search field it takes exactly single tab key press. That issue is therefore either specific to firefox or specific to my setup.

With chromium and orca on linux the alert displaying closest features is more verbose as compared to the testing with firefox.

I haven't managed to test other platforms yet e.g. android or windows.

Thank you for all of this again.

About Walkers App

https://en.osm.town/@pvagner@fedi.ml/111584029504515012

Ah I haven't yet replied about the walkers guide app part. Yes I understand map complete does not have route planning and guided navigation. There is a tab named Points in that app and it's a list of 100 closest points that can always be refreshed. This part is most usefull to me when using that app. I'm trying to learn and possibly let you to think about it how we might be able to reach more features with the map complete too.

In a 'point profile', one can select which types of POI should be displayed, e.g. 'food and drink', with a distance and direction indicator

[pietervdvn]

Fourth test

@pietervdvn Awesome the live region improvements sound nice. The #accessibility user experience feels great to me. Now the app is working fine for me on linux with #orca running in both chromium and firefox. I haven't yet managed to test it on windows with#NVDA @NVAccess

I am not yet sure, perhaps you can give me an advice regarding this however now when scrolling the map we are getting distance and the direction from the navigation point to the map center spoken along with three closest features on the map. Have we lost the ability to hear distance from the map center to those close map features?

Note: the navigation point is the current GPS-location

I'm thinking the way it's working now might be usefull when used on a mobile device with the current location updated as I move around. And ability to hear distance from the center to the map features might be usefull when browsing the map on a computer. In this scenario I'm thinking I would use the map center as a replacement for the navigation point finding out what I should do in order to move to a certain map feature. Or perhaps this is already possible and I just haven't discovered it all. Can you please try to describe how you think it's best used?