Hi,
I would like to use OSM for a project but accessibility is crucial as it will be checked and judged based on this factor. I noticed that if you run pages that include OSM maps through a couple of common in-browser accessibility checkers they find a lot of errors. For example, test Best of OpenStreetMap using the WAVE plugin from AIM.
Even the map at https://www.openstreetmap.org throws around 30 errors.
Is there a way to get the maps to render without these errors?
Thanks
This is a bit of a difficult question to answer without knowing what kind of issues you are seeing, at least a rough category would be helpful. Note that none of the libraries that are commonly used to embed OSM raster or vector tile in websites are direct products of the OSM community.
To add a bit to what Simon said, the answer to your question is certainly âyesâ.
OSM data is just data - how you present that to users is** entirely up to you. You might choose to in the form of some sort of map, but you donât have to, and if you do what form that takes (what things are shown, in what colours, if any) are entirely up to you.
If you can provide a bit more information about what you are trying to do, Iâm sure that people will be able to help. One caveat with âtrying to do something new and unusualâ - if no one else has done it before then you will need to do more work as there will be less previous work to draw on.
** apart from attribution requirements
Hi Simon,
I already use OSM in a project that Iâd rather not share but the issues I can see there in accessibility checkers are the same as those in the example I gave, the âBest of OpenStreetMapâ link. 157 errors, 145 of which are relating to lack of alt text in the tiles I think. What needs to be there on each tile is blank alt text, which tells screen readers that the image is decorative.
Please give us at least a chance to help you by linking to something that we can look at. You havenât even told us if what you want is a map on a screen or not, and if so what sort of map you want. Many of the maps that Iâve created (for car sat-navs) were optimised to be heard rather than seen, so you really need to give us more help here.
If youâre genuinely interested in accessibility (rather than just passing some arbitrary third-party audit to get a contract) then essentially raster-based maps, such as those presented at openstreetmap.org, are not really capable of being made accessible for blind or many visually imparied users.
Adding alt text to every single map tile saying âThis is a raster map image that you probably canât readâ might fulfil your project checklist and get the 145 errors down, but it wonât really do anything to help your users.
(Vector tiles offer more possibilities for the committed developer and @Minh_Nguyen of this parish previously wrote on this over at Mapbox: Accessibility â maps for developers)
That aside, if you want to look at accessibility options for an embedded map using raster tiles from osm.org, you probably want to build the embed using Leaflet, and here are Leafletâs tips on accessibility:
My (potentially wrong) understanding of this is that the validator is complaining that the tile images donât have an alt attribute. The validator wants them to have a alt="" attribute, which makes some sense (decorative images are explicitly marked as such by providing alt="", the map tiles arenât really decorative, but theyâre quite difficult to create a meaningful alt text for).
When I check, I do see an alt attribute on tiles on openstreetmap.org:
Leaflet.js, the usual library for embedding slippy tile maps on websites, does have a blank alt text: Leaflet/src/layer/tile/TileLayer.js at 58c267b7c1c530b238742c7f0054abdc11d43054 ¡ Leaflet/Leaflet ¡ GitHub and thatâs been the case since 2014: Add alt to tiles for accessibility reasons by dvito ¡ Pull Request #2509 ¡ Leaflet/Leaflet ¡ GitHub
A personal map I made using Leaflet.js does also have the alt="" attribute on tiles:
So, which mapping library or solution are you using, and can you use Leaflet instead?
Thank you, Leaflet may be what we need.
I will investigate.
