Whether ordering the weekly grocery shop, watching television or a movie, booking a doctor’s appointment online or applying for a job, we all rely more on websites today than we have at any point in history.
In turn, we will all have had those frustrating moments when something just doesn’t work properly on a website; it refuses to load or constantly crashes. The moment when you just feel like throwing your PC, MAC or tablet through the window in frustration. Now, imagine if that was an everyday problem for you – how would you feel?
Websites are supposed to be ‘user-friendly’, but that often isn’t the case for everyone. Many times, websites aren’t designed with accessibility in mind so that anyone with a disability can use them. Every person, no matter what they’re dealing with–whether it’s a temporary or permanent disability–deserves to be able to use a website and benefit from the integration of the web that makes our daily lives easier.
What is web accessibility?
Web accessibility is the development of websites, technologies and tools designed to enable people with disabilities to use them and specifically:
- Perceive, understand, navigate and interact with the web
- Contribute to the web
Web accessibility encompasses all disabilities that affect access to the web, including:
Web accessibility also benefits people without disabilities, for example:
- Older people with changing abilities due to ageing
- People with ‘temporary disabilities’ such as a broken arm or lost glasses
- People using mobile phones, smart watches, smart TVs and other devices with small screens, different input modes, etc.
- People with ‘situational limitations’ such as in bright sunlight or in an environment where they cannot listen to audio
- People using a slow internet connection or who have limited or expensive bandwidth
It’s nothing new to promote the idea that accessibility should be a key consideration at the start of any design project. In reality, tight budgets and timescales can often render the big features needed to make digital products fully accessible either neglected or considered ‘something to add in later’. The end result is that while broad-brush accessibility best practices get implemented, many of the finer elements of accessibility or inclusive design can often be overlooked.
Fortunately, as you’ll see, many of these oversights can be addressed with minimal effort. By improving the accessibility of your website, you will help to empower an additional percentage of your audience to better engage with your digital products in ways that they otherwise wouldn’t have been able to, whether they’re dealing with a permanent or situational disability.
1. Ensure that your website is usable without a mouse and think about tabbing
All users should be able to clearly and logically navigate your website content. However, not everyone can use a mouse or trackpad and it is estimated that 7% of working adults have ‘severe dexterity difficulty’, rendering them reliant on a keyboard alone to navigate menus and webpages on their computers.
Assistive technologies help people with disabilities access websites, which helps to ensure that the information and functionality are accessible to every visitor. Some people use a keyboard, single-switch input, mouth sticks (used as a typing stick or page-turner) or screen readers. Therefore, to ensure that your website is fully accessible, avoid elements that only activate when a user hovers over items with a mouse because keyboard-only users or screen readers usually aren’t able to access them. You can easily test your site by trying to navigate it without a mouse.
Ask yourself these questions:
- Is all content accessible using only the tab function on a keyboard?
- Do I have a clear focus state?
- Does the tab order flow logically?
Tabbing is a very important consideration for web accessibility. For instance, concerning page layout, can users with a keyboard tab through your web page in the order that you intended the content to be read? The second concern for tabbing is the actual visual representation of the focus state. Most browsers have default focus states out of the box but some websites like Smashing Magazine have gone the extra mile to create their own style, adopting a thick dashed red line rather than the generic light blue boxes of Chrome or Safari, which don’t work so well if your backgrounds or buttons are light blue themselves.
To truly cater for keyboard-only users, it’s worth taking the time to consider how each of the components of your design system or style guide will appear in their focused state and then work with your developers to perfect these in the browser.
2. Add alt text to all images
In a world in which uploading images and videos to the internet is as commonplace as grabbing a coffee on your way to work (Instagram alone estimates 100 million+ images are added daily to its platform), we can easily overlook the need for alt text on images and videos when adding content to our own websites and apps. But by adding ‘alt text’ to all of your images, this provides another way to ensure that your website is accessible for screen readers, users viewing as text-only and failed loading states.
Alt-text is a brief description of the image, such as ‘Office worker reading newspaper in a busy coffee shop’. Most users never see the descriptions, but screen readers rely on them. A screen reader is a form of assistive technology that is used by people who are blind or visually impaired. The software application uses a Text-to-Speech (TTS) engine to translate on-screen information into speech.
What makes good alt text? The text should contain the message you wish to convey through the image and it should be fairly descriptive. This is vital for content such as chart and infographics. If there is text included within the image, that text should also be included in the alt format. However, you can leave the alt text empty if the image is only being used for decoration, so ask yourself these questions:
- Does every critical image (non-decorative elements) have alt text?
- Is my alt text descriptive?
- Is all information displayed visually (such as a chart) represented by alt text or another method?
Well-crafted alt text can actually improve your site’s SEO, as this could potentially mean more traffic and conversions for your website. Ensure that you provide descriptive summaries for your images and include keywords when applicable to boost your SEO through alt text. Our team of Search Engine Marketing specialists are happy to provide expert advice on this.
3. Rethink colour choices – use simple colours and shapes
Shapes and colours are important for various reasons and can have a huge effect on a user’s experience. Despite this, colour is often an overlooked element of website design.
Different people perceive colours in unique ways. When we consider the autistic spectrum, colour blindness and other visual difficulties, choices of colour can be extremely challenging to differentiate between or even recognise. It is considered that bright and high-contrast arrangements of colours can be hard and overwhelming for autistic users to process; their attention can be easily lost, so try to use simple colours and shapes. Equally, a user with colour blindness will rely heavily on contrasting colours. Approximately one in 12 men and one in 200 women around the world are affected by colour blindness and for these people, choices like red and green, green and blue, blue and purple and green and brown can be troublesome.
Most websites represent their call to action buttons with bright colours. However, many viewers skim through websites, so if the call-to-action button is in a colour range someone struggles to see, then you may miss an enquiry or sale. Text can also be difficult to read for some people if there is low contrast between the background and foreground text. Ensure that your text stands out against whatever background you choose.
We suggest the design of websites using high colour contrast and additional methods other than colour alone for hyperlinks, such as bold or underlined text. Try using a colour-testing tool like the Chrome plugin Spectrum. This enables you to analyse your web pages and simulate colour blindness scenarios. You could also use Userway’s Contrast Checker to test your text and background colours and see if they are WCAG 2.0 AA or AAA compliant. If you are not sure how to contrast colours, our Design and Web Development teams are happy to offer suggestions.
4. Consider animations carefully
The increase of aesthetically stunning parallax sites and GIF-tastic web pages that are now available to view have most certainly pushed the online storytelling experience to the limit. However, with 35% of people over the age of 40 suffering from a vestibular disorder, there’s a chance you may make users suffer nausea and motion sickness by going too heavy on the animation, leaving even those with the strongest stomachs feeling a little giddy after a minute or two of scrolling.
To address this, you could consider providing the option to either disable scrolling animations or to provide a static alternative for viewing your content so that motion can be an optional enhancement rather than a must-have feature for all users.
5. Keep it straightforward and get the right line length and amount of text
It’s estimated that around one per cent of the UK population are on the autistic spectrum, therefore it’s important to consider words at face value. Emojis and quirky copy lines are great fun and help to give a brand its personality, but when addressing serious subjects, writing in plain English will help negate any ambiguity for users, especially when helping them to make important decisions. Be mindful of the diversity of your audience and the tone in which you intend the copy to be read to keep your message on point. The challenge is to write enough to be informative, whilst at the same time keeping reading fairly light work. Large textual areas can be quite intimidating.
However, it’s not just about how much text you have, but also the way in which you display it that can often make reading a challenge for some users. The line length for your text can help with that. If a line of text is too long, the reader’s eyes will have a hard time focusing, as the line length makes it difficult to gauge where the line starts or ends. It can also be difficult to continue on to the correct line in large text blocks. Furthermore, if a line is too short, the eye will have to travel back too often and break the reader’s rhythm. Shorter lines also tend to stress readers, making them begin on the next before finishing the current one. To help with this, it is considered that 50 to 60 characters per line will ensure comfortable reading.
6. Avoid anxiety-inducing prompts
More than one in 10 people are likely to suffer a ‘disabling anxiety disorder’ at some stage of their life, so when considering web accessibility, we should do what we can to avoid contributing towards this problem.
There are a number of UX patterns that aim to rush users into taking action. Good examples are the ‘countdown’ in the corner of the screen when ordering tickets from Ticketmaster and the flashing ‘in high demand!’ and ‘last chance!’ messages on Booking.com. One can only imagine the rise in conversion rates due to these features, but what if these experiences cause genuine anxiety for some users?
A solution that would cater for those who take longer to use applications or suffer from anxiety would be to gently notify them that a time limit is in place and give them the option to extend the time needed as appropriate. This will create an interface that empowers users to complete, rather than sending them into a panic and possibly heightening anxiety levels.
7. Empower the user
For users with visual or hearing difficulties, communication can be challenging. It may be that a user is hard of hearing or deaf and requires the ability to watch content through a subtitled video, or the option to respond to a request in writing. If they have a visual impairment, an audio transcript of content or the ability to make contact by a phone call may be their preferred means of communication.
Providing communication preferences that empower users to enjoy content, make contact in a way that suits them, and is inclusive of those that are deaf, dyslexic or visually impaired, is a really important consideration to successfully engage with people who face these challenges. Always keep this in mind when designing your next contact page or content strategy, as you’ll not only benefit those with disabilities, you’ll actually provide a much more flexible way for all users to enjoy your offering.
Our final thoughts…..
These seven easy ways to make your website more accessible doesn’t cover everything, but it’s a great start to making your website more usable for everyone. Small changes can make a big difference and are a positive step in the right direction towards creating awareness and inclusion. After all, by making these design changes, you are effectively removing any barriers that keep people from visiting your website and perhaps even buying your goods or services. Most of all, you’re showing that everyone is welcome to visit your website with no exclusion of any user or potential customer.
If you’re looking to make your website more accessible, contact us today and we will be happy to perform an accessibility audit on your website and advise on any improvements that can be made.