Hey devs around here: how do you test accessibility?
I've been testing #mapcomplete with the #Orca #screenreader today, and fixing some issues but I feel quite unsure about it, so I'p interested in your approaches.
Or if someone who's using a screenreader could help me test (in #ghent or at #CCC), that would be appreciated
Peter Vágner
in reply to Pietervdvn • •Pietervdvn
in reply to Peter Vágner • • •Yeah, I know. I've been testing and improving this on dev.mapcomplete.org, so there shouldn't be as much unlabeled buttons there anymore (but there still are a few of them there).
I'm also really wondering: how do you use a map application? How do you move around in the interface? Do you expect to have a list of nearby items?
Peter Vágner
in reply to Pietervdvn • •@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 verry 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.
Shal I try posting more of my ideas or is it not something that would be usefull to you?
Peter Vágner
in reply to Peter Vágner • •Paweł Masarczyk
in reply to Peter Vágner • • •Peter Vágner
in reply to Paweł Masarczyk • •Paweł Masarczyk
in reply to Peter Vágner • • •Pietervdvn
in reply to Peter Vágner • • •@pvagner Thanks for all the pointers!
The idea is that you can indeed select a nearby bus stop by pressing space or the keys 1,2 or three. When one of the closest features is selected, a popup with information opens up. It _should_ read this aloud, but I'm still figuring out how to let ORCA do this...
Additionally, one can also answer some questions about the selected location to help others.
The shaking is a good idea as well! It'll take me a few more days to implement this though.
Pietervdvn
in reply to Pietervdvn • • •@pvagner I had a look to the walker app and got terribly confused about it at first. I did get navigation running at my second try though. However routeplanning and navigation are not features that are currently planned in the near future (also not for sighted users).
I couldn't get the OsmAnd-a11y version running on my phone, but what you describe is already interesting...
And yes, it is quite challenging but also interesting to get this all up and running, but part of my NlNet grant!
Peter Vágner
in reply to Pietervdvn • •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.
Peter Vágner
in reply to Pietervdvn • •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 inwoking 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.
If making the map navigation into an interactive control such as grid is too much work or it's clashing with other features or it's simply not viable because of something entirely different I can't really understand, perhaps you should be able to generate off screen alerts so only the screen reader users will get some feetback while moving the map. Please note these are two links.
Peter Vágner
in reply to Peter Vágner • •Excuse me please for not checking this more thoroughly previously.
Peter Vágner
in reply to Peter Vágner • •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 likelly 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 likelly be an awesome achievement but I can imagine this is not under your control at all and is neither coverred by your grant.
Am I getting closer in understanding this?
Peter Vágner
in reply to Peter Vágner • •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. 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.
Also would it be possible to also report a distance to the closest feature from the navigation point?
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 helpfull understanding the surrounding this way.
This way we would really get perfectly accessible map right in the browser. Huh... How much excited I am.
Peter Vágner
in reply to Peter Vágner • •@pietervdvn Awesome! You are working hard and now the distance and 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?
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.
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.
Pietervdvn
in reply to Peter Vágner • • •@pvagner
Thanks for all the feedback! I copied most of your replies to my issue tracker here: github.com/pietervdvn/MapCompl…, partly to structure the data, partly for easy, future reference.
Some of your ideas have been implemented by now (shaking the phone for reverse geocoding for example).
But there are also some issues where I need your input and some stuff still needs clarification.
Framework and WCAG audit · Issue #1181 · pietervdvn/MapComplete
GitHubPietervdvn
in reply to Pietervdvn • • •Pietervdvn
in reply to Pietervdvn • • •@pvagner Second, you also want to use arrow keys to pan the map when the canvas element is unselected.
On my setup (which is Orca with Librewolf, a fork of Firefox), this does not work. IF the screen reader is _off_, the map will move if any element is selected. If the screenreader is on, then the map won't move, but orca will instead read out the next/previous item. As such, the canvas needs to be a selectable element.
There is also the 'ghost element' you mention, I hope it is gone now
Pietervdvn
in reply to Pietervdvn • • •Furthermore, I moved the nearby features between the canvas element and the search element. It seems more logical in the tab flow.
Furthermore, I've changed the 'nearby features' into a link instead of a button. This seems to give the desired result of both reading it aloud at the right time _and_ being selectable.
Pietervdvn
in reply to Pietervdvn • • •At last, you also mention that you want the nearby features to have a 'clock'-interface. I'm not sure what you mean with this, but I can take a guess.
The Walkers-app will indicate that a POI is 'to your left', 'sharp right',...
I cannot use this approach in all circumstances:
1. The device showing mapcomplete might not have a compass builtin, e.g. desktop computers or laptops
2. If you are browsing a location a few KM away, all shops will have a similar bearing
Pietervdvn
in reply to Pietervdvn • • •@pvagner
3. What if the user rotates e.g. 180° while the screen reader is still reading all the nearby features? Then 'left' will suddenly have become 'right'.
Pietervdvn
in reply to Pietervdvn • • •@pvagner I'm currently thinking about doing the following:
1) If the map center is close (<20 meter) to the current GPS location and compass is available, use 'left', 'right', ... just as the walkers app
2) If not, use 'north','northeast', ... instead
3) Ignore that a user might turn around while the text is being read.
Peter Vágner
in reply to Pietervdvn • •@pietervdvn Oh you are so awesome. You are accounting for all the use cases. Originally I have only assumed using the app in the desktop browser with static bearing to the north with an effect that the navigation point is not moving at all and the map is scrolling on the background. I know making it in a way you are describing sounds more natural and most likelly requires additional work. If you believe it's viable, then I am fine with that of course.
Are the things you are describing i.e. fixed the so called ghost focusable node, closes features as links deployed already I can't recognize these on my end. If it's already there perhaps I should clear my browser cache or something similar.
As for the WCAG 2.1 audit I don't have real experiences with that.
Perhaps it's worth asking more people including @Web Axe @Marco Zehe or others for an avice as well.
Pietervdvn
in reply to Peter Vágner • • •