Boost Your Website’s Accessibility Score, Boost Inclusion and SEO!
A few months ago, I was hanging out with a friend who uses a wheelchair and I took her to an appointment on the second floor of a generic small office building in the suburbs of Denver. Simple enough, right? What could go wrong?! Well…
- The one accessible parking spot in the lot was occupied by a giant work truck, which apparently belonged to the maintenance dude on top of a nearby ladder. I called up to him, and he rudely gestured at able-bodied me to park somewhere else, suggesting rightly that the whole damned lot was pretty empty.
Of course, the whole damned lot also had exactly one ramp onto the sidewalk and that was blocked by his truck.I told him I was with someone in a chair, and pointed to the ramp. Not a little embarrassed, he quickly climbed off the ladder to move his truck.
- We got to the second floor via the elevator no problem. After the appointment, though, we went to take the elevator down and found a sign on one of the doors that said something like “These elevators have been giving us fits. If one doesn’t come for you, please take the stairs.” Ah… no.
Happily, the elevator did come and we got out of the building just fine. But What the Actual….?! You let me take the elevator up, only to tell me I may not be able to take it down!? Not. Okay.
I’m fortunate enough to not usually even notice the TONS of ways that the built world absolutely ignores folks who are not able to walk, but that day as I explored the world through the experience of someone reliant on a wheelchair, the value of accessible experiences really hit home.
And while I’m not a builder of small office buildings, I am a builder of websites, and believe it or not, websites can be painfully difficult to navigate for folks with various disabilities, too.
Why It Matters
Lack of manual dexterity and audio or visual impairments can make it really hard to consume web content. Imagine trying to navigate this website without a mouse – heck, without arms! Imagine trying to read it without the benefit of your eyes. How about consuming a how-to video that has no captions when you’re hearing impaired?
Right. It’s about as easy as getting into or out of the second floor of an office building with no ramps or elevators for folks in wheelchairs.
And like building ramps and installing elevators, there are also ways that websites can be made more accessible for folks with disabilities. Most of these are invisible to the people that don’t require them, but crucial to the people that do.
And no matter if you’re a small business owner or a nonprofit website administrator, making sure your website is accessible is one of the most important things you can do to ensure equitable access to your content. It’s the right thing to do (and there are also legal implications, but I’m no lawyer so I’ll leave that up to you to explore!).
Below are a handful of the things you can review/improve on your website to ensure a great experience for ALL users.
What You Can Do
Luckily, building accessibility into a website is a lot easier than installing an elevator or revamping a parking lot. There are a lot of small changes that can make a big difference.
First thing you need to do is find out where your site is failing on accessibility standards, then fix the ones you can afford to fix, and remember to keep accessibility in mind from the ground up on your next complete website rebuild (you are budgeting for a rebuild every 3-5 years, right?).
Audit Your Site
You can run your site through a simple tool like the WAVE Web Accessibility Evaluation Tool, or you can have a team of nerds like us run a more comprehensive (and honestly, I think more helpful) automated accessibility audit for you. For free if you’re a nonprofit. NO JOKE! Request a free accessibility audit of your nonprofit’s homepage here.
Make Improvements
Once you have an audit, you can use the info in there to make some basic improvements if you have access to your site’s infrastructure. Many small nonprofits and small businesses manage their site internally, so making some of the changes your audit suggests might be in reach for you without spending any money.
The DIY list below should help you work through some of those, depending on your website platform. If you want a hand making your nonprofit website or small business website more accessible, let us know – we’d love to help!
Plan for Next Time
Depending on how far out of the realm of accessible your site is, you may not be able to get your score up to 100% accessible on all points, and if you can’t afford to fix it all now, then the one thing you should be doing is making a mental note that when it’s time to rebuild your website, you hire a team that will have accessibility in mind from the get go. I happen to know a team just like that…
Some DIY Fixes That Aren’t Too Hard
Make text BIG!
You might have noticed that a lot of websites lately seem to be gravitating towards larger fonts, and accessibility is one of the reasons why. Sometimes, size DOES matter. Make sure your body copy is at least 16px. If you’re reading this on the New Why blog on desktop, the font size should be 22px. On your phone, it’s 20px.
There’s an old web development rule called “Don’t make me think” – perhaps a new one should be “Don’t make me squint – even if I’m over 50 and have multiple pairs of readers around here somewhere…”
Make text contrasty!
For regular body copy, you’re looking for a color contrast ratio of 4.5:1. That means, no dark grey text on slightly less dark grey backgrounds. Heck, it can even mean no teal on white backgrounds, much to the dismay of teal-loving me.
When you’re planning out a new website, or working with a branding team on a new color palette for your organization, please please please use the WebAIM contrast checker or ask your new designers to use it.
Behold, a failing contrast ratio on a color combo that most unimpaired users would probably think was just fine.
Make text alternatives!
When it comes to accessibility, one thing to keep in mind is that many users will be reliant on tools called “screen readers” that basically speak the website to them. For website content administrators and developers, that means we need to be on top of making sure all of our visual cues have a written backup.
Alternate text, better known as “alt text” is descriptive text that explains a visual element, if that visual element is intended to convey meaning (that is, it’s not just a background image or some random graphical flair).
Depending on your website platform, how you enter alt text will vary, but tools like WordPress make it fairly easy to add alt text when you include an image in a post or page.
Some alt text about screaming in kitchens that is somehow related to a post about beavers.
Make links descriptive!
Navigating a website by voice/screen reader isn’t 100% as intuitive as it is by eye, and one simple way to make that easier is to make sure that your links are properly described. You want to try to skip the vague phrases like “click here” or “read more.”
Instead, when possible use phrases like “Read this post” or “Download the Report” or whatever makes sense in context.
Make headings make sense!
When you’re writing a page or a post on your site, you’ve probably encountered “headings” and they’re available in various sizes. H1, H2, H3, H4, H5, H6. A lot of folks tend to use those just to make a chunk of text the size they want it to be, but there’s more to it than that.
These headings are ways for users who may not be able to see how big your text is understand the relative level of importance of some content/headline. Each webpage should only have one h1 – and that’s usually the page title, and then the next level header is an H2. If that H2 has a supporting heading, then that will be an H3. Think of it like a bulleted list with a few layers:
- H1: Things in my backpack
- H2: First Aid Kit
- H3: Bandaids
- H3: Alcohol Wipes
- H3: Blister Kit
- H4: Moleskin
- H4: Safety Pin (Ouch!)
- H2: Kitchen stuff
- H3: Pot
- H3: Stove
- H3: Fuel
- H3: Spork
- H2: Sleep System
- H3: Sleeping mat
- H3: Sleeping bag
- H3: Pillow
- H2: First Aid Kit
If you start ordering those all jumbly-like, someone trying to navigate the hierarchy of a longer piece of content without visual cues is going to get more than a little frustrated.
Bonus: This is also great for SEO!
Because the goal of making a website accessible is ensuring that folks that rely on assistive technologies can use it, that means it’s basically making your content easily consumable by robots. And you know who the biggest robot of them all is? That’s right. ROBOT MONSTER.
This is one of my favorite movies of all time, in part because the creators were hilarious enough to put a bubble machine in the movie credits. No joke. Do yourself a favor and watch it.
Sorry. Couldn’t resist. In fact, the robot in question is Google, and if The Goog has an easier time reading your content, then the more likely it is to return it in search. Good accessibility practices are, in fact, good SEO practices. So, double win.
Curious if your site is accessible and don’t really have the time to dive in to all the tips and tricks above? No problem. We’ve got you. We’re happy to send you an accessibility audit of your website. Just reach out!
Have something to say?