Create websites that everyone can use
Did you know that “disabled people are about half as likely to be online overall, are less likely to have high-speed internet, and are more likely to have only one device for accessing the internet”? Is that because so much of the internet is created for those who are more able and so they stay offline?
Whether that’s true or not, accessible website design is back in the spotlight after a visually-impaired woman in America has sued Beyoncé, claiming that her official website violates the Americans with Disabilities Act (1990).
With so much of the internet readily available for those without such disabilities, we want to shine our own spotlight on how you can make sure any website you’re developing is putting people first, keeping accessibility and inclusivity at the forefront.
Make sure that your website can be read by anyone
One of the main issues of accessibility, naturally, is websites that don’t cater to those with visual impairments. Keeping this in mind when designing your website is crucial, allowing people from all walks of life to be able to read and understand your message.
68% of visually-impaired people use 2 or more types of assistive technology while using the web, so here are a few things to consider for your next website build…
Screen-reader technology
Screen-reading technology takes the information on a website and speaks it aloud for the user. That way, they know exactly what a website needs to tell them without having to physically see the page at all.
For developers, this technology is more accessible and easier to test with than ever before.
An iPhone, for example, comes with a host of accessibility features that allow you to browse the web with your screen completely turned off. Doing this can be a fantastic way to test your websites and gives you an idea of what end users will experience.
Within screen-reader-friendly development, there are also a couple more things to consider:
There’s a difference between descriptive and decorative images:
Decorative images can get away without having things like alt tags and title tags as they’re purely there to make the page look nice, rather than offer any additional information. This means that people using screen-readers and other technology can skip past them to get to the key information they need.
Descriptive images, however, are any images that add something to the content of the page, for example, a picture of how a product works or the layout of a hotel room. These images should absolutely have alt tags and title tags written up in the site’s meta-data, as they allow the assistive technology to relay the information to the user.
The order of your content should take priority over your design:
Using modern CSS, there are a lot of different ways you can re-order you content visually. However, you should always lay out your raw HTML in a way that makes the most sense if it were being read as pure text. It’s like seeing a website before it’s got ready in the morning – it’s still the same, but not as you recognise it.
As a real basic test, you can turn off all your CSS and see how easy it is to understand your content this way. If it doesn’t make much sense to you, then it won’t make much sense to a screen-reader, which means it won’t make sense to your visually-impaired user, either.
Here’s an example off the BBC’s website, which most people have seen, with the CSS turned off:
Font size can be a big deal
Between 36-48% of visually-impaired people are using some kind of assistive technology to make website content larger, whether that be zooming in, increasing text size settings in their browser, or magnifying the screen in some way.
Make sure that your website uses large, clear text for key messages and website navigation, and that the platform your website is built on allows for size increases in text and images.
Keep an eye on colour contrast
Another visual impairment that impacts the usage of websites is colour blindness, which could affect up to 1 in 20 visitors to a website. These people have an inability to distinguish between certain colours, meaning that images and key information on your website could be incredibly hard for them to understand.
Again, while this is clearly a small amount of people overall, websites should be made with all people in mind. It can be as simple as changing to a bright, bold colour that everyone can see, or sticking to monochromatic colours like black writing on a white background.
In some cases, you could even develop a ‘switch’ that allows colour-blind people to switch to colours that they can see. There are also web tools that allow you to check if all content on a page can be read and so much more information out there on accessible colours.
This is by no means an exhaustive list of things to consider for accessible web design, but it’s a great place to start so that your brand messages will be ‘seen’ and understood by even more people, which is good news. As we’ve always believed, digital is for everyone.
Plus, you won’t be stood in court anytime soon with Queen B and her law-breaking website.