Accessible websites can be used by people with visual or hearing impairments without major limitations. But it doesn’t stop there. Well coded websites that keep up to certain standards also offer better usability for users without disabilities. They are easier to understand and better to look at because of an improved usage of colours. We put a lot of research into making websites accessible. We looked into standards created by the World Wide Web Consortium (W3C) and guidelines by associations of people with disabilities. This gave us an inside look and helped us understand which topics we have to focus on.
Making websites accessible is something Ireland Website Design specialises in. We are happy to share our knowledge with you because in the end everybody benefits.
Forms of Impairment
There are many unique forms of impairment that put a challenge to your website. It is difficult to give every viewer of your website the best experience possible but it is not impossible. We can’t give everybody the experience to see a website the same way as most other people do, but we can help assistive technologies to understand the website. There are four categories of impairment that are relevant for web design:
- Cognitive
- Visual
- Motor
- Hearing
Proper Coding
This is the main ingredient for an accessible website. Use modern web technologies to make sure that screen readers and other assistive technologies can easily analyse the website. Use proper HTML structuring with only one h1 heading per page and don’t skip headings (after a h1 there should always be a h2). Headings and other elements can of course be completely arbitrary styled, but screen readers don’t care about CSS. Other important measures include:
Meta Tags
Because meta tags are structured and standardised, assistive software can tell the visitor what the website is about. Using proper keywords and descriptions even gives you an advantage in SEO. Declare the language of your website by using
HTML5 Elements
HTML5 gives containers a meaning. You don’t have to use <div> for everything now. The most important new containers are <header> <nav> <section> <article> <aside> <summary> and <footer>. They can be used in the same way as regular divs.
Interaction
Interaction is what makes the difference between a website and a newspaper. This can be a challenge in terms of accessibility but it is also a huge advantage. A website which is well made gives you the ability to resize text, put invisible descriptions on images and in general gives you the ability to have different designs for different people.
Keyboard Support
All site functionalities have to be achievable by keyboard. When clicking the Tab key on any website it cycles through the links which can be clicked by pressing Enter. You can help by highlighting the selected element with element:focus in the CSS. Sometimes when implementing JavaScript onClick-Handlers an additional onKeyPress-Handler has to be implemented.
Hyperlinks
When using text links put the link on the word that describes the target. Screen readers emphasize the link, so it makes more sense to put the link on the actual target of the link. This is often done wrong and you can tell by searching for ‘click here’ on Google. The second result is Adobe Reader because Google interprets the link text as a description of the target. For ‘click here’ this is obviously wrong but Google doesn’t now. And if you were wondering what the first result is, it’s an article by the Web Consortium about how bad it is to use click here as Call to Action.
Content
People use the internet to inform themselves about all kinds of things. Therefore good quality content is important. Regularly publishing new content on your website also gives you an advantage in the ranking at search engines. So you definitely don’t want to make it hard for anybody to get access to your content.
Text
By making use of the <article> element, screen readers can easily find the relevant text and read it out loud. Usability is greatly improved by providing text also in different languages when this is beneficial for your audience. Define text size in em in the CSS. This lets viewers change the default font size in their browser.
Image
The alt attribute in an
Video and other forms
If your website makes use of a lot of videos, provide captions for the visually impaired and audio commentary for the hearing impaired. It is also good practice to provide transcripts, especially for podcasts. Having multiple forms of the same content is highly beneficial. You are reaching a wider audience. Not only because some of your audience might not be able to access a specific form of content but also because people prefer different forms of content.
Design and Colour
Colour-blindness is a rather common impairment but with a few tweaks on the colour scheme of your website you can greatly improve their experience. Try to avoid those colour combinations: green & red, green & brown, blue & purple, green & blue, light green & yellow, blue & grey, green & grey, green & black.
Try to use strong contrasts: You can achieve this by also changing the brightness of colours and not only the hue. Larger areas of colours are also easier to differentiate than small areas. When having a graph you can put a different texture on every colour.
Changes in colour, for example when hovering over a link, might also be hard to spot. Giving those elements an outline in the hover state often works better. In general, your website can’t solely rely on colour to transport information. Charts should always have a proper description and colours that have a meaning for you, like red = warning might not be obvious to everybody else.
This was an excerpt from our Whitepaper Website Accessibility. Get this one and other Whitepapers for free.
