How important is accessibility in web design? Very. Imagine not being able to use a website because the web designers have effectively shut you out. Maybe you can’t read the text against the background because the colours are too similar. Perhaps there’s an important image you can’t understand because there’s no alt text. It happens all the time, and although many designers still don’t take it into account accessibility for web design isn’t just a ‘nice to have’. It’s the law.
As an experienced B2B website design agency with extensive experience in website hosting, we have the expertise you need in accessible web design best practices and what it means. Read on to know the essentials.
What is Accessibility in Web Design?
What is accessibility in web design? It simply means making sure everyone who visits a site can understand and use it and its content freely and easily. It involves making a site usable by as many people as possible, including those who use mobile devices, have slow connections, and have different education standards, as well as those with disabilities.
Is the text big enough to read? Does the colour contrast work fine on a big screen but look terrible on a small one? And what if a user has a slow network connection? Usability and accessibility in web design takes all visitors into account.
To make the experience a positive one for every user, a web design agency will follow a collection of design principles to ensure the experience works as it should across the board. Because accessibility lets every user enjoy equal access to your content, it makes good business sense as well as a legal essential.
How Important is Accessibility in Web Design?
Why is accessibility important in web design? Every good business wants to make its website available to as many potential customers as it can. But it’s more than just access, it’s about being included in society. Accessibility supports social inclusion for all. You might want to create a design and content that’s accessible to older people, some of whom struggle to read tiny text. Or allow people with hearing problems to consume your content comfortably with visual alternatives to audio content.
Web design in Oxford and other towns and cities across the UK requires great 4G and even 5G connections. But many people in rural areas, at home and abroad, still only have limited connectivity, which means fast-loading content matters. And not everyone has broadband. If your audience is international, you’ll want to bear in mind that millions of people in developing countries still limp along with slow, often less than reliable dial-up connections.
As you can imagine, there’s a powerful business case for great accessibility across the board – and the UK isn’t the only nation with laws around web accessibility. In Britain, it’s covered under statute law by the Equality Act 2010, which protects everyone from unfair treatment while actively promoting a more equal society.
It seems sensible for the law to ask site owners to make ‘reasonable adjustments’ to their online presence, making sure their content is accessible in as many circumstances as possible. That could mean anything from keeping image file sizes small so they load super-fast whatever the connection, to providing accurate written transcripts for video content. We’ll take a look at some of the most common accessibility problems later.
Usability & Accessibility: Why they are Important
Is usability the same as accessibility? Usability and accessibility in web design each have their own distinct meaning.
Accessibility for web design involves making sure visitors with diverse abilities and access methods can use your site effectively, with no barriers to understanding and navigating it. Ideally, nobody is excluded. Usability is slightly different, involving how user-friendly a site is. Ease of use matters in every kind of tech, of course, but it’s particularly important online.
In the context of web design and web development, both usability and accessibility are vital. Accessibility is a subset of usability: a perfectly usable website will also cover accessibility best practices. That’s why the very best websites nail both things, featuring a user-friendly design that’s there for everyone who wants to consume the content.
To achieve accessibility, it’s important to first understand the technical and physical limitations users might have. Then you can figure out how your designs can empower them rather than shut them out. To achieve usability the same applies: you’ll need to research your users so you know what making the site useable means in reality, then carefully test the designs so you know for sure they work as they should.
Common Accessibility Issues in Web Design
So what are the most common accessibility issues in web design? Poor colour contrast for text is probably the most common of all, the lack of colour contrast between the text and background. It’s also about the tones of the colours you use. You can use two completely different colours for the background and text but if the colours have the same tonal values the contrast won’t be strong enough for easy reading. The standard for web accessibility is a contrast of at least 4.5:1 for text, easy to establish using a contrast checker tool and relatively simple to fix.
Another reason why is accessibility important in web design involves missing or inappropriate image ALT text. The alt text – short for alternative text - describes the appearance or function of an image on a web page. Screen readers used by visually impaired people read out the alt text out loud. If there’s no alt text or it doesn’t describe the image, you’ll need to rewrite the alt text so it actually represents the image and maybe also reveals what the user might want to ‘see’ it for.
Too many navigation links can create confusion because screen reader technology often reads out every single navigation link it finds on a page before tackling the actual page content. Cramming a page full of links is frustrating for those using a screen reader, making it less than easy to consume.
Accessibility issues in web design involve the way we typically consume content. Like the rest of us, users with disabilities rarely read an entire web page. We scan until we find the exact information we want. Assistive technologies like screen readers use headings to navigate pages so it’s vital to use the hierarchy as it should be, with the main heading labelled H1 and the rest moving down the scale to H6. This means users shouldn’t have any difficulties navigating your pages efficiently and logically.
Missing link text or anchor text makes life hard for some people. Link text or anchor text simply means the words someone clicks to follow a link. Missing link text means there’s no text for them to read, and it often happens when you link via images like buttons. This is a problem for people using screen readers, leaving them with no idea what they’re clicking and why. And ambiguous link text is annoying for some, where the link text says something generalised like ‘click here’ or ‘more information’, again not helpful when you’re using a screen reader.
Embedded documents are also important. It’s no good embedding something that people can’t read with their screen reader. Instead, make everything from .pdfs to Powerpoint presentations and Word documents accessible. Some programmes include accessibility checkers to help you get it right every time.
Empty form labels are a real annoyance when forms on web pages are such an important aspect of using a site. Imagine if some of your visitors can’t fill in your contact form. A form label is simply a way to tell a screen reader which information should go into each field of a form, a field being a section like ‘name’ or ‘date’. When these labels are left empty, which they often are, it leaves people unable to complete forms.
Unclear form controls are another common annoyance for visitors, sometimes so ambiguous that a screen reader can’t tell a visitor what to do. These controls are designed to make it easier for users to perform an action or make a choice. If the list boxes, option buttons or command buttons don’t tell someone why they’re clicking the button, it’s bad news for your business.
Last but not least, are you putting mobile first or prioritising access via desktop? It isn’t unusual to see websites that can’t be consumed on a small screen because of the format, the text size and more. These days, when most of us access the internet by mobile, it’s an absolute must to put mobile viewing first. That’s what Google does, and it’s always wise to follow what the nation’s primary search engine recommends.
Accessible Web Design Best Practices
Next, let’s take a look at the most important accessible web design best practice. First of all, it’s best to design with screen readers in mind as well as other accessibility issues and do it right from the offset. Then you have the best chance of getting everything right the first time.
You’ll need to provide sufficient colour contrast between the foreground and background – this is one of the easiest to get right and the simplest to fix if it isn’t working for everyone who visits your site. Bear in mind it’s never a good idea to use colour alone to get information across because screen readers can’t ‘see’ colours.
Make sure every interactive element of your site, for example, the navigation links and form fields we’ve mentioned, are easy for people to identify and recognise. And make sure every aspect of the navigation is not just clear but also consistent. It’s confusing when every page of a website has a different way of expressing what its navigation elements mean.
Because forms are the lifeblood of customer and prospect response, they have to be as clear as a bell in every way. Make sure all the form elements have clear, practical, helpful labels and provide easily identifiable feedback, for example, to correct form field entries.
Use headings and spacing to group content in the right way, with a main H1 header followed by one or more H2s to denote important subheads, then work your way down the list. This will help people prioritise the elements of the content as well as find what they want easily and quickly by scanning the whole page with their screen reader.
Every website should display beautifully whatever the screen size someone’s seeing it on, from enormous desktop screens to the smallest gadget on the market. You’ll want to present the information differently for mobiles, desktops and tablets, each of which has a different screen size so demands appropriate content.
Next, image and media alternatives. Provide clearly visible links to transcripts of audio and video, and also to audio-described versions of videos. Always include text for screen readers to use to describe icons and buttons, and provide clear and informative descriptions for things like graphs and tables.
It makes sense to let users control content that starts automatically, for example letting them stop auto-play videos, animations, ads and auto-sound as the rest of us can.
Last but not least in our article about accessible web design best practice, the language you use plays a part. It makes sense to communicate in language that most people will understand. Unless you can be certain your audience gets it, for example, because they work in your sector, don’t use jargon. Avoid long words when there’s a simple alternative, and stick to the principles of Plain English.
Let every user get the best out of your website
Now you know how important is accessibility in web design. As you can see, website accessibility is a vital consideration but at the same time, it isn’t that complicated. All you’re doing is taking full advantage of the back-office tools and code that web designers should be using anyway, not leaving any of them out. Once you’ve ticked the boxes you’ll be able to welcome every person who comes across your website, whatever their ability – which means you’ll enjoy the widest possible audience for your products or services.
Now you know what is accessibility in web design, is there any aspect of your site that could do with updating to help you broaden its appeal – and stay within the law? If you’d like our input into website accessibility, as web development Oxford experts we’ll be pleased to talk.
Get in touch by phone on 01844 888 777, by email on hello@intuitiv.net, or use our web form and we’ll get right back to you.