Hyperlinks accessibility review

Hyperlinks are often something which don’t get much of a second thought. Having been common practice since the early 1990s, and around since the 1960s, they have become a familiar and engrained part of our everyday life. Untouched since the early days of the internet, the humble design of the hyperlink has also never needed to cause any alarm bells, after all they meet WCAG accessibility standards.

As comprehensive and thorough as the WCAG accessibility standards are, it is still a living document, growing and evolving with time. Meaning that not all accessibility needs, and requirements are currently documented. One particular gap in the guidelines is around addressing the accessibility needs for people with cognitive learning disabilities including dyslexia. This gap has formed the premise of the work undertaken for this project, which focuses on the needs for people with cognitive learning disabilities and explores whether the current WCAG requirements for hyperlink design adequately meet the needs for these people.

The creative process

Research

To ensure that this design has a rock-solid foundation, the design process followed a problem-oriented rather than a solution-oriented approach. I approached this design with the desire to have a solid and broad understanding of the requirements and challenges facing users of Queensland Government websites with varying levels of cognitive, literacy and visual ability. The end goal was to create an inclusive solution that improves the user experience for all users.

Researching the needs and challenges facing users with cognitive and visual difficulties followed Human Centred Design and Design Thinking principles. With this approach I was able to better understand the challenges experienced by different user groups and could also uncover the root causes to these challenges. By understanding the root causes of each challenge, I was able to confidently tailor a solution that addresses each challenge. These designs also meet WCAG 2.1 AA compliance.

Validating the need to address this problem

The first step was to validate if there even was a gap in the WCAG requirements for readability in hyperlinks. Here I explored and researched:

What are the possible accessibility concerns with hyperlinks on qld.gov.au?

Researching this topic I learnt that permanent underlining of text can cause problems for people with reading difficulties (e.g. dyslexia). This is documented on the GOV.UK accessibility blog, QLD Government Consistent User Experience (CUE) guidelines and the WC3 dyslexia gap analysis.

These rules presented a stark juxtaposition with common practice for designing in-text hyperlinks, which narrowed down the focus of this project to the application of the underline in hyperlinks.

Further research was conducted to understand how the underline affects readability, as well as defining and validating key user groups.

What are the pro’s and cons of the underlined hyperlink

Further to the above underlining can hinder the user experience in the following ways:

• Readability
  Underlining has a detrimental impact on text readability. Skilled readers are able to effectively and efficiently skim and scan through text. In contrast, less skilled readers are less able to skim text, and often misrecognise words. They then try to make sense of sentences with words that don’t really fit together. Based on the study, avoid underlines when the main goal of the content is comprehension.
• Aesthetics
  Underlines add visual noise to text and the overall design. A lot of underlining spread throughout a block of text look busy and distracting.

On the flipside, underlined links have the following major benefits

• Familiarity
  The underline is one of the most widely understood conventions on the web. Underlines provide a strongly perceived affordance of clickability, meaning the vast majority of users understand that underlined text is a link.
• Scannability
  Underlined text is a great visual cue that guarantees link visibility when scanning text. As we scan pages vertically, any horizontal line will cut right through our line of sight. Underlining guides users to important information as they skim.
• Accessibility
  Colour shouldn’t be the only visual indicator of a potential action. As specified in WCAG 1.4.1 Use of Color Failure of Success Criterion F73 and Technique G183 the contrast ratio between text colour and link colour must be 3:1. Take into consideration the needs of people who are colourblind or have low vision. Therefore, if you want your website to be accessible, you’ll have to add another visual cue to links, such as underlines.

Source: Adobe XD ideas

The underlined hyperlink on qld.gov.au

As you can see in the samples below that reading comprehension is essential to navigating the qld.gov.au website, validating the need to explore this problem further.

The science of reading

Understanding how using underlines affects readability also involved understanding and researching the science of how people read and the many interconnected and interdependent components and skills that a person draws upon and applies simultaneously when reading. For more information refer to Scarborough’s Reading Rope.

Barriers and factors that can affect reading

The process of reading can easily be disrupted from the physical level to the cognitive level.

Physical barriers:

• Low contrast screens/ viewing in direct sunlight
• Vision (low vision, blind, colour-blind, tunnel vision)
• Body motor control

Cognitive barriers

• Content is written at a reading level which is too complex for the reader.
• Making sense of complex sentences (ie using language that is too technical for the reader.
• Reading in an unfamiliar or non-native language.
• Typography that is difficult to read - see guide to selecting an accessible typeface blog post.
• Stroke.
• Cognitive learning disabilities (dyslexia, ADHD etc).
• Low literacy.

Statistics

Dyslexia

The full number of people with dyslexia is unknown. The Australian Dyslexia Association predict that 1 in every 5 people have dyslexia.

Source: Australian Dyslexia Association

Low literacy
44% of Australian adults don’t have the literacy skills needed for everyday life.

Source: Adult Learning Australia and Australian Bureau of Statistics

How does underlined text negatively affect reading

Underlined text can cause problems in reading in the following ways:

• the underline changes the shape of word
• it is difficult to identify descenders in text (ie j, p and g in jumping).



Defining what success would look like

In order to further break down the problem and to uncover the root causes of these problems, I applied the “5 whys” design thinking strategy to the known problems created by underlined hyperlinks. The root causes defined the criteria for success for this project, these were then rated by importance and further defined by why these problems are happing from technical and design perspectives and how to best address them. More information on the 5 why’s strategy.

Root causes



Matrix



The new designs

Approaching these problems required thinking about what can be addressed and fixed with through design only and if there would be other steps which would also be required to address the problem (ie content guidelines).

New hyperlink guidelines for qld.gov.au

A recognisable visual indicator such an underline is required for hyperlinks UNLESS there are other patterns or behaviours on the component which make it clear to a user that the component is a hyperlink.

Rules:

• As there isn’t enough contrast between link and text colours (3:1 minimum required) text colour must not be the only indication of a link, there must be other supporting and familiar UI patterns as per WGAC 1.4.1: Use of Color (A).
• At least 1 supporting UI pattern of the hyperlink (ie underline, arrow etc) must have sufficient contrast as per 1.4.11: Non-text Contrast (AA) (4.5:1 minimum).
• The underline will be a shade of the link colour (not of the text colour). This is to avoid any confusion with a standard underline.
• The underline will be a solid line to prevent any confusion with a tool-tip which uses dotted underline style.

Examples

• Buttons with a background colour (primary buttons) do not require underline required on default.
• Buttons without a background colour (tertiary buttons) require underline on default as this component looks to similar to standard text.
• In-text links require underlines on default.
• Links in multi action cards require underline on default, as it may not be clear to users what text is a link and what isn’t.

Anatomy of the new designs

The new hyperlink design moves the underline 5px below text descenders so as not to obstruct any characters of a hyperlinked word. This is achieved by using the underline offset property.

The underline for a hyperlink is also presented in a more “muted” way so that it isn’t as distracting to the rest of the content, whilst still meeting WCAG accessibility requirements. This is achieved in two ways:

• Using a lighter tint of the link text which has a minimum contrast of 4.5:1 as defined in WCAG 1.4.3: Contrast (Minimum) (AA), and WGAC 1.4.1: Use of Colour (A) and WGAC 1.4.11: Non-text Contrast (AA).
• Using a thinner underline 0.5px for the default state of an hyperlink (changes to 2px on hover).

Padding between list items has increased

It is also recommended to follow the content writing styleguides and avoid using too many hyperlinks within body copy.





Movement and behaviour

Before this project there wasn’t a consistent use of hover, active or focus states across the qld.gov.au UI library (SWE). Some items had an underline on hover and some changed colour. With this update, all components with links across SWE will now consistently follow the same default, hover, focus and active patterns.

Default state for links:
If a link is deemed to require an underline as outlined in the rules above, the underline will have a weight of 0.5px and a lighter shade of the link text colour.

Hover state
All links regardless of if they have an underline at default state or not will have an underline on hover. This underline will have a weight of 2px and will be the same shade as the link text colour.





Updating all components to meet updated hyperlink guidelines

All components across the qld.gov.au (SWE) UI library were then updated to reflect the new hyperlink rules and guidelines.







Progressive enhancement

Progressive enhancement in this design applies to the weight of the underline at a hyperlinks default state. Pixels in CSS are an abstract unit of measure and vary depending on the resolution of devices. On high resolution devices, a single CSS pixel may be displayed across two pixels on the device, so a half css pixel will display over one pixel on the device. On lower resolution devices a half pixel will round up to the nearest whole number. On lower resolution devices the underline will display as 1px. Higher resolution devices will display the underline at 0.5px, using a half width allowed us to continue to comply with 1.4.1 Use of Color (A) and 1.4.3 Contrast (Minimum) (AA) and present an aesthetic and clean design.



Where you can find this project

The improved hyperlink designs is currently being rolled out on qld.gov.au. First release will be in Jan 2023.

These designs and guidelines are also currently being incorporated into the QLD Health Design System, and will soon be released.