In the digital world, caring still matters.
The idea of building a better, more inclusive web for everyone isn’t a trend; it’s one of the most important goals we can strive for.
In my last post, I made the case for why accessibility is an essential, non-negotiable part of our work. We explored the human, business, and usability reasons for putting digital inclusion at the heart of everything we create.
But once we agree on the why, the next logical question is: how?
How do we turn that commitment into action? How do we translate principle into practice?
Knowing why is the foundation. Now, we build on it with the how. The focus here is on practical, concrete actions we can all take. Whether you’re deep in the code, managing a website, or just posting on social media, there are specific things you can do to make the web a more welcoming place.
Let’s dive into the practical side of accessibility and explore how we can start building that better web, together.
Tips for Web Developers
As web developers, we’re the architects of the digital world. We lay the foundation and build the structure that everyone interacts with. That’s why it’s on us to make sure what we build is accessible to everyone. It’s not just about compliance or checking off a box; it’s about empowerment and ensuring every person, regardless of ability, can use the tools and websites we create.
Here are a few core principles I always keep in mind on any project.
Prioritize Semantic HTML
Your first and most powerful tool for accessibility is clean, semantic HTML. Always use the correct elements for their purpose. Use <button> for buttons, <a> for links, <nav> for navigation, and <main> for the main content. This simple practice gives screen readers a reliable map of the page, making it much easier for users to understand and navigate.
Pro-Tip: If you absolutely must use a generic <div> for something interactive, make sure you apply the correct ARIA roles and tabindex to make it keyboard-focusable and understood by assistive technology.
Ensure Keyboard-Only Navigation
Imagine you can’t use a mouse. Could you still use your website? Your entire site must be operable without one.
Tab through every single interactive element—links, buttons, and form fields. The visual focus indicator, that outline showing what’s selected, must always be clear and visible. Also, use a “skip to content” link to let keyboard users bypass large navigation sections and get right to the main content.
Write Clean Forms
Forms are one of the most critical parts of any website, especially for small businesses. Always associate a <label> element with its <input> field using the for and id attributes. This is vital for screen reader users to understand what information to enter.
When errors happen, provide clear, inline feedback that is announced to the user so they know exactly what needs fixing.
Don’t Skip Heading Levels
Use your heading tags (<h1> through <h6>) to create a logical, outline-style structure for your page. Think of it as creating a table of contents. Never skip a level (e.g., jumping from an <h2> straight to an <h4>) just for styling purposes. If you need to change how a heading looks, use CSS to adjust the font size or weight.
Tips for Website Owners
If you own a website, you’re in the driver’s seat of your digital shopfront. Making sure that shop is open and welcoming to everyone isn’t just a good idea—it’s great for business. You don’t have to be a tech wizard to make a huge impact on your site’s accessibility.
Here are a few straightforward tips that can make a world of difference for your visitors.
Master Your Alt Text
Every important image on your site needs descriptive alternative text, or “alt text.” This is what screen readers announce to users who can’t see the images.
If an image provides information, like a chart, describe the information it conveys, not just what it looks like. For example, use “Chart showing a 20% increase in Q3 sales” instead of “a bar chart.” If an image is just for decoration, leave the alt text empty (alt=””) so screen readers can skip it.
Check Your Color Contrast
Is your text easy to read against its background? For people with low vision or color blindness, poor contrast can make your content completely unreadable.
You can use free online tools to check your color combinations against accessibility standards (WCAG 2.1). It’s a quick check that ensures your message comes through clearly for everyone.
Make Your Links Descriptive
Links are meant to be clicked, but the text you use matters. Avoid generic phrases like “Click Here” or “Read More.”
Instead, make the link text clearly describe where the user is going. Something like “Download our Small Business Marketing Guide” gives users with screen readers clear context, allowing them to navigate your site much more effectively.
Provide Alternatives for Media
If you use video to showcase your products or share testimonials, you’re leaving people out if you don’t provide alternatives. Always include closed captions with your videos.
Better yet, provide a full transcript on the page below the video player. This helps people with hearing impairments, and it also makes your content scannable for all users.
Tips for Everyone on Social Media
Accessibility isn’t just for websites; it’s for everywhere we communicate online. As social media users, we all have the power to make our little corner of the internet more welcoming and inclusive.
Making your posts accessible is easier than you think. It just takes a few small habits to make a big difference.
Use CamelCase for Hashtags
When you create a hashtag with multiple words, capitalize the first letter of each word. For example, use #EmpowerSmallBusiness instead of #empowersmallbusiness. This is called CamelCase, and it allows screen readers to pronounce each word correctly instead of mashing them all together.
Use the Built-in Alt Text Features
All the major social platforms — Twitter, LinkedIn, Facebook, and Instagram — have built-in features to add alt text to your images. Before you hit “post,” take a moment to add a simple description of the image. This ensures that people who can’t see your image still get the full context of your post.
Caption Your Videos and Stories
If you’re uploading a video or an Instagram Story, always add captions. Most platforms have an auto-captioning tool that makes this incredibly easy. Captions are essential for users with hearing impairments, but they also help everyone who might be watching your video with the sound off.
Be Mindful with Emojis
Emojis are fun, but a long string of them can be noisy and confusing for someone using a screen reader. Use them sparingly for flavor, and try to place them at the end of your sentences so they don’t interrupt the flow of your message.
Don’t Put Key Info in Images
Try to avoid creating graphics where the main message is text embedded in the image. Screen readers can’t read text that’s part of an image file. If you do post an image with text, make sure you write out the full text in the post’s caption or in the image’s alt text so no one misses the information.
