Notice: Undefined index: order_next_posts in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 194

Notice: Undefined index: post_link_target in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 195

Notice: Undefined index: posts_featured_size in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 196

Why you need to design for everyone

Red Badger’s Sari Griffiths looks at the simple steps needed to make the web more accessible

Red Badger’s Sari Griffiths looks at the simple steps needed to make the web more accessible



Name: Sari Grifftihs
Position: Visual design director at Red Badger

Consider this: even though there are more users in the world with disabilities than people using IE8, companies, developers and designers prioritise support for IE8 over accessibility.

Web designers are systematically failing to provide a service that’s suitable for those with even basic impairment issues. Many designers avoid accessibility due to constraints, which can affect the way they work. It’s true that making a site truly accessible can make it look less visually appealing and dampen creative endeavour. But avoiding accessibility is truly unacceptable when you take into account that 70 per cent of the UK population wears glasses, one in 30 suffer with sight loss, over two million people in the UK are colour-blind and ten per cent of the UK population have dyslexia. It presents a pressing obstacle for companies seeking to engage their audiences, but is quite easily addressed with some fundamental considerations.

Testing with consumers is a vital part of delivering an exceptional user-based product; so why then, are browser visuals not being given priority? Commonly thought of as affecting a smaller part of a user audience, accessibility is imperative to providing a better service to your customers; the ‘minority’ really isn’t the minority at all.

Accessibility is not about lowering standards. It’s about making a design communicate better

Accessibility is not about lowering standards. It’s about making a design communicate better – it’s about communicating to the whole user base.
To start with dyslexia: a clear space around each piece of information will make the content more digestible. There are no longer ‘standard’ screen sizes as in the days of the 1024 x 768 desktop screen, and as such, ease of reading should be prioritised. People with visual impairment will also appreciate the clearer presentation. It is more important then, that each element is digestible and has a clear flow, rather than how much can fit in the first view.
Another hurdle to a dyslexic audience is typography, in that each letter should look distinct. For example, having b and d mirror each other is very confusing, and experimenting with typeface is a good opportunity to add some personality to the brand.

Knocking back the glare given by a white screen will make text easier to read for dyslexic audiences. Colour-blindness presents its own obstacles. First and foremost, information should not be communicated by colour alone. Functionality that relies on colours can become invisible to those with colour-blindness and inline links can easily disappear. Blue doesn’t automatically mean a link: it’s the marking and shapes you use alongside the colour that makes an element a link visually, for example arrows, icons, buttons or underlines.

Typography that addresses accessibility makes relationships between words and sentences clear. It’s about ensuring a clean composition of content and presenting it visually so that these relationships are clear for the user. This is versatile and a must-have for any responsive design. When web designers have to cater for different viewport sizes, the exact location of any content can no longer be guaranteed or predicted, but if the typographical hierarchy is clear, it will work as intended. The same goes for screen readers; typographical hierarchy will be easily interpreted into semantic coding and contribute to the ease of understanding when accessed via screen readers.

To achieve this, a ‘content-first’ approach to design is crucial, because it’s hard to design the relationship between words when everything is ‘Lorem Ipsum’. Printing should also be a key consideration. Quite simply, a printout that removes all the clutter of a website really helps the dyslexic audience to read, so print layout is of paramount importance.

If the design prevents five per cent of your customer base (three million people in the UK) from buying products or accessing services, then it’s not a good idea

Further to colour and accessibility, contrast testing should happen as early as possible as it establishes how the characteristics of each colour play against each other. Tweaking the colour slightly to get a ‘pass’ can be done using Just beware: it might look pretty with a certain colour combination on screen, but if the design prevents five per cent of your customer base (three million people in the UK) from buying products or accessing services, then it’s not a good idea.

And finally, in order to pass certain levels of the accessibility standard, you should measure contrast between background and text colour in mathematical terms. Whilst the current version of IE8 takes into account the size and boldness of text, colour contrast and is suitably less crude than the previous, it’s not perfect. It defines ‘large’ text as 14px and bold, which is rapidly becoming the standard size or even can be considered ‘small’. I recommend 16px as the standard body copy size – if you’re using 16px letters, it will be visible even if it fails the test by a small margin.It’s not easy to draw a clear line on disability. It’s just that there are different ways to consume the content you are designing. Thinking about accessibility helps make design versatile and even responsive-ready.