How to Make Your Website Design More Accessible

One of the most common mistakes I see when visiting websites is that they don't meet basic accessibility standards.

This includes websites that I'm reviewing, those I'm helping clients with, templates I've been asked to look at, and the sites I'm visiting in everyday life.

But ignoring accessibility (or just not knowing that it's something to consider) doesn't cut it anymore in the world of online business. In fact, the ADA.gov website actually states that "Web Accessibility for People with Disabilities is a Priority for the Department of Justice."

But beyond avoiding a lawsuit, creating an accessible website shows that you value all people, something especially important for businesses that prioritize being neurodivergent-friendly.

Before we dive in, I'm Samantha — website designer, book nerd, and ADHD mom who helps holistic health professionals get websites that feel like them and bring in the right clients. With over 10+ years of experience, I created the One-Week Website Design process to make that transformation faster, easier, and way less stressful.

I'm navigating ADHD, chronic illness, and the endless juggle of motherhood and business in a neurodiverse household (it gets really interesting around here). I'm surrounded by half-finished craft projects, Legos, and a Kindle filled with books I plan on reading.

All of that means that website accessibility has been on my mind for years as I've been designing sites and developing processes to get the best results for my clients.

Accessibility Starts With Your Website Platform

While accessibility includes a lot of small details, it starts with the foundation you're building on — including the website platform you choose.

Most small businesses aren't building a website from scratch on their own server, which means that you're probably choosing from one of the many drag-and-drop platforms available right now.

In addition to pricing and features, you want to consider the built-in accessibility features that each platform offers so that you're starting off with a strong foundation.

I particularly like Squarespace because it has features like:

• Alt-text fields for images
• Keyboard focus outline
• Semantic structure
• Accessible media to add captions
• Motion-Safe Formats for videos and animations

While you can also use an accessibility plug-in on your website, those don't cover everything you might need and won't protect you from legal concerns. Accessibility is less about adding one tool at the end and more about making thoughtful design and content decisions throughout the entire website.

6 Tips for Creating a More Accessible Website

No platform can make every design decision for you. Once your website foundation is in place, there are a few key areas you'll want to review to make sure your site is easier for more people to use.

These don't have to be massive, complicated changes. In many cases, small updates to your text, colors, images, and layout can make your website easier to read, navigate, and use.

1. Use an Accessible Font Size

Font sizing makes a huge difference in how accessible your website is (and it's usually an easy change).

While I've found that many people prefer to design with the smallest font size possible because they think it looks cleaner, you're actually doing yourself and your site visitors a disservice. Larger text is easier to read, which means people will stay on your website longer (and not miss so many important details).

Your font size should be at least 14 pixels to be legible. 16 pixels is preferable and I recommend going up to 19 for blog posts and other content-heavy pages. This makes it easier to read for everyone.

2. Make Sure Your Colors Have Enough Contrast

According to WebAIM's 2024 report, 81% of home pages had low contrast text that fell below the WCAG AA guidelines, which is why color contrast is one of the first things that I look for when conducting a Free Website Review.

Your goal when setting the colors for your website is to make sure that your font color stands out enough from the background of your website so it's legible for everyone.

Unfortunately, many brand color palettes aren't created with accessibility as a consideration. Even on my own website, I used a yellow button with white text that looked nice and fit with my brand aesthetic, but was difficult to read for many people because there was not enough contrast between the background color and the text.

Instead of just going with what looks good to you, make sure your website has enough contrast, especially for smaller body copy. To meet the minimum standards of WCAG, text smaller than 18pt should have a contrast of 4.5:1 and bolded text or anything larger than 18pt should have a contrast ratio of 3:1.

This probably doesn't mean much to you, but basically, your text needs to stand out against the background color and the larger the text, the less contrast you need. That means that white text on a pink background or gray text on a white background probably isn't going to cut it — no matter how pretty it might look.

I love using The Color Palette Studio's Free Color Contrast Checker when checking a few colors because it's easy to use and make adjustments.

3. Add Alt Text to Your Images

I'm the first person to admit that I can spend way too much time trying to find the perfect image for my website. I create a library of stock images for each project I work on so that we have on-brand (and royalty free) choices that will connect with my client's ideal clients.

But it's still vital to remember that not everyone actually sees the images on your website. Your website visitors might be visually impaired, using a screen reader, or have slow internet that doesn't load images. No matter the reason someone can't see the images on your site, you need to consider what they do see.

This is where image alt-text comes in. Alt-text is a brief description that reflects the content of an image. It tells someone (and Google) what an image looks like if they can't actually see it.

Alt-text descriptions for images should be short, but descriptive, and not stuffed with keywords.

It's also important to use actual text instead of adding text over an image before uploading it as much as possible. If your headline is built into your background image, people may not be able to read it (and it might be cut off when resizing for different devices).

4. Include Accessible Options on Videos

This one is something most of us will be familiar with (I watch everything with closed captions), but it's an extra step that's easy to overlook if you're not intentional.

If you include audio or video on your website, make sure you include captions or a transcript.

• For audio, create a transcript and then add it to the content of the page (if it's in a blog post) or link to it with a button under the audio player.
• For videos, caption your video and add a transcript for those who won't be able to load the video.

You should also use a video player that has other controls, such as:

• Play/Pause
• Speed
• Fullscreen

Luckily, most website platforms include these options with their built-in video players or will allow you to embed a YouTube link, which includes all of the features you might need.

5. Design for User Experience

Especially if you work with neurodiverse individuals, it's important to remember to design with user experience at the forefront.

When I was getting my architecture degree, we were always called out for putting "form over function" and it's the same with website design. Something can be eye-catching, but a pain to navigate (have you seen the Buzzfeed lists about Design Fails?).

Your design should consider things like:

• Limiting animations
• Breaking up text into bullet points
• Creating clear sections with headlines for easy scrolling
• Using comparison charts when they make sense
• Giving clear next steps and details on what to expect

If you aren't sure about your website's user experience, you can test it by asking a friend to navigate your website while you watch. Make note of what they click on, where they have questions, and the places that catch their attention.

6. Create Clickable Buttons

If you want people to take action on your website, you need to get them to click.

Buttons should stand out from the rest of your content (this is good for sales and clicks as well as accessibility) and change on hover so users know that it's a clickable element. You can use bright colors like red, orange, or yellow to make sure your buttons stand out.

You should also choose a specific call-to-action for each button on your site. Instead of saying "Click Here," your button text should tell a visitor what will happen when they click (like "Download the guide" or "Subscribe now"). This is good practice anyway, so it may not be something you need to change, but double-check that someone reading your website will know what a button does based on the context and button CTA.

You also need to make sure that your buttons are large enough (and have enough space around them) for people to be able to easily click them on a mobile device. We've all experienced a website where the button was too small or our finger hit the wrong link — don't make people frustrated for the sake of looking nice.

And, please, please, please, make sure that any pop-up windows have a very clear and easy to find close button.

Making Accessibility Part of the Design Process

The easiest way to create a more accessible website is to think about these details before the site is finished — not after everything has already been designed.

When I was creating the one-week design process that I use for creating client websites, I knew that I wanted accessibility to be built into it from the beginning instead of being an afterthought like it is for many businesses.

I worked with an accessibility expert to review my existing designs and see where I could improve them. We then worked together to make sure that I had resources to use as I began each new project to make sure we were starting with an accessible design from the beginning.

Now I include things like color palette optimization, UX strategy, and alt text in all of my projects so that my clients know their websites are set up for success.

If you want to learn more about my design process (along with design and SEO tips), you can find me on Instagram or on my website. I'm always happy to give you suggestions on how you can improve your website design, conversions, and accessibility — just sign up for a Free Website Review!