Accessibility enhancements across government websites
Improving the readability of navigational components across multiple government design systems
Brief
Why is it best practice to avoid underlining text, yet in-text links are almost always underlined?
This intriguing contradiction sparked my curiosity, leading me on a journey to explore and challenge the accessibility impact of underlined link text. My investigation quickly expanded from in-text links to encompass over 14 types of navigational components across government websites—buttons, cards, navigation menus, accordions, lists of links, breadcrumbs, and more.
The result? A versatile and accessible set of foundational design styles and guidelines that, when applied consistently across all navigational elements, create a cohesive and optimally accessible experience. You can see this live across Queensland Government websites.
My role on the project
research, design, co-ordinating development release, comms.
Project achievements
Enhanced accessibility beyond WCAG standards
While adhering to WCAG standards guarantees accessibility in terms of perceivability, it does not specify guidance around ensuring that letters and words can be correctly identified and comprehended. These design patterns surpass WCAG guidelines, providing significant improvements in the readability of all navigational components.
Modernised UI
The user interface now features a cleaner, modern aesthetic that prioritises accessibility and enhances the user experience. Guidelines on line weights and colour improve readability, reduce visual fatigue, and create a sleek interface through progressive enhancement.
Established consistency
Foundational design styles enable a consistent design pattern to be established and applied across over 14 different types of navigational components. These patterns span multiple government design systems and cover all states (hover, focus, active) and variants, ensuring a cohesive and unified user experience.
Before and after
Drag the slider left and right to see how components looked before and after.
The design process
Guided by the Triple Diamond model and utilising design thinking strategies, I was able to identify, understand, and empathise with the key audience. This enabled me to unearth the root causes of the problem and implement solutions aimed at addressing the problem at its core, rather than resorting to quick fixes.
Understanding the problem
While the benefits of underlining text links for accessibility and familiarity were evident, my focus was on uncovering the challenges and drawbacks associated with this practice. Through research, I identified two key pain points:
Content readability challenges
Underlined links overlap with letters like j, p, g, q, and y. This hinders correct letter and word identification for some readers and adversely affects content comprehension.
WCAG limitations
The Web Content Accessibility Guidelines (WCAG) currently offers limited guidance for addressing cognitive disabilities and reading difficulties, particularly in terms of letter/ word identification and comprehension.
Defining the audience
Through comprehensive research exploring how people read, barriers to reading, and existing accessibility guidance, I was able to define and categorise an audience affected by this problem into three key groups:
Citizens with cognitive barriers to their reading ability
Cognitive barriers include low literacy, dyslexia, difficulties in comprehending overly technical content, reading in unfamiliar languages, and struggles with typography that is hard to read.
Citizens experiencing physical barriers to their reading ability
Physical barriers can be situational such as viewing content on low-contrast screens or in bright sunlight, or permanent such as vision impairments, and motor control limitations.
Citizens with impaired vision
This broad category encompasses individuals with vision impairments and colour blindness.
Auditing the website and design system
I explored where and how this issue emerged across websites using the design system. My focus was on how navigational components, especially text based links, were displayed. This examination unveiled the following key findings:
Significant use of in-text links
Due to the nature of government websites, cross linking content is common practice.
Aesthetic distractions
There are so many links the underlines overpower content.
Inconsistent UI patterns
Inconsistency in affordance and design across components, particularly in focus state. Focus state also didn’t meet contrast requirements.
Defining the root cause of the problems
Rather than jumping straight into solutions, I took the time to understand the root cause of the problems. I merged the findings from my research and audit to understand why and how these issues were happening.
While some issues, like the extensive use of in-text links and overly long links required recommendations to be made to content writers and publishers (which, in government there are a lot of), I focused on what I could directly change and influence in my role as a designer.
To uncover the root causes of the problems I used the “5 whys” strategy, and identified the following core issues:
- The standard design of HTML links overlaps with letter descenders.
- The standard underline beneath in-text links is very prominent, and while this is beneficial, in can also be distracting when overused.
- List items are often used for links, and currently lack any variation in line spacing which makes it challenging to distinguish between list items and new lines.
- Lack of existing standards for navigational component design in the design system contributes to inconsistency.
- Limited guidance provided by the WCAG around character/ word identification and comprehension.
Exploring solutions and testing ideas
Collaborating closely with developers, we identified and defined the technical constraints and optimal technical solutions.
I also conducted desktop research to analyse how similar challenges were tackled on other websites, and then collaborated with fellow designers to rapidly conceptualise and test multiple design options. These options were presented to a diverse group of colleagues across government, including designers, developers, content writers, publishers, and management. Their valuable feedback and input played a crucial role in refining the design aspects through a collaborative decision-making processes.
Creating atomic design patterns and design guidelines
After validating the most favoured designs for accessibility, I utilised them as the foundation for creating atomic design patterns and comprehensive design guidelines and principles.
It was also decided that these patterns would be applied across all navigational components, not just text based ones.
Updating all navigational components with the new atomic design patterns
Starting with the Figma designs, the new atomic design patterns and guidelines were then systematically applied to all 14 navigational components and their variants in the design system.
Before
After
Implementing change
To enact change across an extensive state government ecosystem, I coordinated and strategised the rollout of these updates within the design system that I was working on. Moreover, I showcased this work and its designs across various forums, influencing other government departments to embrace these new design standards for their websites. Additionally, I offered hands-on support to several departments throughout their implementation process.
Beyond this project
I have published a complementary article to this case study, detailing the research and designs created for this project. It has resonated globally, with readers widely sharing it among their peers, transcending language barriers, including Japanese and French.
The article is titled: Designing dyslexia-friendly navigational components: accessibility insights and atomic design patterns and is available to read on medium.com.
