Auditing and fixing accessibility failures across Telstra.com
Project overview
I worked on Telstra's design system, auditing components to identify accessibility barriers and rebuilding them to meet AA WCAG standards. The goal was ensuring Australia's largest telecommunications website was accessible to all users while creating consistency across the platform.
Role
UX/UI designer responsible for auditing, redesigning, and documenting design system components. I maintained the component library, created usage guidelines, and built the team's accessibility knowledge.
Brief
Fix accessibility barriers in Telstra.com's component library while improving usability for both customers and the design team. Every component needed to meet WCAG 2.1 AA standards and work seamlessly for designers.
Project summary
I started by auditing the entire component library to identify which accessibility failures were affecting the most users. Every component had issues - broken heading hierarchies, poor color contrast, missing keyboard navigation. I prioritised fixes based on usage across the site and worked with designers to understand their workflow needs.
After rebuilding components to meet WCAG standards and testing them with the team, I documented clear usage rules that would prevent future accessibility problems.
What I found when I audited the existing system
I conducted a heuristic analysis to identify where the biggest problems were. What I found went way beyond visual inconsistency - the components were creating real accessibility barriers.
The biggest issues:
Broken heading hierarchy
Multiple large headings like "The world's best entertainment" and "Get it all in one place" appeared at the same visual level, but used inconsistent H1, H2, H3 tags. Screen readers rely on proper heading structure to navigate content, so users would hear "Heading level 1, Heading level 3, Heading level 1" with no logical flow.
No clear visual hierarchy
Everything competed for attention equally. Users with cognitive disabilities need clear priority signals to understand what's most important, but this layout provided none.
Inconsistent component spacing
Components scattered randomly across the page made it impossible for screen readers to group related information logically
I started with Page Header, Promo Box, and Content Box components since they appeared on 80% of pages. Fixing these would eliminate accessibility barriers for the most users.
Building rules that prevent accessibility failures
I didn't just fix existing components - I created systematic rules that would prevent accessibility problems from happening again. Looking at the component variations in the screenshots, you can see how I built accessibility standards directly into the design system.
Maximum one high-emphasis CTA per component
Multiple prominent buttons confuse screen readers and users with cognitive disabilities about what action to take
Proper heading hierarchy enforcement
Components automatically use correct H1, H2, H3 structure so screen readers can navigate logically
Color contrast validation
Every component variation meets WCAG 4.5:1 contrast requirements
Keyboard navigation patterns
Clear focus states and logical tab order built into every interactive element
I documented these rules in the design system Sketch file with clear explanations of why each rule exists. The Digital Playbook made these accessible to the entire organisation, so anyone could understand the accessibility rationale behind design decisions - this was a great way to educate the whole company about the importance of accessibility, not just the design team!
The digital playbook available to everyone at Telstra, regardless of your role.
Making accessibility automatic for designers
The design system had to work for designers with varying accessibility knowledge. I couldn't rely on everyone remembering to check contrast ratios or heading structures - I needed to build accessibility into the components themselves.
What I created to embed accessibility:
Smart Layout with accessibility built-in
Components automatically applied correct spacing, heading hierarchy, and focus states when designers used them in their working files.
Foolproof component variations
Every variation already met WCAG standards, so designers couldn't accidentally create inaccessible content.
Clear onboarding documentation
Welcome boards explaining not just how to use components, but why certain accessibility rules existed.
Override restrictions
The system prevented designers from making changes that would break accessibility, like removing focus states or using insufficient contrast.
The key was making accessible design easier than inaccessible design. When designers dragged in a component, removed unnecessary elements, and added their content, they automatically got pixel-perfect components that met accessibility standards. No extra effort required.
Impact
The systematic approach worked. I achieved WCAG 2.1 AA compliance across all redesigned components and created a design system that prevents accessibility failures by default.
Designer adoption and efficiency
The team feedback shows the real impact - designers went from struggling with inconsistent components to feeling "organised for the first time ever." Comments like "things feel consistent which is amazing" and "so comprehensive" proved the system was working. Designers could focus on solving user problems instead of fighting broken tools.
Organisational recognition
The accessible design system enabled our team to redesign Telstra.com's homepage using components that met accessibility standards automatically. This work earned our team a company design award!
Scalable accessibility
Most importantly, I built a system where accessibility became automatic. New designers couldn't accidentally create inaccessible content because the tools guided them toward inclusive design.
