DEV Community

Cover image for The importance of accessibility in digital products! πŸ’ͺ [I promise you will read this twice!]
GrahamTheDev
GrahamTheDev

Posted on • Edited on

The importance of accessibility in digital products! πŸ’ͺ [I promise you will read this twice!]

Never forget about accessibility when you are developing digital products. I hope this article will reaffirm some of the things I often have to say about the importance of accessibility!

Going on and on about accessibility is my thing, I know that, but there are reasons you should listen to what I have to say as they will benefit you!

To illustrate this point, in this article I will talk about SEO, conversion rate optimisation and UX and how it ties in with accessibility! Let's begin!

Give more people access to your message

You want as many people as possible to hear your message right?

Up to 20% (we don't have an exact figure but it is somewhere between 15% and 20%) of the world's population has some form of disability! People with disabilities visit your site every day, you just don't realise it!

Never has it been more critical than today to make sure that you capitalise on every visitor to your site and do your best to turn them into a customer. If you are ignoring the needs of 1 in 6 people then you are not setting yourself up for success!

Going through the motions on accessibility, rather than embracing the benefits it brings is only hurting you, your clients and your business.

To make it clear how easy it is to stand out in a particular industry you need to know that 97.4% of websites have accessibility errors.

Let that sink in for a moment. Only 1 in 50 websites are free from detectable errors. Errors that mean that disabled visitors will be frustrated and ultimately possibly leave in search of a slightly more accessible site.

You could be the one company in an industry that put the extra time and effort into making your site accessible and really stand out!

Down playing the moral and corporate social responsibility side of things for a second, just imagine how being the only accessible site in an industry could benefit you!

Never ending positive conversations about your company and word of mouth referrals within the disabled community will result in a snowball effect as your site is a pleasure to use and inclusive, rather than impossible to use and exclusionary!

Going a step further, imagine how much publicity you can get your site if it is accessible and inclusive! Publications love to talk about the inaccessibility of the web, but they struggle to find examples of accessible sites to show the difference it makes. You could find yourself referenced in some great blog posts with a little effort!

To me it is worth spending those extra few hours to add WAI-ARIA attributes, use the right HTML elements and check colour contrast in exchange for the huge uplifts your site will see.

Run the numbers

Around $1 Trillion dollars of spending is controlled by people with disabilities!

And when you consider their close family are also likely to favour a company that is inclusive you can soon see why the numbers start to stack up in your favour if you focus on accessibility!

Desert your old ways of thinking that accessibility is expensive, not thinking about accessibility is expensive!

You can think of it like this, for every visitor to your site you are currently losing about 10%-20% of your potential customers to poor design.

Never in the history of capitalism has it been more important to look after every single visitor as gaining visitors is more time consuming and costly than it has ever been.

Going above and beyond for disabled visitors have an added bonus, it also helps everyone else, as good accessibility often results in good UX.

To illustrate this point let's consider colour contrast.

Make the contrast too low and people who are trying to use your site in bright sunlight on a mobile will struggle to read what you have to say.

You only have to increase the contrast to a decent level (4.5:1) to avoid this problem. I promise you, increasing the contrast will not ruin your design!

Cry every time you see grey text on a grey background and weep when you see orange text on a white background, I know I do!

Never underestimate the importance of semantic HTML

Going back to HTML basics is something that a lot of developers need to do!

To call yourself a developer and then produce <div> soup is shocking. We have so many semantically relevant HTML tags that help people use our products and help out site rank on Google, why would you think that <div> soup is acceptable!

Say you want to create an accordion (for example). Do you use a load of <div>s and a load of JavaScript? No, you reach for <summary> and <details> and make life easy for yourself and your users!

Goodbye bloated and slow JavaScript libraries, hello minimal HTML, semantics, accessibility and performance!

Never reach for a <div> if there is an HTML element that can do the job! Follow this simple rule and your site will be far more accessible and faster too!

Going through your Markup is also far more pleasurable when you have descriptive HTML tags instead of random class names everywhere. It lets you easily see where <header>, <main>, <aside> etc. are!

To make things even better and more consistent you can even target these elements in your CSS, saving you the effort of coming up with class names and making your CSS nice and tidy!

Tell me that you don't like clean HTML and easy to follow CSS classes! OK I know some of you use Tailwind and clean HTML is not possible there, but even then having semantic HTML tags let's you see where you are in the document structure far more easily!

A day 1 accessibility policy is the key to success!

Lie to yourself all you want with the "I will fix that later" rubbish, we all know it never gets fixed as there are always new features to add and bugs to fix. It will take you far less time doing it now that trying to fix accessibility in the future!

And don't forget the law!

Hurt and ignore people with disabilities through your negligence and shoddy code and it will eventually come back to bite you!

You could end up on the wrong end of a lawsuit that costs you and your company thousands! You have been suitably warned!

What now?

The best thing you can do now is go back and read the first word of each paragraph and heading! πŸ˜‰

F**k me, I can't believe I got you, I think I won the internet for today, have a great week! 🀣

Top comments (23)

Collapse
 
grahamthedev profile image
GrahamTheDev • Edited

Yes the "WTF" at the end is also deliberate, I am way too proud of myself for this!

You should have seen how long it took me to work "desert" and "down" at the start of a sentence into the flow (well, the best flow I could make within the limitations).

And yes I know it is "gonna" not "going to" but seriously that would have been WAAAYY too obvious!

Have a great week everyone! ❀

Collapse
 
dilutewater profile image
Rachit Khurana • Edited
Collapse
 
siddharthshyniben profile image
Siddharth

That rickroll was neat 🀣

Collapse
 
grahamthedev profile image
GrahamTheDev

Trolling is a favourite pastime of mine as you know! 🀣

Collapse
 
oniichan profile image
yoquiale

I love that you can't get sued for not having accesible websites here in Europe.

Collapse
 
grahamthedev profile image
GrahamTheDev

You can it is just that nobody has stepped up and pushed hard yet. In the UK for example there have been 2 cases so far but they were settled out of court which, in my opinion, was not the right action for the disabled community…and I am not a fan of litigation while saying that!

Collapse
 
oniichan profile image
yoquiale

I meant it literally. Making stuff accessible is a drag (based in my own experience). There aren't enough articles and stuff about how to make some stuff accessible based on your needs, and the already existing examples in the WCAG's guidelines aren't good enough.

I'd rather leave accessibility stuff to an accessibility expert.

 
grahamthedev profile image
GrahamTheDev

Ah, I thought you were kidding as that is such a negative attitude, but I cannot say I blame you!

The WCAG being overwhelming and the lack of proper examples is something I can truly sympathise with.

It does sadden me to see someone think this way about accessibility but it is understandable given the breadth of the topic (if it is any consolation each part of accessibility is very "shallow". You need to know 200 hundred little things not 20 big things).

I am about to embark on a different path with my content creation, I hope I produce some stuff that helps you change that mindset and just learn a little bit about accessibility each day. ❀

Thread Thread
 
oniichan profile image
yoquiale

I've read most of your articles and you at least take proper effort to make stuff understandable, which I appreciate. if the wcag documentation was easier to digest I'd look at accessibility in a better way

Thread Thread
 
grahamthedev profile image
GrahamTheDev

Well challenge accepted, my aim is to make you understand and want to engage with accessibility more! Maybe a WCAG in plain English series could be useful!

I am about to do an Ultimate UI series over the next few months where I build UI components that are β€œperfect” and that will feature semantics, accessibility etc so hopefully that will help! ❀️

Thread Thread
 
oniichan profile image
yoquiale

I'm sure your articles have helped a lot of people here :D

Collapse
 
bhagyamudgal profile image
Bhagya Mudgal • Edited

@inhuofficial Thank you for reviewing my site. It was a deep review and I was laughing while reading it. I got to learn many things which I dont know like that aria-page. I will learn more about these accesibility things. I will try to take all measures suggested by you and rebuild my site to v2. I will also replace background of my current image with some good looking colour. This post was really helpfull to me. I hope you will also review my version 2. I am ok with you posting this.

Collapse
 
grahamthedev profile image
GrahamTheDev

Super, of course I will review v2, I messaged you through your contact form on the site so you can email me if you need help.

Just bear in mind that sometimes I get busy so it might take me a few days to come back to you!

Glad it made you smile, article will go out later today now I know you are ok with it so hopefully that will get you a few visitors! 🀞❀️

Collapse
 
bhagyamudgal profile image
Bhagya Mudgal

@inhuofficial Please review my personal portfolio. I am waiting for it.

Collapse
 
grahamthedev profile image
GrahamTheDev • Edited

Hey Bhagya

Please have a read of the final draft before I release it and make sure you are "happy" with it.

If you can let me know when you have done that I will make final edits and fix typos etc. and then unleash it on the world:

dev.to/inhuofficial/review-your-cr...

I will also email you just to make sure you have chance to review.

If I don't hear from you I will release it probably Wednesday evening or Thursday morning.

Collapse
 
grahamthedev profile image
GrahamTheDev

I am doing bud, over half way done - here is a sneak peak! dev.to/inhuofficial/review-your-cr...

Collapse
 
sidcraftscode profile image
sid

well I read this twice

Collapse
 
grahamthedev profile image
GrahamTheDev

Haha good stuff, as you like the Rick rolls did you like this one 😜🀣

Collapse
 
sidcraftscode profile image
sid

🀣

Collapse
 
brunoprietog profile image
Bruno Prieto

Great article]! I'll keep an eye out for the components library

 
grahamthedev profile image
GrahamTheDev

No he seems serious, I was the one who got it wrong!

Collapse
 
oniichan profile image
yoquiale

I'd rather not do something that is a pain in the ass to do because of the lack of proper code examples. Besides, WCAG's guidelines feels too overwhelming to me.

Collapse
 
grahamthedev profile image
GrahamTheDev

Oh I read that as a sarcastic β€œI love”, we use that a lot like β€œI love how the bus is always late when I have an appointment” in parts of the UK.