The importance of accessibility in web design

Web design isn’t just about putting your message across to as many people as possible it should be attractive, provide useful information, creates enquiries/sales, attract your right target market and be easy to navigate. As we all know we are all individual with unique characteristics, beliefs and abilities and it is important to make your website accessible to EVERYONE! It is part of the law that you consider the accessibility of your website in the perception of the able and disabled people in the world. Visit the W3 where they have put together documentation about web design accessibility.




Different disability accessibility in web design

Visual accessibility in web design

Visual ‘disabilities’ can range from blindness, to being short sighted, to being colour blind on varying scales and when designing a website you must keep in mind how different people see and access your website.

Images

How do blind people see images you may ask? Well there are two ways they are able to understand the context of images on websites. Firstly in every image there SHOULD be an ‘alt’ tag, this alt tag is to allow screen readers to describe what the image is displaying. For example if you have a picture of a cat wearing a tutu you don’t put ‘a funny animal picture’, it simply isn’t descriptive enough, put exactly what is in the picture ‘ a cat wearing a tutu’.

altag

It has been common practice for a lot of web designers to use the alt tag to put the main keyword of the webpage into the alt tag which is fine (to some extent) as long as it is still descriptive enough to explain to those who need the alt tag to have a good web experience.

flowers to display what different types of visual disabilities may be like

Ease of reading through contrast

A lot of people, in particular men, suffer with some form of colour blindness. This can range from not seeing one or two colours correctly to seeing everything entirely in greyscale (black and white). It is for this reason that there must be clear contrast of colours for those with colour blindness to be able to understand visual layouts correctly otherwise important information may get lost.

Is the text and the interactive features large enough?

Another disability that needs to be considered is partial sightedness. Sometimes a person is not entirely blind and can see some visual information, this should be considered when not only selecting the font size of the typography but also when designing the clickable areas of buttons and interactions.

Tools to test your website’s accessibility

A tool you can use to see if your site has considered visual accessibility in web design is a tool called spurapp.com. This tool takes your website and gives you all the scenarios to understand where your website could improve upon its visual design in terms of accessibility.

Access to photo editing software?

If you prefer you can do test with any photo/graphic editing software by taking a screenshot of your website and taking away the colour to see how the contrasts of elements look, use the Gaussian blur tool to see how readable the website is for someone whom may be short sighted.

Hearing accessibility in web design

a picture of two ears for discussing hearing accessibility

Something you may not have considered is hearing accessibility. If your website has podcasts or videos you are going to need to consider how you are going to communicate the information to those whom are hard of hearing.

If you are creating podcasts it is quite important that you also include a transcript. Although this can be time consuming it is not only helping everyone be able to access your fantastic information, it will also be highly beneficial and also have the effect of helping you be indexed by Google if it is written in html with the correct syntax.

Likewise, if you have a YouTube channel for your business there is also the option to include ‘auto’ subtitles. This is fantastic that YouTube are trying really hard to include accessibility and make it as easy as possible for video creators to include them but sometimes the words are just plain wrong and can confuse matters! Instead, I recommend taking the time to write your own subtitles to ensure the ‘write’ words are shown .

Device Accessibility

responsive web design accessibility
And last but not least is device accessibility in web design. For quite a few years now responsive design has been at the forefront of designers who care about doing a good job. If a business has a responsive website it shows that they care about their users experience and not just about having a digital presence.

With more and more users now using mobiles and tablets to acccess website it is important that pinching and squeezing to read and view information isn’t a part of the user experience. It is uncomfortable and may give the wrong impression to visitors.

If you already have a website with lots of content it may be a little difficult to include responsive css code but if you are creating a new website it is much easiser as you write the html and then add css with something like @media screen and (min-device-width: 481px) and (max-device-width: 768px) {enter styling here}. It is quite easy to learn how to do this but if you need help you can find lots of information throughout the web but personally, I recommend using Teamtreehouse.com, i’ve been using it for over 6 months now and good practice of web design/development is made quite clear and easy to comprehend through the platform.

Accessibility is good for everyone

When you start putting accessibility at the forefront of your mind when designing websites and user experiences then not only is it going to benefit people with disabilities but it will also have the benefit of making your website more compliant with w3c web standards, making your site easier to index, improving organic search results and making your site run as efficiently as possible so remember, accessible web design is good web design.

If you have any extra points please feel free to leave a comment below.