Accessible Tech: 5 Errors Developers Make in 2026

Listen to this article · 11 min listen

Key Takeaways

  • Prioritize semantic HTML over ARIA for fundamental accessibility, as it provides a more robust and inherently accessible foundation for users and assistive technologies.
  • Implement clear, descriptive link text that conveys the link’s purpose and destination, avoiding generic phrases like “click here” to improve navigation for screen reader users.
  • Ensure all non-text content, especially images and videos, includes accurate and concise alternative text (alt text) to provide equivalent information for visually impaired users.
  • Design forms with clear labels, logical tab order, and comprehensive error handling, making them intuitive and usable for everyone, including those relying on assistive devices.
  • Conduct regular accessibility audits using a combination of automated tools and manual testing with real users to identify and rectify issues that automated checks might miss.

Creating truly accessible technology isn’t just about compliance; it’s about building a better experience for everyone. Yet, I constantly see development teams, even well-intentioned ones, making the same fundamental errors that inadvertently exclude significant portions of their user base. We’re not talking about obscure edge cases here, but common, easily avoidable missteps that can derail an otherwise stellar product.

Semantic HTML: Your Accessibility Bedrock

Let’s be blunt: if you’re not starting with semantic HTML, you’re building on quicksand. I’ve been in this industry for over fifteen years, and the most persistent mistake I encounter is the misuse, or outright neglect, of HTML’s inherent structure. Developers will often reach for ARIA attributes as a first resort, thinking they’re “adding accessibility,” when in reality, they’re often patching over a foundational flaw that could have been avoided entirely. ARIA is powerful, yes, but it’s meant to supplement, not replace, good semantic markup. It’s the equivalent of putting a fancy new coat of paint on a crumbling wall instead of rebuilding the wall itself.

Think about it: a <button> element inherently tells assistive technologies it’s an interactive control. It’s focusable, it responds to keyboard events, and screen readers announce it as a button. If you instead use a <div> and add role="button" and tabindex="0", you’re doing extra work to replicate functionality that HTML provides out of the box. And you’ll probably miss something, like handling the Space key for activation, which native buttons do automatically. A report from the WebAIM Million project consistently shows that ARIA is often misused, leading to more accessibility errors than if it hadn’t been used at all. That’s a stark warning right there.

My advice? Always ask yourself: “Is there a native HTML element for this?” If the answer is yes, use it. Headings (<h1> to <h6>) establish document structure. Lists (<ul>, <ol>, <dl>) convey relationships between items. Navigational landmarks (<nav>, <main>, <aside>, <footer>) help users of assistive technologies quickly orient themselves and jump to relevant sections. Without these, a screen reader user is confronted with a flat, undifferentiated wall of text, making navigation a nightmare. We had a client last year, a financial services firm, who insisted on using <div> elements for everything, styling them to look like buttons and headings. It took us weeks of refactoring to introduce proper semantics, but the improvement in their aXe Core audit scores was dramatic, dropping their critical errors by over 70%. It wasn’t just about the score; it was about making their complex application usable for everyone.

Descriptive Link Text: Beyond “Click Here”

This seems so simple, yet it’s one of the most pervasive accessibility blunders: using vague or generic link text. I’m talking about phrases like “Click here,” “Learn more,” or “Read article.” For sighted users, the surrounding context might provide enough information. For someone using a screen reader, however, who might navigate a page by jumping from link to link, these phrases are utterly meaningless out of context. Imagine hearing “click here, click here, click here” repeatedly. Frustrating, right?

Descriptive link text is non-negotiable. Every link should clearly indicate its purpose and destination. Instead of “Click here to download the report,” write “Download the Q3 2026 Financial Report (PDF).” Instead of “Learn more,” use “Read our privacy policy.” This allows users to understand what they’re clicking on without needing to read the entire paragraph around the link. It significantly improves navigation and comprehension, especially for those with cognitive disabilities or who rely on assistive technologies. The Web Content Accessibility Guidelines (WCAG) 2.2 are very clear on this, emphasizing the importance of link purpose being discernible from the link text alone or from its programmatically determined link context.

I once audited a municipal website that had dozens of links labeled “Details.” When I ran a screen reader, it was impossible to tell what any of those “Details” referred to without hearing the entire preceding sentence. This created a massive cognitive load and made it nearly impossible to find specific information. We revamped their entire linking strategy, ensuring each link was self-explanatory. The feedback from their accessibility user group was overwhelmingly positive; they reported a drastic reduction in time spent navigating the site.

Missing or Poor Alternative Text for Images

Another fundamental mistake that continues to plague websites is the absence or inadequacy of alternative text (alt text) for images. Visual content is a cornerstone of modern web design, but if that content isn’t described for users who can’t see it, you’re effectively creating invisible barriers. This isn’t just about decorative images; it’s about every image that conveys information.

Alt text should be concise but descriptive. It needs to convey the essential information or function of the image. For instance, a picture of a company’s CEO should have alt text like “CEO Jane Doe speaking at the annual shareholder meeting,” not just “CEO” or “Image 1.” If an image is purely decorative and conveys no information (e.g., a background swirl), its alt text should be empty (alt="") so screen readers skip it. But developers often leave out the alt attribute entirely, or they fill it with keyword stuffing, which is equally unhelpful and frustrating for screen reader users.

We encountered a particularly egregious example with an e-commerce client who had product images with alt text like “product image” or, worse, their internal SKU numbers. How is someone supposed to decide if they want to buy “SKU-482937” if they can’t see the product and the alt text offers no description? We implemented a system where their content team was trained to write descriptive alt text for every product image, including details like color, material, and key features. This not only boosted accessibility but also, surprisingly, improved their search engine visibility because the alt text provided more relevant keywords.

Inaccessible Forms: The Ultimate Barrier

Forms are often the gateway to interaction on a website, whether it’s signing up for a newsletter, making a purchase, or submitting a support request. Yet, they are frequently riddled with accessibility issues that make them utterly unusable for many. The common mistakes here are legion: missing labels, incorrect tab order, poor error handling, and reliance on visual cues alone.

First, every form field needs a clearly associated label. Using the <label for="input-id"> structure is paramount. Placeholder text inside an input field is NOT a substitute for a label; it disappears when the user starts typing, and screen readers don’t consistently announce it as a label. This is an accessibility hill I will die on. If you’re building a form without explicit <label> elements, you’re actively creating an inaccessible experience. How is a screen reader user supposed to know what “Enter text here” refers to after they start typing?

Second, logical tab order is critical. Users who navigate with a keyboard (which includes screen reader users, those with motor impairments, and power users) expect to move through form fields in a sensible sequence. If your tab order jumps erratically around the page, it’s incredibly disorienting. This often happens when developers use CSS for visual ordering without considering the underlying DOM structure. Always test your forms by tabbing through them yourself. If it feels broken to you, it absolutely is for someone relying solely on a keyboard.

Finally, error handling must be accessible. Merely turning a field red and displaying a tiny error message that disappears too quickly is insufficient. Error messages need to be clearly associated with the problematic field, announced by screen readers, and provide specific, actionable guidance. For example, instead of just “Invalid input,” say “Please enter a valid email address, e.g., user@example.com.” A study by the Accessibility.Works Foundation highlighted that inaccessible forms are one of the leading causes of user abandonment for individuals with disabilities.

Neglecting Keyboard Navigation and Focus Indicators

This is a corollary to the form issue but extends to the entire user interface. Many users cannot or do not use a mouse. They rely entirely on a keyboard to navigate. If your website or application isn’t fully operable via keyboard, it’s not accessible. Period.

Every interactive element (links, buttons, form fields, custom widgets) must be keyboard focusable. Users should be able to reach every part of your interface using the Tab key, Shift+Tab, and arrow keys. Furthermore, there must be a clear and visible focus indicator. That dotted outline or subtle glow that appears when you tab to an element? Don’t remove it! Don’t style it away! I’ve seen countless designs where the focus indicator is either completely removed with outline: none; (a cardinal sin!) or made so subtle it’s indistinguishable. This leaves keyboard users completely lost; they have no idea where they are on the page. While a custom focus indicator can be styled to match branding, it must still be prominent and clear. My strong opinion? The default browser focus indicator is often ugly, but it’s effective. If you’re going to change it, make sure your custom version is even more visible.

I vividly recall a project for a medical device company where their online portal, critical for managing patient data, was utterly unusable via keyboard. They had custom buttons and dropdowns that simply didn’t receive focus, or if they did, there was no visual cue. Their engineers, all mouse-users, hadn’t even considered it. We spent weeks implementing proper tabindex management, adding ARIA roles where necessary for custom components, and designing high-contrast focus styles. The result was a system that not only passed accessibility audits with flying colors but also significantly improved the workflow for their own internal staff who preferred keyboard navigation.

Conclusion

Avoiding common accessibility mistakes in technology isn’t just about compliance; it’s about building inclusive products that serve everyone. By focusing on semantic HTML, descriptive link text, proper alt text, accessible forms, and robust keyboard navigation, you lay a solid foundation for a truly accessible experience.

What is the most common accessibility mistake developers make?

The most common mistake is neglecting semantic HTML, often using generic <div> elements where specific HTML elements like <button>, <h1>, or <nav> would provide inherent accessibility and structure.

Why is “Click here” bad link text?

“Click here” is bad because it lacks context for screen reader users who may navigate by jumping between links. Descriptive link text, like “Download the Q3 2026 Financial Report,” clearly indicates the link’s purpose and destination.

Do decorative images need alt text?

Decorative images that convey no meaningful information should have an empty alt="" attribute. This tells screen readers to skip them, preventing unnecessary clutter for users.

How can I ensure my forms are accessible?

Ensure every form field has an associated <label> element, maintain a logical tab order for keyboard navigation, and provide clear, programmatically associated, and actionable error messages.

What is a focus indicator and why is it important?

A focus indicator is a visual cue (like an outline or highlight) that shows which element on a web page currently has keyboard focus. It’s crucial for keyboard users to know where they are on the page and which element they are interacting with.

Colleen Gould

Principal Software Architect M.S. Computer Science, Stanford University

Colleen Gould is a Principal Software Architect at Veridian Dynamics, boasting over 15 years of experience in high-performance computing and distributed systems. His expertise lies in optimizing microservices architectures for scalability and fault tolerance. Previously, he led the core infrastructure team at QuantumForge Technologies, where he spearheaded the development of their proprietary real-time data processing engine. Colleen is the author of 'Scalable Microservices: A Developer's Guide to Resilience', a widely referenced publication in the field