The Top Accessibility Mistakes Designers Make (And How to Fix Them)

The Top Accessibility Mistakes Designers Make (And How to Fix Them)

Accessibility in design isn’t just a best practice—it’s a necessity. It helps more people view your content and learn about you while also giving some people a chance to access information independently. Even knowing this, somehow, even skilled designers can overlook accessibility considerations. When deadlines are tight and you’re rushing to export that final version, you can end up on a slippery slope of not making your work accessible.

In this blog, we’ll explore the most common accessibility mistakes designers make and how to address them to create inclusive, user-friendly designs.

1. Poor color contrast

The mistake:
Using colors with poor contrast can make text or elements hard to see for everyone. This is especially difficult for viewers with visual impairments such as color blindness or low vision. This mistake often happens when designers prioritize aesthetics over legibility.

How to fix it:
Use color contrast tools to ensure that your designs meet WCAG (Web Content Accessibility Guidelines) standards. Aim for a contrast ratio of at least 4.5:1 for body text and 3:1 for larger text. Test your brand’s common color combinations and list which combinations meet the standards.

2. Missing alt text for images

The mistake:
We all know the saying, a picture is worth a thousand words. Not including alt text for images leaves users reliant on screen readers without often-critical information.

How to fix it:
Always add descriptive alt text that conveys the image’s purpose, and transcribe any text on images, icons, or logos. If the asset is decorative, use a blank alt attribute to prevent screen readers from announcing it unnecessarily.

3. Small or unreadable text sizes

The mistake:
Using text that’s too small can make your content inaccessible to everyone, especially users with low vision or those viewing on small screens.

How to fix it:
Stick to a minimum font size of 12pt for body text. Ensure your designs allow users to zoom in without breaking the layout or making the content harder to navigate.

4. Inconsistent heading structures

The mistake:
Improperly structured headings can make your content difficult to navigate for users relying on screen readers. Headings help structure information hierarchically, guiding users through your content.

How to fix it:
Use proper heading levels (e.g., H1 for main titles, H2 for sections, and H3 for subsections). Avoid skipping levels or using headings for styling purposes only.

5. Relying solely on color to convey information

The mistake:
Designs that use color alone to differentiate elements—like red for errors or green for success—exclude color-blind users.

How to fix it:
Pair color with additional cues such as icons, labels, or patterns. For example, include a warning icon next to error messages or underline links to differentiate them from regular text.

6. Clickable elements that are too small

The mistake:
Tiny buttons, links, or other interactive elements can frustrate users, especially those with mobility impairments or those navigating via touchscreen.

How to fix it:
Ensure clickable areas are at least 44px by 44px, as recommended by WCAG. Additionally, provide sufficient spacing around interactive elements to avoid accidental clicks.

7. Using non-descriptive link text

The mistake:
Generic link text like “Click here” or “Read more” provides no context about the link’s destination, making it unhelpful for screen readers or users scanning the page.

How to fix it:
Write descriptive link text that clearly indicates where the link will take the user. For example, use “Learn more about accessibility guidelines” instead of “Click here.”

8. Ignoring accessibility in PDFs

The mistake:
While web accessibility gets a lot of attention, PDF accessibility is often overlooked. PDFs with untagged content, improper reading order, or inaccessible elements can exclude many users.

How to fix it:
Ensure your PDFs are properly tagged and structured. Tools like Doclint can help you identify accessibility issues in your PDFs, including improper tagging and reading order problems, so you can correct them before publishing.

Final thoughts

Accessibility is more than a technical requirement—it’s a commitment to inclusivity and better design. By addressing these common mistakes, you can ensure your work is accessible to a broader audience, delivering better user experiences while growing your reach.

Inclusive design not only benefits users but also enhances your reputation as a thoughtful, detail-oriented designer. At Doclint, we’re here to help you make accessibility seamless, so your designs are polished, consistent, and welcoming to all.