Make your design system accessible

Inclusion starts with awareness—recognizing that not everyone experiences or uses your product the same way. It extends to how your app represents people and ensures everyone can access and interact with it meaningfully. Accessibility and inclusion have always been essential—but with the European Accessibility Act now in effect, they are more critical than ever. Since June 28, 2025, all websites and mobile apps must legally meet accessibility standards, specifically WCAG 2.1 guidelines.

‍

What you have to consider as a designer

• Check color contrast with tools like Contrast or Stark
• Don't rely on color alone: use icons, patterns, text labels, or shapes to convey meaning, not just color (e.g., error states shouldn’t be “red only”)
• Provide alt text for images.
• Make sure your designs are responsive
• Design touch target with at least 44×44px, especially for mobile/touch devices. You can go for smaller sizes but try to keep this reference in mind, especially for touch devices.
• Ensure content is readable and define what is the minimal size for your typeface

‍

What you haver to consider as a developer

• Use semantic elements for structure: <header>, <nav>, <main>, <footer>, <section>, <article>, <h1>–<h6>, <ul>, <ol>, <li>.
• Use native HTML controls (<button>, <input>, <select>) over custom ones whenever possible—they come with built-in accessibility.
• Use ARIA roles and attributes only when HTML alone can’t provide the needed accessibility.
• Ensure all interactive elements are reachable via Tab/Shift+Tab and operable with Enter/Space.
• Provide visible focus indicators.
• Use alt attributes for images (empty alt="" for purely decorative images).

‍

Some more resources

Here are two excellent resources to dive deeper:

• 📘 Microsoft Inclusive Design
• ‍📘 Figma’s Guide to Accessible & Inclusive Design
  ‍

‍And some practical checklists:

• ✅ Not-Checklist by Intopia
• ‍✅ Accessibility Checklist by The A11Y Project

‍

Final thought

Accessibility isn’t a one-time task—it’s an ongoing commitment to creating products that welcome everyone. By building inclusivity into your process from the start, you’re not just meeting legal requirements—you’re designing with empathy, widening your audience, and shaping a better digital world for all.