Let’s be honest: Most designers don’t wait to be told to align their grids or balance whitespace.
But when it comes to accessibility, we still act like we need permission, budget, or buy-in before making inclusive choices.
The truth is, accessibility isn’t a “nice to have.” It’s just good design. And often, it doesn’t require a new process—just a more thoughtful one.
Here are 10 habits that will quietly but powerfully level up your work and make it better for everyone:
1. Push Contrast Beyond Minimums
🌓 Don’t stop at meeting the 4.5:1 ratio. Make sure placeholder text, disabled buttons, and subtle borders are easy to see for low-vision users. Use contrast tools not just on body copy, but across the full UI.
Try This: Run checks on hover states, tooltips, secondary elements—and document what needs work in your design system.
2. Match Visual Hierarchy with Semantic Structure
🔡 If your type system has H1s, H2s, and H3s, make sure that translates into actual heading tags in code.
Why? Screen readers rely on these for navigation. If it looks like a heading, make sure it acts like one.
Tip: Mark heading levels in your Figma components to help devs implement correctly.
3. Design a Logical Focus Order
🔄 Keyboard users need to tab through your design in a way that actually makes sense. Menus, modals, and interactive content should follow the flow—not jump around the page.
Exercise: Tab through your own designs in prototype mode. Confused? So are your users.
4. Make Focus States Obvious (and Beautiful)
🔲 Removing default outlines is fine—if you replace them with something just as visible.
Design buttons, links, and form fields with strong, consistent focus states. Include them in your design system.
Rule of thumb: If you can’t tell what element is focused at a glance, it’s not accessible.
5. Explain Why That Image Exists
🖼️ Every image you add has a reason: decoration, data, or communication. Make sure you note that.
What to do: Leave image notes in your handoff: “Decorative only,” or “Illustrates concept above,” so your devs know how to write the alt text (or skip it correctly).
6. Make Targets Thumb-Friendly
👆 Tiny tap areas = frustration.
Give your buttons, icons, and links breathing room. WCAG recommends ~44x44px targets. It helps people with mobility challenges, and honestly? It just makes everything easier to use.
Design Tip: Build generous padding into components—not just the visual box.
7. Don’t Make People Fight the Paragraphs
📖 Long lines and tight spacing are brutal for everyone, especially users with dyslexia or ADHD.
Guideline: 45–75 characters per line. Line-height? Aim for 1.5× your font size.
Apply this across breakpoints and use it as a baseline for readable design.
8. Make Error States Clear and Kind
🚫 If an input fails, don’t just paint it red. Tell the user what happened and how to fix it.
Best Practice:
- Red border and icon
- Descriptive error message right next to the field
- Link the error to the field programmatically (for screen readers)
Also—make sure the error text has high contrast!
9. Design Data Visuals for More Than Color
📊 Charts can’t rely on color alone. People with color blindness—or people printing in grayscale—won’t get the message.
Try This: Use patterns, labels, dashed vs. solid lines, or direct annotations to back up color cues.
10. Don’t Make Users Relearn Everything
🔁 Inconsistent interaction patterns wear people out.
If a button has a hover state in one spot, it should everywhere. If a modal behaves one way, repeat that behavior across flows.
Suggestion: Add a “behavior” section to your design system. Document how common components act—not just how they look.
Final Thought
You don’t need to wait for a company-wide accessibility mandate to start designing more inclusively. Start with your habits. Start with curiosity. And start now.
Because when we design with more people in mind, everyone benefits—including our clients, our teams, and our own creative process.
🖐️ Let’s build things that work for all of us.