How to Make Your Websites Inclusive

build for digital accessibility

Want a way to become a better developer and instantly be able to charge a bit more for the websites you build? Build for digital accessibility best practices!

If you haven’t heard or seen any conversations on digital accessibility and making inclusive content lately, I’d be surprised. I’m not going to rehash why you need to care about making your content inclusive to everyone that might view it, but I do want you to know that it’s not the overwhelming task you think it is.

In fact, if you make just a few tweaks to your own workflows and your websites, you can do a lot in a little amount of time to make your websites inclusive – no matter if the person viewing it is hard of hearing, has visual impairments, or other different abilities.

Optimize Your Website for Digital Accessibility

Want a really quick summary of why your website should be inclusive? The more inclusive the website, the better the on-page SEO will be.

Shock!

It’s true though. Remember that Google “views” websites not through a person, but a robot crawling your websites. Many of those with different seeing abilities especially will view your websites using automatic screen readers that more or less read the website back to them. Making your websites work for them means you’re making your websites work for Google. So not only are you being inclusive and avoiding getting your clients into potential lawsuits, but you’re helping out their websites’ SEO. Win-Win!

How can you improve your website’s accessibility?

  • Use ALT tags that are descriptive of what’s in the image (Red Ford Truck) for any image you upload. WordPress makes adding ALT tags in the Media Library super simple!
  • Make sure image file names are clear and descriptive, i.e. red-ford-truck.jpg. Don’t ever upload a filename that looks like this – file0183.jpg
  • Make sure the font color you’re using has a high-enough contrast on whatever background color you’ve selected to be legible by everyone. WebAim has a great tool and you’ll just need your hexcodes.
  • Use a clear, easy-to-read font and make sure it’s large enough. Personally, I love using at least a 18px font for the body of my website. Avoid script fonts for large amounts of text because they can be hard to read
  • Focus on good UX – when buttons, links, and the design are all easy to follow, it makes the whole experience easier.
  • Provide text transcripts for any audio or video components on your website. (Keep reading for more about transcripts!)

Make Your Videos Inclusive by Using Captions

This is a big enough one that it gets its own section. I cannot even begin to emphasize how important captions are to include in every single video you produce. Not only do 80% of people watch video without the sound, but some have no choice.

Using captions can feel overwhelming, especially if you’re shooting longer-form videos. Using a good transcription service like Rev.com makes that much easier, though. Personally, I use their automated services which are only $0.25/min and so accurate I barely need to tweak a thing. This is perfect for any videos you upload to YouTube, Vimeo, or even Facebook where you can upload an SRT captions file that will time your approved captions to your video perfectly. The awesome thing is Rev lets you download your transcripts in multiple formats, so you can include captions and a written out transcription below the video on your website, too.

When you’re uploading videos to Instagram, TikTok, and other platforms that are shorter, Rev provides “burned-in” captions that automatically appear in the video. While Instagram and TikTok are both working on in-app captions services, they’re also not available to all users yet. Personally, I like an app (iPhone only though) called Captions: Speak to the Camera that adds cool, stylized captions to my videos. (It’s also free, so that’s a huge bonus!)

Yes, captions typically are going to take some time to edit or some $$ upfront to get created, but they’ll do a lot to ensure that your video content is not only inclusive, but watchable by everyone no matter where they are.

Keep Inclusivity Going on Social Media, Too

All of the above items can easily be worked into your processes whenever you help customers build websites, but what about your own marketing? While you should 100% follow the same practices on your own websites, I highly recommend applying as much inclusive habits to your social media as possible.

You’re a little restricted by the different apps and they options they give you, each major platform is making great strides towards accessibility in the last year or two.

You can add ALT tags to your Instagram photos (manually, through the app) which is a huge plus! If you use a scheduler like I do, you’ll have to go in and Edit your post to find it, or add the ALT tag while you’re creating the post while you’re in the app. It’s still a little clunky, so if you forget it’s not a huge deal, but we’re getting there with the photo-heavy app. In this case, you really want your ALT tag to be a description of what’s in the image.

It’s also why you’ll want to keep text-in-image graphics to a minimum on your social media, because without ALT tags or a complete transcription/description in the caption, there’s no way for those with different visual abilities to actually read those. Think twice before you use text on an image, and then ensure that you’ve added in your ALT tag, a marked [Image Description] part in your caption, and a good caption in general so they’ll know what it is everyone else is seeing.

Another thing you’ll want to keep in mind is to avoid those “fancy fonts” on Facebook and Instagram. Here’s the thing – they’re actually emojis, which means the way it looks on your phone is probably not how it looks on a different device. They also can be incredibly hard to read and may not come out looking like text at all! If you want to use them, make sure they’re not the main opening of your caption at the very least.

A good rule of thumb for things like that – if you can’t change the font style or color in an app within the app, don’t. Things can only go wrong.

Join the Conversation!