Accessibility is a fairly new concept in the world of the web. The web itself is only in its early 30's (not much older than myself!) and I think it's fair to say that accessibility wasn't a priority in Web 2.0. To catch up, it makes a lot of sense to stand on the shoulders of giants - what can we learn about accessibility from the real world that we can apply to the web?
⚠️ This article was written in and last updated in so may contain some out of date information.
Although my day job is as a backend web developer, I take a lot of interest in the frontend world and deem myself a bit of an accessibility advocate. I'm also a real outdoors enthusiast, but we'll come on to why that's relevant later.
The real world contains thousands of examples of accessibility. From accessible parking spaces and accessible toilets to tactile paving, ramps and hearing loops. But it can be quite difficult to find parallels to some of the issues we come across on the web.
If only there was something from the analogue world that conveyed information in a visual way, more like a website...
Outside the office, I'm a real outdoor enthusiast. Generally accompanied by my girlfriend Kirsty, a geographer, and my dog, Carter; we enjoy hiking, camping, canoeing and much more. Many of these activities require the use of maps for our enjoyment and safety.
What with me being an avid map-user and my girlfriend being a geographer, one day we started to discuss the accessibility of maps, and I realised there were many parallels we could draw with the web.
We're going to take a look at how maps are an accessible method of visually representing data. These outdoor maps I'm going to be talking about are pretty poor at highlighting accessible facilities or routes. You won't find accessible toilets, paved footpaths, footpaths without styles, etc. marked on these maps. I do, however, think that as a visual method of representing data, these are a good example. Even if they don't convey information about accessible features.
Mapping has been around for a long time and the web, well, hasn't.
Mappa mundi, crude religion-centred maps of the known world, were created in the early 14th century and serious mapping of English towns began in the 16th century. While Ordnance Survey- who's maps I use regularly - started their work in 1791. What have Ordnance Survey (OS) done in those past two centuries to improve their maps usability, and what can we learn from them?
I'm using Ordnance Survey maps for the purposes of this blog post. You should be able to pan around and zoom from a 1:25,000 to a 1:50,000 scale map.
If I gave you a map you'd never seen before and asked you to point out a lake, a river, woodland or roads I'm sure many of you would have little issue in doing so. They use logical colours, shapes and symbols which reflect the real world.
Take a look at the car park "P" symbol, the man and woman symbol denoting the public toilets and various icons related to boats. Also note how the water is blue and the woods are green with tree symbols.
A more experienced map reader can identify hilltops, ridges, valleys, and steep cliffs all from the shapes of the thin brown contour lines. You can even tell whether a place of worship has a spire or a tower or if woodland is deciduous, coniferous or a mixture.
Power lines, boundaries (normally fences) and the type of footpath can also be read from OS maps, but they don't provide too much noise to distract from the basics.
In a digital map, like Google Maps or OSM, more or less detail can be rendered depending on the zoom level. Zoomed out, we see the bigger picture: town names and major roads but as we zoom in, we see minor roads and buildings beginning to appear as well as names of smaller areas and more points of interest. We may even lose sight of the bigger picture things like town or city names because they become less appropriate as we zone in.
Print maps do this too. Ordnance Survey release several scales of map each with different levels of detail. The 1:25,000 scale (4cm on paper is 1km in the real world) is commonly used by hikers so they can see the intricacies of tiny crossing footpaths.
Cyclists, however, can travel so far in a day as to render a 1:25,000 scale map useless! 1:50,000 is more common (2cm to 1km) for those on two wheels. You don't see so many little footpaths, but the main cycle tracks are clearly marked and there's enough detail to appease the faster-traveller.
Heights are provided as spot heights, contour lines and contour numbers and a reader can use whichever method is most appropriate. An approximate height o be climbed on a hike can be taken from the spot heights at the top of peaks, but for a more detailed estimate, you can count the ups-and-downs along a route using contours.
Generally speaking, the more important the location the more prominent its name will appear on the map. This makes a lot of sense. If I want to find Lougrigg Fell, I'd have very little chance of finding it unless I look first for the county of Cumbria, then for Ambleside and finally for Lougrigg. The prominence of these place names, therefore, reflects that structure making small places easy to find.
A good map will generally use high contrasting colours to help different features stand out. Text is often outlined in white (or carefully positioned on manually designed maps) to make it stand out further from the background.
Shaded areas such as woodland or grassland will usually have a tree or grass symbol, so they can be identified without relying on colour.
The OS and OSM maps work in monochrome (as anybody with a budget-conscious photocopier-happy secondary school geography teacher will appreciate!) which makes them colour-blind friendly.
Where colour is used, it's used to enhance. The text colour on these maps is contextual to help identity what a label is labelling: a river is labelled in blue while woodland is labelled in green.
Unfortunately, paper maps don't work well for people with severe visual impairment or blindness. However, many digital mapping apps provide a reasonable navigation experience with a screen reader.
It's also possible to print 3D maps based on OSM data using services like Touch Mapper.
Open Street Map has several projects "to provide accessibility to the OSM services for blind and visually impaired persons". More information is available on the OpenStreetMap wiki
From this analysis, I think there are a few pieces we can take away and apply to our industry.
Although there's a lot of information detailed in the maps we've looked at today, they don't distract from the basic information. On the web, we should be careful to only include the information people need, avoiding waffle and information the user is unlikely to want or need. We can summarise the content of a page early on to save users reading through all the detail if they don't need to.
Simplifying information doesn't mean we need to trivialise it. Provide more in-depth information further down in an article or by linking to other pages which go into more detail on a specific subject.
It may seem obvious to give bigger towns larger text on maps, but we also need to ensure sections are clear on our websites to allow for skimming. Use appropriate headings (h1-h6) and semantic markup. This applies to your site as a whole as well - think about site structure and menus.
There's really no reason not to! Check your colours using contrast checkers and make sure any text overlaying an image will always meet the requirements! It might be worth suggesting brand guidelines are amended.
But it can be very useful to provide supplemental information. If you're using colour to convey something important, also use an icon or pattern.
Cross-link to related content and provide key information from a graph in text too. Make sure your users can find that important information!
But the most important takeaway from this is that if we come across an accessibility problem we're trying to solve, we can look to the real world to find solutions - we're not limited to the comparatively inexperienced world of web accessibility.