An accessible website is a beautiful website

As designers, you likely spent a lot of time thinking about the visual nature of your website – how does it look? Does it reflect your brand? Do the images stand out?

Does your brand blend together seamlessly? Do people “get” what you do?

Accessibility was likely an afterthought.

I know it used to be an afterthought for me, but ever since I spent time digging into how to make my website better for everyone and anyone, I can’t unsee my past mistakes – yikes!

Instead of beating myself up though, I chose to take a step-by-step approach to improving the accessibility of my website. And I also choose to see it as a work in progress. The bodies that govern the web accessibility standards go through periodic updates, and I follow them and review as needed. Sometimes a mistake gets through, and you can contact me via my form to let me know.

Here’s a short peek inside my process:

Step one – skip the overlays and widgets!

There are companies that sell you on this one-stop-shop solution and they are costly and ineffective. In most cases, they actually interfere with accessibility rather than enhance it.

If you’ve been around for any length of time, you might remember my post about it from last year.

Step two – follow a short checklist of actions that you can take now

There are small actions that you can take to get yourself started.

Accessibility, as with everything else in your business, is a marathon, not a sprint. It is a commitment to improving your site over time. More importantly, it is a commitment to making your website welcoming to everyone. Once you start from that point, a lot of accessibility guidelines falls into place.

Here are a few tasks to get you started and a little bit about why they are important:

• Check your font size – 16 pt font is considered to be the minimum font size that is readable on a website. And this is a pretty easy check and change to make.

  • A readable font size (and font type!) helps consumers access your site – better for people cognitive issues, and better for folks with a range of visual impairments.

  • Using fancy scroll fonts or novelty fonts looks fun, pretty, and branded, but it’s better to select a font that most people can read.

• Make sure your hyperlinks are longer – this is better for people motor disabilities who have issues clicking on links that are too small or too short in an article.

  • It also gives people using screen readers more information about the link they are clicking on.

• Use a tool to scan your website for missing alt text and then commit to rewriting your alt text with clearer descriptions.

  • Alt text works for people with vision impairments to understand what images are on the page. It also works well for people in places with weaker internet connections for whom images don’t load quickly.

• I didn’t know that this needed to be said, but don’t use fast flashing images on your site. Let’s leave that kind of animation in the 90s.

  • This can cause seizures for people with epilepsy and other seizure disorders. It’s also not a helpful design element for anyone and will likely send people away from your site instantly.

• Making your website free from too many distractions is good for some people with ADHD, and it is also just a good design practice. Focus on your products and on having good calls to action.

• Left-justify your text. Yes. Even you. I know that centered text is a default for a lot of folks, but shifting your text to be left-justified (like in this blog) is more readable.

• Because many of us work in a visual medium, making sure that our visuals are accessible is paramount. I talked about alt text and font size – color contrast is also important. You can use a filter to see how people with colorblindness experience your site and see if you need to increase your color contrast.

  • People with visual impairments may not be able to see the products exactly the way you intended them to be seen, but they still need or want to buy jewelry for themselves, or for others.

Step 3 – Set yourself up to review a few times a year

To help myself review, I add this as an ongoing project to my project management system (Asana – of course!) so that I keep it top of mind.

At the moment, one of my larger review projects is to make sure that my older blog posts are properly formatted with the right headers, that my hyperlinks are longer, and that I included alt text on any images that I used. It will take time to go through all of them, but I can work on a few a week and use best practices moving forward.

If you also have a blog, using headers properly can help with the overall structure of your post. It also gives more context for people using screen readers and other assistive technology.

Your review action might involve adding or rewriting alt text on your images, or double checking your minimum font size.

Step 4 – Keep accessibility as an ongoing commitment

My list of tips is meant to get you started, it is by no means a comprehensive approach. Small steps are a great start!

Much like operating an eCommerce website that never “feels done”, including accessibility in your process will also never “be done”, but it will be done better than if you never started.

You can start from wherever you are.

Wrap it up

Learning to listen to the people most affected by our choices is always a good idea. In this case, listening to disability rights organizations and to people with disabilities gave me the best information and saved me from spending money on a useless tool like those overlays, and encouraged me to review and revise my approach on a regular basis.

Where could you start on your website today that would help you make it more accessible?