Today I will be giving my very first ‘proper’ presentation to an office full of colleagues. My colleagues aren’t scary — but the prospect of standing in front of them all, and trying to sell them something that I believe in certainly is!

I have called the presentation Accessible Design, and it is inspired greatly by the Accessibility for UX Designers workshop that I attended after the Ready to Inspire conference in Leiden was over. Searching for Universal design or Inclusive design will find you more reading material if you wish.

I decided to focus on a page from Europeana Professional, as my example. I could have focussed on accessible forms, accessible tables, or modal windows, but I thought that a map could be a fun challenge.

I stumbled a few times, I spent a lot of time on the Google Maps API page, and I tried a few dead ends before a colleague suggested Leaflet as a possible solution. I fiddled with that, adding geolocation, navigation (which was surprisingly not there by default), and a change to the markers, to get it looking a little how I wanted. I also put Fitmaps in place, which is a responsive map solution.

Using em‘s for everything, it meant that a visitor could zoom the content via their keyboard (CTRL and +), and the layout would not break. This would mean that if a high magnification level was needed, then this was possible.

First version

The first version can be found here: Accessible map: version one.

To be honest, I knew that I would be building this in stages, and I knew as I was putting this together that it would not tick every box. I wanted to do this so I could show in the presentation where the flaws were, and what elements may be overlooked.

In the presentation I highlighted a couple of key things.

This map is not accessible for visitors who are blind. The visitor will be able to use the keyboard to navigate and use the controls, but they would not be able to read the content on the markers. This could perhaps be solved with better Javascript skills, which would involve reworking the code to switch the order of tabindex on the markers. To elaborate, I did put tabindex in place, however when tabbing to the map, it went to the markers before it went to the controls.

Also, I left the link text in place. After all click here is not suitable for link text. If you are tabbing with a screen reader, then the link needs to be descriptive. I made changes to this link text in version two, to show what the improvement to somebody using a screen reader. I’d also say that for skim readers, this would also be beneficial.

Finally I felt that the map was not great for visitors who may have a cognitive disability, and I wanted to make this clearer and more understandable.

Second version

I resisted on calling this the Final version, as I know that I will be able to revise this further. I do need to work with some of the markup, and a couple of other things that I would like to work on to further improve it. Although not necessary, a Skip to main content solution should be put in place. It is not needed on a simple page as this, but I think it will be good practice to get into good habits. Also, I want to do more with ARIA roles in the future, I am sure that there are more that I can introduce on the select box, and the map itself.

The second version can be found here: Accessible map: version two.

As you will see. I reinforced the map with a drop-down selector. I went with this for many reasons, namely the proximity between the question and answer implies that they are related, and so I believe this could be more understandable for people with cognitive disabilities, than an awkward map which requires lots of clicking/dragging/zooming.

I did focus a lot on disabilities in the presentation, but I also hope that the main point comes across. Accessibility is for everybody. The drop-down is a better solution regardless of disability, as it gives the visitor the information that they require much quicker than the map would.

The Presentation

You can see the Accessible Design presentation on Speakerdeck here. Or alternatively, you can view it below.