DEV Community

Morgan Smith
Morgan Smith

Posted on

Jumpstart your accessibility journey

I have seen a groundswell of articles discussing accessibility and what it means for developers, but I haven't seen as many articles discussing how to make your site accessible. So, I wanted to talk about some quick tips that can help any level of developer(and/or designer) to make their projects more accessible. First, I’ll talk about how developers can test their sites, then discuss some resources that I have used to make my sites better. Finally, I’ll list out some tools that I have found to be helpful.
Sometimes when people use a new metric to judge websites it can be very stressful for developers. What comes to mind is when google changed their metric to focus on mobile-first, which forced many devs to change the way that they made their sites. In the same way, it feels like accessibility is currently going through this change. To make it less stressful, the first step is to understand the metric and how you measure up to it. There are a few places to do this. One of the most popular tools is google’s Lighthouse, which is easy to use and many developers already use it to test their speed. Here is how you use Lighthouse (you will need to have the dev version of Chrome installed):
1) Open Chrome dev
2) Go to your site
3) Open dev tools (same as inspecting the page)
4) Navigate to audit
5) Click audit
6) Done
This tool is extremely useful for a few reasons: it helps you understand what google thinks is important to help your ranking, it’s pretty intuitive to use, it’s free, and it can also help point you down the path of making your site accessible. There are also many paid services you can use.
Alright, awesome, you have figured out what our accessibility score is. What do you do if the score isn’t so great? First, you can look at some resources and figure out what actions you can take to fix it. You can go to w3c’s site for a lot of helpful tools, or a11y’s websites for help. My personal favorite, but probably the hardest to get done is actual user testing. If whatever validation tool you choose said that your site isn’t accessible to people who only use keyboards, do you know someone like that?
It’s not the end of the world if you don’t, because many other devs have run into the same issue. Chrome has a lot of plugins for you to see how your site looks to people with disabilities. For example, it will show you what your site looks like to color blind people. And to keep this article from being too Chrome heavy, firefox has also released an accessibility inspector, which can be another helpful tool (plus you get some cross-browser testing for free).
To finish off this article I want to quickly run through some tips that aren’t complicated to implement on your site. Make your text high contrast. There are many tools to check this, and it's just good design to have your text be legible, and it will also be easier for users on mobile. Your text should also be easy to understand. This does not mean dumbing down your text, but being clear and concise. This will also help your SEO since most spiders aren’t “smart” enough to read at a high level. Another tip that will help your SEO is adding alt tags to all of your meaningful images. Doing this will also make your site friendlier to screen reader users. Finally, to go back to talking about metrics, your speed metric can affect your accessibility. For example, if someone only has an older device and your site is huge and slow, they will not be able to access it at all.
I hope this gave you some tools and tips to actually implement accessibility, not just think about it (like the newest js framework).

Top comments (0)