Whether you’re building an entire website or simply designing a standalone landing page, having the customer at the heart of your build is the only way to go to get results. It makes sense to consider why your customers are on your website, what they want to achieve and what information they need to push them through to the next stage in their customer journey. But we often overlook web accessibility and how the design, structure and coding of our website can actually prevent people from accessing the information they need.
Making your website accessible to all users might seem like another hassle or expense you could do without, but with households with at least one disabled person having the spending power of £274 billion a year, that’s a lot of potentially lost revenue for businesses who don’t make their websites accessible to all users.
Around 19% of adults of working age in the UK are registered disabled along with 46% of pension aged adults and there’s hundreds of thousands more who could be considered temporarily disabled, such as those with broken limbs or who have misplaced their reading glasses!
There are some simple ways to make your website accessible and gain huge advantage, not just in increasing your sales and leads, but also improving your website’s visibility in the search engines. That’s right; making your website accessible to more users also makes it more accessible to search engines too! Bonus!
8 ways to make your website more accessible
#1: Include image alt attributes – screen reader software used by many visually impaired users cannot see an image, so having descriptive and meaningful alt (alternative) text provides vital information that the screen reader can read aloud to the user. Alt text is also used by Google and other search engines to learn more about your page content. Search engines cannot see images either, so they rely on alt text to understand what the picture is of.
#2: Take care with typography – choose fonts that are easy to read on a backlit screen. Avoid overly complicated fonts like handwritten styles, serifs or italicised fonts. Stick to simple, sans-serif fonts (such as Arial, Open Sans, Helvetica), particular for body text which is likely to be smaller than headings.
#3: Page titles – not just essential for SEO, page titles are also read by screen readers so visually impaired users know what the page is about. As the page title appears in the browser tab, it helps to orientate users so they can navigate between tabs. Your page title will appear in the code between <title></title> tags as well as the heading and clickable link in search results.
#4: Headings – these should be marked up in the code as <h1>, <h2>, <h3>, etc and be structured logically. Only one <h1> tag should be on a page with <h2> (and below) used as subheadings. Using heading tags for other content (e.g. a phone number) as a way to add styles, is not advised as it confuses the structure of the page.
#5: Colour contrast – ever struggled to see the content of a website on your mobile in bright sunlight? For many users, particularly those who suffer from colour blindness or impaired eye sight, colour contrasts are even more important. Forget white on yellow or pale grey on white, there needs to be a clear contrast between your text and your backgrounds (particularly if you have text over images).
#6: Ability to resize text – keeping text at 16pt and above makes it easier for users to read, but making your text resizable allows all users to see the text at a size that’s comfortable to them. There are a few ways that users may increase your website’s font size and this can be problematic if your content then starts to overlap other sections or requires horizontal scrolling to view the content. See the W3.org guidelines and how to test your site here: https://www.w3.org/WAI/test-evaluate/preliminary/#resize
#7: Keyboard access – not everyone uses a mouse to navigate the internet; some users rely on just a keyboard. Websites are often designed around mouse clicks, assuming users can just click a button or a menu item to find the information they need. Unfortunately, this isn’t always the case, so it’s important our websites can still be used with just a keyboard. Find out more about making your site accessible for keyboard users here: https://www.w3.org/WAI/test-evaluate/preliminary/#interaction
#8: Form labels and fields – not many people like filling in forms and online forms are some of the worst for usability and accessibility. Form fields should be clearly labelled, including whether fields are mandatory or optional. Input errors should be dealt with in a user-friendly way and the user given a simple way to resolve errors and submit the form. It should be easy to tab through the fields in a logical order and for the user to clearly see which field they’re filling in. There’s a lot to consider and check when it comes to forms and accessibility, so we’d recommend checking the WAI guidelines here: https://www.w3.org/WAI/test-evaluate/preliminary/#forms
In an ideal world, we’d all build accessibility into our websites from day one, saving us time and money and also making our websites more search engine friendly too. In the real world, this rarely happens, but there are ways in which you can improve the accessibility or your website, one page at a time.
For more information about the Web Accessibility Initiative (WAI) visit: https://www.w3.org/WAI/fundamentals/accessibility-intro/
Leave a Reply