Our web developer, Ben Lumley, runs us through the fight for accessibility and how businesses could be missing the mark on more than 30% of their customer base if their website is not accessible!
Needs of the web project
Web projects have a heavy mix of needs: needs of the business, needs of the business owners, needs of customers and needs of the day-to-day user. All of which get rammed into a website as everyone wants their input.
The website needs to be consistent with the company branding. Colours need to be on point. Logos need to be clear. Strap lines need to be compelling. Content needs to promote the company as much as possible etc.
As the web project moves forward, other company stakeholders get involved as well; crafting and shaping their key areas of interest to make them feel better about the project and their department.
On the other hand, there are web designers, who spend hours painstakingly crafting beautiful lush designs and layouts that elicit ‘Ooos’ and ‘Ahhhs’ and draw people in. They work up gorgeous, modern sleek designs that follow all the current design trends while matching as close as possible the client’s brief and expectations, before passing on for development.
The web developer takes the design, this piece of art and builds it in the best way he or she can, following the specifications they’ve been given. Rounds of tweaks and changes later, with people getting involved and giving their opinions late on, the site is finally ready to be let loose in the world.
Inaccessible, Frankenstein-style websites
What results? A Frankenstein style website that has kept everyone happy, and if it’s lucky, works for the average user. The one group missed in all this, however, which represents a staggering 30% of all web users, is people with accessibility issues. As an industry, we give images alt tags and add link titles thinking that’s enough but in reality, it really isn’t.
Blind web users – screen readers
Do you know how a blind person interacts with a website? Because they do. They use as screen reader, a piece of software that cleverly reads a site to help them navigate through pages to find the information they need. There are tonnes of ways it does this, but I’ll give you just one example…from a web design/development point of view.
A blind user can navigate a web page using headings set out on the page, so things like h1, h2, h3 and so on. Logical, right? Yup, but as an industry we make that ridiculously difficult without realising. As an industry, we use heading tags for styling a lot of the time too. We know each page needs an h1, that’s good for SEO. But as you go through a page on a screen reader you realise that we’re also using h2 and h3 tags all over the page for styling. Content writers are doing the same too to make their content read and flow well. To make things even worse we have the same text often in these headings. Wait! That’s silly! We don’t do that as an industry…yes, we do…
A contact page, for example, will have an H1 as the page title of say ‘Contact Us’, that’s fine. But often we also have an h3 for a subheading of ‘Contact Us’ further down the page. Then if we’ve got some contact information in the footer we usually have a heading of ‘Contact Us’ there too.
So that’s one page, with three headings of ‘Contact Us’. And how does a screen reader read that out to a blind user? As three separate headings. Watching a blind person navigate a page with 3 Contact Us headings unsure of which one is which, is awful and cringe worthy. We need to do better.
Accessibility it’s not just about headings….
How many times do we space out links for something link a menu or a list in a way that looks nice? A lot of the time? Most of the time? All the time? Do we ever consider how a speech recognition software user will navigate those? Well they tell their voice software to show the number of links on the page, this’ll place a little number by each link. The only problem is if we’ve made the spacing nice and tight, because it looks better or the business owner wants less white space and more content, these link numbers overlap so the user can’t read them all.
What about keyboard only users? Well they select elements and links on a page by tabbing through them on their keyboard. No problem, right? Well yes, only we change the default link focus on sites, to bring them in line with branding or we remove them all together. So, a keyboard user tabs through and can’t see the link focus because we’ve created a funky looking link that only a mouse user can easily click on.. Or worse we remove all styling for links altogether because it looks good, no underlines, no colour changes, no focus. All gone. Why? Because a designer says it looks good, or a business owner doesn’t like how links look so wants the styling removed.
Stop inaccessibility isn’t right
As an industry, as people working on the web, as members of web project teams, we do these things every day and rarely do we say, ‘stop this isn’t right!’
So, I ask you, who are you thinking about when you work on a web project? As a business owner are you thinking about yourself, your business, your customers and not the 30% of users on your site that have accessibility issues?
As a web designer are you thinking about your design, your peers who’ll love your work or the blind user who won’t be able to see your fancy image borders but who needs a clear user flow through the site?
As a web developer are you thinking about the latest piece of fancy jQuery or the fact that 30% of the users using the site you’re building won’t be able to navigate it properly because you’re using heading tags for styling purposes solely?
We need to do better
We need to do better. Much better. Users with accessibility issues are doing more and more on the web and we’re failing them by bad habits and lazy thinking.
