WCAG 1.1.1 A: Linked logo has inaccurate text alternative (Issue 1)

[CJE001]

Summary

Via Vision Australia assessment: August 2024

Impact: medium

Note: DTA have a 90 day remediation period to address the identified issues within the audit, all issues must be resolved to obtain WCAG 2.2 certification for digital.gov.au.

Steps to reproduce

digital.gov.au beta | digital.gov.au (https://www.digital.gov.au/policy/digital-experience)

Observed outcome

The digital.gov.au logo used throughout the site header is an image link to the home page. The alt-text for the logo is inaccurate as it does not contain the visible text within the logo or describe the link's destination. The link consists of multiple <img> elements with the alt-text of "Logo image" (no default ability to apply alt text to the 2 separate images - AusGov logo and digital.gov.au beta logo).

Furthermore, additional information has been added via the title attribute for the link that is not available elsewhere in the header or close to the link (by default this is generating from site slogan input field).

Text alternative does not contain logo text

Additional content in the title attribute only available via pointer hover

Code used

<a class="ct-logo ct-theme-light ct-logo--inline settings-tray-editable" href="https://www.digital.gov.au/" title="An initiative of the Digital Transformation Agency">
<img class="ct-image ct-theme-light ct-logo__image ct-logo__image--desktop hide-xxs show-l" src="/sites/default/files/Australian-Government-Coat-of-Arms_1.png" alt="Logo image">
<img class="ct-image ct-theme-light ct-logo__image ct-logo__image--mobile hide-l" src="/sites/default/files/Australian-Government-Coat-of-Arms_2.png" alt="Logo image">
<span class="ct-logo__stripe hide-xxs show-l"></span>
<img class="ct-image ct-theme-light ct-logo__image ct-logo__image--desktop hide-xxs show-l" src="/sites/default/files/digital%20web%20address%20beta%20light_1_0_2_2.svg" alt="Logo image">
<img class="ct-image ct-theme-light ct-logo__image ct-logo__image--mobile hide-xxs" src="/sites/default/files/digital%20web%20address%20beta%20light_1_0_2_3.svg" alt="Logo image">
</a>

Why this matters

When text alternatives for logos do not contain all visible text, screen readers are unable to convey all of the information that is presented visually to users.

When text alternatives do not describe the link destination, it may be unclear to screen reader users what the purpose of the link is and where it will take them.

Additionally, information added via the title attribute will only be available to users who are able to move pointer hover over the link and some screen reader users.

Expected outcome

Ensure that when logos are linked, the alt-text contains all text in the image, the link destination and the word 'logo'. The alt-text does not need to contain the word 'link' as this is already announced by screen readers.

Ideally, add the text contained within the title attribute as visible text within or below the logo. While this information is available in the site footer, it may not be easily discovered by users. The title attribute can then be removed.

Code example

<a class="ct-logo ct-theme-light ct-logo--inline settings-tray-editable" href="https://www.digital.gov.au/">
<img class="ct-image ct-theme-light ct-logo__image ct-logo__image--desktop hide-xxs show-l" src="/sites/default/files/Australian-Government-Coat-of-Arms_1.png" alt="Australian government digital.gov.au beta logo - Home">
</a>
<div class="tag">
An initiative of the Digital Transformation Agency
</div>

[CJE001]

Guideline 1.1: Text Alternatives "Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, Braille, speech, symbols or simpler language."

1.1.1 Non-text Content WCAG 2.0 Level A

All non-text content that is presented to the user has a text alternative that serves the equivalent purpose. Unlike images and animations, text can be rendered in a variety of ways by different user agents to meet specific users' needs. For example, a blind person can have the text alternative read out by a screen reader. Moreover, text alternatives benefit people with cognitive disabilities who have difficulty understanding the meaning of images and animations.

[fionamorrison23]

Hi @CJE001 the logo alt text can be changed in settings. The default alt is 'Logo image'. However, while looking at this, we realised there is only one alt text field, yet there is the option to add two logos. So, this is an issue.