Accessibility isn’t a separate track of design; it defines its quality. That’s why accessibility is integrated into the Atlassian Design System at every level: to ensure our apps work for everyone by default.
With accessibility treated as part of our design craft rather than a compliance checkbox, foundations, tokens, and components meet accessibility standards from the start, reducing rework, enhancing usability, and raising quality across Atlassian apps.
Building accessibility as part of our design system DNA
Two years ago, a dedicated Accessibility team was established within the Atlassian Design System to make inclusion a structural part of how design and engineering operate. The focus: integrate accessibility into the foundations, workflows, and tooling that shape how work is delivered.
Three guiding principles defined our approach:
- Accessibility by default – Components and foundations must meet accessibility-defined standards from the start.
- Tooling and automation – Systems should identify accessibility issues as they happen to reduce remediation time.
- Maker empowerment – Designers, engineers, and content designers have the guidance and checks to build inclusive apps with confidence.
Embedding these principles across workflows has shifted accessibility from reactive fixes to a proactive measure of design quality.
Turning principles into practice
Scaling accessibility across a design system requires more than intent. It relies on clear standards, thoughtful design trade-offs, and tools that make inclusive decisions part of everyday practice.
Along with these, our guiding principles establish the strategic direction for our accessibility work and shape the team’s areas of focus.
Auditing and uplifting our components
We carried out a system-wide audit to establish a baseline for accessibility across components.
Each component was assessed for visual clarity, interaction design, and assistive technology support. The audit revealed challenges in contrast, focus management, and validation consistency.
- Cross-craft evaluation: Assessing each component’s structure, hierarchy, and semantics ensured consistency from design to implementation.
- Prioritization for scale: Components most frequently used across Atlassian apps were addressed first, ensuring improvements had a system-wide impact.
- Design-led remediation: Audit findings revealed design opportunities, such as increasing the contrast of input fields to improve visibility and accessibility.
Strengthening design foundations
Accessibility succeeds or fails at the foundation level. When tokens for color, typography, or motion don’t meet standards, every product inherits those weaknesses. To protect against this, foundations were recalibrated to create a more resilient and scalable system.
- Color: Tokens were updated to meet accessibility guidelines for color contrast in both light and dark themes, while maintaining the intended brand color hierarchy.
- Typography: Adjusting size and weight enhanced legibility across densities and user scaling preferences.
- Inheritance through tokens: Improvements applied at the system layer allow for future components to inherit accessibility fixes automatically.
Building tools for makers
Accessibility scales only when it’s embedded in everyday workflows. One example of this is our Figma-based accessibility tooling, which ensures designers can make inclusive decisions without interrupting their workflow.
- A11y Annotations: A custom library in Figma allows makers to consider accessibility early in the design process – not just at handover.
- Contextual guidance: Connecting makers to documentation where they work removes friction during the design process.
- Cross-craft alignment: Shared annotations and specs reduce ambiguity between design and engineering, creating a consistent baseline across crafts.
Culture through education and community
Accessibility has evolved from an individual responsibility to one shared across our design organisation.
- Accessibility Design Specialists: An established community of advocates is responsible for elevating accessibility practices within their local design teams.
- Leadership and growth integration: Accessibility has been embedded into growth profiles, OKRs, and career development, making it a core part of design practice.
- Access to experts: The Atlassian Design System A11y team provides regular office hours, demos, and reviews that normalise accessibility discussions across teams and crafts.
These focus areas evolved side by side – not as a linear process, but as interconnected, cross-functional initiatives. Collectively, they’ve turned accessibility from principles into a scalable system practice.
Redefining how we design components: date time picker
The accessibility audit revealed recurring issues in components used across apps. We identified the date time picker as a priority project and an opportunity to demonstrate how accessibility improvements can enhance usability and design quality at scale.
Example of an input field with insufficient border contrast, making it difficult for people with low vision to identify the interactive area.
Understanding the opportunity
The audit revealed visual and interaction barriers.
- Border colors failed contrast requirements.
- Focus management was inconsistent.
- Keyboard navigation required more than 52 keystrokes to switch years.
- People using assistive technologies faced confusing behaviour as the calendar opened automatically on focus, disrupting input flow.
The deeper issue wasn’t a single defect but a pattern of design bias, as the component had been optimized for sighted people and mouse-based interaction. That bias created friction for people using keyboards and assistive technologies, as well as anyone who prefers to input dates directly.
When a calendar opened automatically on focus, screen readers announced multiple elements simultaneously, leaving people unsure of their location or what was selected.
Designing for inclusion
Reworking the date time picker required balancing accessibility, simplicity, and system consistency. The redesign focused on strengthening the component’s semantic structure and interaction logic.
Key design decisions included:
- Semantic restructure: A new semantic layout with proper labels to ensure predictable navigation for people using assistive technologies.
- Simplified navigation: Reduced keyboard input from 52 to 12 keystrokes, enabling faster selection by date, month, or year.
- Clear input feedback: Introduced consistent validation patterns and descriptive error messaging to support all entry methods.
- Reduced noise: Streamlined live region announcements, prioritizing essential updates only.
- Improved visual clarity: Adjusted border colors and focus rings to achieve at least 3:1 contrast across themes.
These updates transformed the component from a compliance risk into a model for accessible interaction that is faster to use, easier to perceive, and more predictable across contexts.
The improved date time picker gives people full control over when to open the calendar, with clear navigation, descriptive labels, and predictable focus for those using keyboards or screen readers.
System-level impact
The depth of work behind the date time picker is just one example of how we approach every component – measured, collaborative, and built for scale.
Each accessibility improvement strengthens the underlying system, ensuring that when one component improves, so does everything built from it. Accessibility has become a signal of design maturity across Atlassian apps, proving that good design and inclusive design are one and the same.
Raising the accessibility baseline
When accessibility is built into the design system itself, improvement scales naturally. Teams move faster, ship with confidence, and deliver experiences that work for everyone by default.
Accessibility as a foundation shapes how every component behaves and how teams measure quality. Design, content, and engineering all work from the same standards for clarity, control, and inclusion.
These shared foundations have lifted the accessibility baseline across Atlassian apps and made inclusion a core part of how we design and build. The impact is already reaching customers, with over 6,000 accessibility issues resolved between June 2024 and June 2025, thanks to this foundation-driven work.
The momentum behind this work sets the stage for what comes next – more adaptive foundations, more inclusive defaults, and a design system that continues to raise the bar for quality across Atlassian.
No matter where you might be on your accessibility journey, just remember: accessible design isn’t a separate goal – it’s simply good design.
💙 Hendrik Petsch, Simon Mateljan, Gerard Cohen, Pawel Wodkowski, Xiaoming Wu, Milo Fultz, Jacqueline Donaldson, Sudharsanam Narasimhan, Tim Tutak, Nate Scribano, Andrew Bui, Johan Ie, the entire Atlassian Design System team, and our Central Accessibility team for their ongoing partnership.
Tell us what you think – your insights help us continue improving and shaping a more inclusive Atlassian experience.