A couple of newsletters ago (you can check out all past newsletters here, by the way), we talked about web accessibility.
It was an intro to help you understand what it is, why you should care, and give you a very brief overview.
As a result, I’m hoping you are caring more about web accessibility and making progress to helping your site be more inclusive.
With that, I’m here to tell you 3 of the top things you should avoid using on your website — and if you are, maybe reevaluate it and look for new, more accessible alternatives.
1. Sliders
Sliders used to be popular in the late 2010s, however nowadays they are really an outdated approach.
Most often, you’ll find a slider at the top of a website homepage, and it’ll have a headline, maybe some copy, and a button.
Before we even talk about accessibility, there are proven stats that show users really don’t even interact with sliders anymore — so there’s no actual reason to include them.
When it does come to web accessibility, majority of sliders used on websites are not built to be accessible — which means, those who navigate the website with a screenreader or other device, will not be able to even use it or read it. Therefore, it becomes a complete blind spot for that individual.
Best Alternative: If you’re using a slider, and looking to convert it to something that’s more accessible, just choose your single best slide out of that slider and make it a static section. Take the time to craft the perfect message and call to action — it’ll convert way better than a slider ever would have.
2. Motion/animation
So, I know that sometimes there are some fancy animations that look really cool — but the truth is, they just are terrible for website accessibility.
There are some techniques to still include motion in your web graphics, and align with accessibility standards. You have to ensure there’s a way to pause, stop or hide the animation from happening, not have it blink anymore than 3 times every second, and a few other guidelines.
In the end, you might find that it’s just not worth it — and when it comes to best practices for web development in general, motion and animation only slows down the speed of your site.
So consider — is that cool effect really making a difference?
Best Alternative: Just don’t use animation — the most subtle types (like a button floating on hover) are acceptable, and can still add a unique effect without interfering with accessibility.
3. Poor color contrast
One of the easiest, but biggest, things to avoid when it comes to web accessibility is implementing poor color contrast.
There are millions of people that navigate the web with vision problems — and having color contrast that makes it difficult to read and navigate your site is something you should aim to avoid at all costs.
There are many color contrast tools you can use, which will tell you if your color combination will pass accessibility guidelines. Here are a few:
In these tools, you will be able to tell if your color combination will pass AA or AAA guidelines (or neither). If your combo doesn’t pass, they can help you get a close enough match to pass.
Best Alternative: It’s best to determine your color palette and making it accessible in the very early stages, as early as creating your brand color palette.
Evaluate your site for these 3 things
Check out your site now and see if you can find ways to improve on these 3 things I pointed out today.
It’s important to always consider website accessibility, and forcing elements just because they look “cool” doesn’t mean they’re even actually effective.
Thanks for reading!
