Accessible & responsive website for renown charity that provides audio description and touch tours to theatres and arts organisations for the visually impaired.
Throughout my career as a User-Centred Designer, accessibility has always been a priority, it is one of the cornerstones of the world wide web. I take a wider view of accessibility, it’s not just about visual impairment, access to content is a fundamental need. Back in the Web 1.0 days at Channel 4 TV, we used to create text-only versions of every page for every site we created and paid attention to alt tags, key commands and long descriptions. If we created a game in Flash for example, we would do our very best to create an accessible version too.
I do consider myself knowledgeable on this topic, but times and technology change and I needed to explore the latest thinking and research. Here are some of the more salient points I thought worth sharing. Most, if not all of the points were rolled up in to the design.
Accessible design considerations
- White text on black background is easier to read than black text on white
- Check colour contrasts using available tools such as the WCAG colour checker
- Columns are OK as long as space between is generous. Reading long tracts horizontally is much more difficult than vertically.
- Body text should be a min of 16pt – 18pt preferred
- Generous line height, set around 1.5
- Wider kerning/letter spacing is better for impaired vision.
- Check the whitespace between characters especially two Vs together or L and J together.
- Monospace fonts provide good legibility
- Optimise for screen readers for example; use commas to create pauses in reading, write out dates in full or embed in aria/accessible attributes
- Stray away from using ALL CAPS and small caps
- Form controls. Having a horizontal search tool with many facets is really poor access-wise. Reading long tracts horizontally is much more difficult than vertically. This is exacerbated when you introduce form labels and controls. Having a sense of what that control is all about when zoomed in 300% is pretty tricky.
- Don’t use special characters such as colons in dates or times for example, ‘1:12’ as older screen readers either ignore them or read out ‘one colon twelve’
- Use simple unambiguous language and make clear distinctions as to what is clickable
- Hit areas need to be given adequate space
- Ensure keyboard navigation is supported and provide aria-supported controls and labels in the code
In addition, for this specific website we wanted to also incorporate the following points too.
- Provide accessible audio players via HTML5 and use the new attributes such as <track> to give faster access to specific parts of the audio description
- Use a single colour with tints so that the global colour changes be set to the individual needs of each user
- Provide low contrast, high contrast and custom contrast accessibility options and start with a sensible default
- As booking an event is usually made by telephone, these need to be especially clear. When telephone numbers are clicked on mobile devices, the telephone dialler appears pre-filled with the relevant number
The serif /sans-serif debate
There is no empirical evidence to show that one is more legible than the other for the visually impaired. It is often stated that typefaces with more visual cues (modulated strokes) are more legible e.g. Verdana has modulated strokes whereas Arial does not. However, to benefit from this, we need to be viewing the text on a high resolution device; desktop computers are not considered high resolution devices so we must reconsider sans-serifs or choose our serifs carefully. As font legibility is much to do with the reader’s familiarity, we should consider font choice as an accessibility option and allow the user to choose what they prefer. This was the early promise of user style sheets, but to my knowledge have rarely been adopted.
- Optima is considered to be one of the most legible fonts out there and Merriweather is a close free alternative. It has a high x-height (good thing), wide characters (good thing) and generous kerning (good thing). Serifs look cool and they are of our time, but with low vision they can create blocks that are hard to decipher as they provide fewer visual clues.
- Monospace fonts
- Merriweather Sans – regular and bold
- Roboto monospace – regular and bold
- Helvetica Neue Roman and Medium for iPhone