Designing for accessibility

Whether you are a graphic or web designer, it's important to keep accessibility in mind when designing for online applications. In today's world, so much can be done online from shopping, paying bills, communicating through social media, emails and facetime, researching, GPS maps and the list goes on... Using websites, tablets and smart phones is only going to continue to grow, so why should people who are visually impaired or have cognitive disabilities not have access to the online world we live in?

Here some great tips to help with the design process for websites and online applications:

1. Start thinking about accessibility

Designing to meet web accessibility standards can feel a little limiting, but once you get the hang of the basic rules to meet either AA or AAA standards it becomes second nature. 
 

2. Branding

I'm certainly not saying you need to re-brand if your current brand colours does not pass AA or AAA standards. Simply ask your branding specialist, graphic or web designer to develop a secondary colour palette to use for online purposes.  There are several online tools you can use to help select the right colours to use online. This is a great accessibility colour wheel and you can even select if you want to meet AA or AAA standards:  gmazzocato.org/colorwheel
 

3. Fonts and font sizes

Going back a few years, we only had access to a handful of standard fonts to use on websites. So, while it's great that not everything has to be in Arial or Times New Roman anymore, it is still important to choose fonts that are clear to read and are web safe. Fonts and font size display is affected by monitor size, screen resolution, device as well as the browser's settings. Font sizes should be coded in relative sizes for maximum accessibility across all devices. Minimum font size used on a website should be: 16px / 100% / 1em.
 

4. Colours, colours, colours!

Colours are so important not only for the visual look and feel of a website, but also for accessibility. There are a few key factors to consider when choosing your colour palette for you website or online application:

• Links should always be the same colour. The reason for this is that it helps to clearly identify the links within a page, especially for people with cognitive disabilities.
• Use high contrasting background and text colours. Here is a online tool to check your colour contrast: webaim.org/resources/contrastchecker
• Ensure colours are not used as the only way to distinguish a visual element, call to action or presenting information.
• While this is not an accessibility standard, if your site is used predominately for visually impaired or colour blind users you may want to consider having a toolbar to change text and background colours.
   

5. Images

Images are often a key design element for most businesses to help portray their company culture, services and products. However, a text replacement must be in place for visually disabled users so they understand what the image is about when using a reader. It's also important to optimise your images for web at 72dpi which helps with page load time.
 

6. Navigation and links

The navigation on a your website needs to clearly show what information is on the site and make is easy for the user to access the information they are looking for. Here's a few points to remember when designing your navigation:

• Navigation positions must be consistent across the site
• Alternative navigation must be available on the site. For example, keyboard navigation for physical disabilities and readers for visually impaired users.
• Link text needs to be informative
• Links should be text not images
• Link colour should remain the same throughout the site
   

7. Page Layout

Keep main structural elements like logos, navigation, features and headings consistent across the site. This tip is a bit of web design 101 really, but important when designing a website to meet web standards. For visually impaired people the flow of the site is important as they will most likely be using readers, so if content is moving around from page to page it is not going to make much sense. Similarly, for people with cognitive or neurological disabilities, over complex design elements or moving navigation etc makes the website very hard to use and the information unaccessible.
 

8. Space

'White space' is important design principal as it helps reduce noise and increase readability. The hierarchy of your site shows the significance of elements, with the most important being towards the top of the page. Space around these elements and content areas visually catches the eye to move across the page.
 

9. Responsive design

There is a huge growth in the use of mobile devices and tablets to access websites and shop online. Therefore, making responsive design a 'must have' for a website. Have a read of Web Prophets' article on a snapshot of mobile usage across various industries. Google has also implemented a new algorithm which gives preference to mobile friendly sites to those are not mobile friendly. So by not having a mobile friendly site not only impacts your rankings in Google but will make your website unaccessible to users.
 

10. Test!

Testing your site prior to launch is imperative if you want your site to meet either AA or AAA web standards. There are quite a few online tools to test contrast, colours and font sizes which have been mentioned in the above tips. The best one to use which covers all of these as well as link and image alternative text is: wave.webaim.org. It's also important to test across platforms (Apple and PC) and across different browsers (Chrome, Firefox, Safari, IE).