Is your web site accessible? Five steps to start now

When it comes to accessibility and web design, you’d think it would be a matter of hand in glove.

After all, in the UK there are 2.7 million colour-blind people and 70% of the UK population wearing glasses. On top of this, 1 in 30 suffer with sight loss, and 10% of the UK population has dyslexia (4% with severe cases).

Unfortunately, however, this romantic notion of inclusivity just doesn’t reflect reality as a shocking amount of websites today aren’t built with their accessibility in mind.

It’s because of this that events such as the Global Accessibility Awareness Day are so important in highlighting an otherwise ignored agenda.

As part of our efforts at Red Badger to promote the issue, we’ve put together five steps that anyone involved in web development can adopt to make the internet a more inclusive place to be.

This guide is by no means exhaustive, but it’s a great starting point for anyone wanting to learn more.

#1 Ensure your site has sufficient colour contrast

Getting the colour schemes right on a website is a crucial part of establishing a design aesthetic.

But when it comes to visual impairments, the colours and contrasts that you are adopting could result in an unreadable page experience.

Getting this stage right is absolutely crucial in creating a successful design. The good news, though, is that when colouring a website, there are plenty of tools available, such as this one, which can provide instant clarification as to whether your chosen colour scheme meets accessibility guidelines.

Also, watch out for the font weighting of your website, which can make a further difference. Wherever possible, try to avoid the use of narrow, italicised or cursive fonts.

#2 Use alt text for your images

One of the most common oversights with website design is a lack of alt text added to images.

It’s an easy mistake to make if you’re not aware of the impact of including this label, but screen readers rely on this text to provide context as to what an image is actually about.

Rather than reading a nonsensical image location or a robotic file name, a short description of what an image is conveying can make a huge difference to a user’s understanding of the content on your website.

From a design perspective, adding alt text to images has no impact on the way that an image is rendered. Adding alt texts is, therefore, a great habit to get into, so if you’re not doing it already, get moving.

#3 Go easy on the graphics and transitions

Sometimes simple is better. Whilst it’s tempting to go all Dumbledore with your design tricks and flicks, it’s crucial to remember that a well-designed site shouldn’t resemble a high school Powerpoint presentation.

To an individual who has difficulty operating a mouse, a moving target can present an unnecessary challenge, so why do it? Ask yourself whether an effect you’re implementing really adds value to your site and whether the benefit of an effect outweighs the risk of putting some users off using your site.

#4 Hover/focus states for all clickable elements

Another simple improvement to make is to ensure that all clickable elements on your site have a hover and focus state.

A hover state provides a visually impaired user a clearer indication that they are interacting with the element that they intended to, and it also makes it clear that clicking it brings a call-to-action.

A focus state is also a critical feature for keyboard users, who might not be able to operate a mouse.

For this demographic, who navigate via a keyboard, it can be all too easy to lose where you are on the screen. Because of this, you need to make sure that you test your application using only a keyboard, to ensure that all clickable elements can be navigated to and that each has a focus state that is clear to a user.

#5 Test from different perspectives

This one is less of a development technique and more of a mindset shift.

By approaching design, UX, development and testing from a range of perspectives, the chances are that a more accessible site will organically evolve.

There’s no end to a number of free tools that can help you with this, so I’d recommend you having a root around to find the not-so-hidden gems out there.

Google Chrome’s ‘Accessibility Developer Tools’ is a brilliant example of this, providing great insight into how user’s with a variety of impairments might find navigating your site.

Time for change

When thinking about accessibility in web design, try to ask yourself this: If it came to any other aspect of your web design, would you really make it so that the population of Birmingham twice over (and more) couldn’t access your website?

Of course, you wouldn’t.

So when it comes to building something that works for people with visual impairments, it’s down to you to make the obvious choices that will maximise your potential reach, and also send a positive message out to those around you.

Ultimately, a few simple changes today will go a long, long way to building a better internet for tomorrow.

source – http://bit.ly/2rO5mAT