Feel Like a Hot Mess? Your Website Might Be One Too – Prioritizing Website Accessibility
PART I: Color Contrast, Alt Text, Headings, and Keyboard Navigation
We all love pretty things, and websites are no exception. A sleek design, bold colors, stunning visuals… it’s all great. But if your site doesn’t function properly or isn’t accessible to everyone, all that eye candy is basically useless. Accessibility isn’t just some boring checklist item, it’s about making sure everyone, regardless of ability, can actually use your site without wanting to throw their computer out the window. And let’s be real, an accessible website is just a better website… FOR EVERYONE, even those without disabilities or impairments. That being the case, I’ve decided to start a simple blog series that highlights some website accessibility basics, with this installment outlining color contrast, alt text, headings, and keyboard navigation.
1. Color Contrast: Stop Making People Squint
Ever tried reading light gray text on a slightly darker gray background? Yeah, me too. It’s like trying to read tea leaves, and not in a fun, mystical way. Proper color contrast ensures that your text is actually readable, especially for people with low vision or color blindness. The general rule? Text should have a contrast ratio of at least 4.5:1 against its background.
This isn’t just a nice-to-have… it’s a requirement under WCAG guidelines. If you’re unsure whether your color choices are up to snuff, use tools like the WebAIM Color Contrast Checker to analyze your site. For Example:
This text has a color contrast of 3.9:1 against the white background, which fails the standard.
While this is a color contrast of 5.02:1. The difference is subtle to most, but an absolute necessity to others.
To get started, add a Google extension such as ColorZilla and highlight both your fore and background site colors. Then, head over to a color contrast checker, like WebAim, and enter those values in the appropriate areas. Voila! You now know if your site colors meet the minimum 4.5:1 color contrast ratio.
2. Alt Text: Describe, Don’t Overwhelm
Images are a big part of the web, but not everyone can see them. That’s where alt text comes in, providing a textual description of images for people using screen readers. A good alt text description provides context without over-explaining, describing both the image itself and its relevance to the surrounding content on the website.
The key here is balance. If you’re describing a cat, don’t just say “cat.” Say “A fluffy orange cat lounging in the sun.” But also, don’t go overboard with something like “a majestic feline overlord basking in golden afternoon light, plotting world domination.” (Unless, of course, that’s truly relevant. In which case, carry on.) And if an image is purely decorative? Skip the description with an empty alt="" or tag “null” so screen readers know to ignore it.
3. Heading Hierarchy: A Roadmap, Not a Maze
Think of headings like an outline for your content. They help break things up so that both humans and assistive technologies (like screen readers) can make sense of your page. Without a clear heading structure, your content becomes an overwhelming, unreadable mess. And nobody wants that.
The golden rule? Keep things in order. Your <h1> is the main title, required under WCAG guidelines, and should only show up once on a page (99% of the time at the very top), <h2>s are for big sections, and <h3>s (and beyond) break things down further, always in a logical and organized manner. Skipping heading levels (like going from an <h2> straight to an <h5>) is a big no-no. It’s confusing and makes navigation a nightmare. Keep it logical, and your visitors (and search engines) will thank you.
To check your headings on your own, download a Google Chrome Extension, like the WAVE Website Checker. This is a robust tool, and might be confusing for newbies, but, after navigating to your website and enabling the extension, simply click “Structure” to identify the headings and order your site is using.
4. Keyboard Navigation: The No-Mouse (or track pad) Challenge
Not everyone navigates the web with a mouse. Some people rely entirely on their keyboard to move around, which means your site needs to be fully functional without ever touching a trackpad. If someone can’t access your menus, buttons, or forms using just the Tab key, you’ve got a problem.
The below video shows a website being accessed with just a keyboard, using the Tab, Enter and Arrow Keys. It also shows a clear focus state, which helps the user know exactly where they are on the webpage, no matter how many times they’ve “tabbed” around.
Final Thoughts
Accessibility isn’t just a box to check or a plugin to install… it’s about making the web usable for everyone. Ensuring good color contrast, writing useful alt text, structuring your headings properly, and enabling full keyboard navigation will make your site better for all users. And bonus: a more accessible site often means better SEO, improved usability, and happier visitors overall.
Finally, the screenshots and references shown in this post are from websites built in WordPress, but the logic applies to all sites, regardless of platform. Accessibility best practices are universal, whether you’re using WordPress, Shopify, Squarespace, or coding everything from scratch.
Want to run a few accessibility checks on your website yourself? These tools are a great place to start:
Need Help?
If you have questions or are interested in making your website more accessible, I’d love to chat! Reach out to me here, to discuss conducting an accessibility audit to identify weaknesses and help you create a more inclusive website.