Hero image showing a desktop mockup of a website, with the title ‘Accessibility Audit’ displayed on the screen.
Hero image showing a desktop mockup of a website, with the title ‘Accessibility Audit’ displayed on the screen.

Background

1 in 5 Australians faces accessibility challenges,

but many websites fall short

According to the 2021 Census by the Australian Bureau of Statistics, nearly one in five Australians (18%) has a disability. However, a 2020 report from the Digital Transformation Agency found that 78% of Australian government websites do not meet basic accessibility standards. This shows a clear need for improvement in web accessibility.

Goal

Elevating Accessibility in My Portfolio Website

While learning more about accessibility, I checked my portfolio website and found it wasn’t accessible. To create an equal experience for everyone and not marginalize any group, I decided to conduct an accessibility audit to identify and fix the issues.

My Role

Reviewer

Product Designer

Timeline

1 Week (2 Sep 2024 - 8 Sep 2024)

Tools

Wave, AXE, VoiceOver, WCAG 2.2 Guidelines, ARIA

Overview

Audit Scope: Purpose, Criteria, and Key Methodologies

Purpose

Purpose

Purpose

Scope

Scope

Scope

Criteria

Criteria

Criteria

Methods

Methods

Methods

Review Process

Automated

Testing

Automated

Testing

Keyboard

Testing

Keyboard

Testing

Screen Reader

Testing

Screen Reader

Testing

Fix &

Documentation

Fix &

Documentation

Result

211 Accessibility Issues Across 7 Themes Identified

211

Items to fix

Items to fix

7

Themes Identified

Themes Identified

Alt Text: 70 (33.18%)

Alt Text: 70 (33.18%)

  • Missing alt text: 70

Colour Contrast: 83 (39.34%)

Colour Contrast: 83 (39.34%)

  • Low contrast: 83

Headings: 50 (23.70%)

Headings: 50 (23.70%)

  • Missing headings: 49

  • Skipped heading levels: 1

Others: 8 (3.78%)

Others: 8 (3.78%)

  • Identical page titles across pages: 5

  • Missing legends: 1

  • Missing page regions: 1

  • Unexpected behaviour(Email link): 1

Result

Core Accessibility Issues: A Before & After Snapshot

  1. Found and Fixed 83 Low Colour Contrast Issues 

  1. Found and Fixed 83 Low Colour Contrast Issues 

In the photo below, I improved the contrast from 2.78:1 to 4.88:1, keeping the primary colours of orange and brown. This meets WCAG 2.2 guidelines (Success Criterion 1.4.3) for contrast.

Screenshot displaying an image with low color contrast issues
Screenshot displaying an image with low color contrast issues fixed
  1. Found and Fixed 70 Missing Alt Text Issues 

  1. Found and Fixed 70 Missing Alt Text Issues 

I've incorporated alternate texts to 70 visuals lacking descriptions, guaranteeing their accessibility to screen readers and compliance with WCAG 2.2 standards (Success Criterion 1.1.1) pertaining to non-textual components.

Screenshot displaying an image with missing alt text
Screenshot displaying an image with missing alt text
Screenshot displaying an image with missing alt text
Screenshot showing an image with alt text provided
Screenshot showing an image with alt text provided
Screenshot showing an image with alt text provided
  1. Found and Fixed 50 Heading Structure Issues 

  1. Found and Fixed 50 Heading Structure Issues 

I fixed 50 issues with missing or skipped headings to make the page easier to navigate, especially for screen readers. This follows the WCAG 2.2 guidelines (Success Criterion 1.3.1) to ensure content is well-structured and easy to understand for everyone.

Screenshot showing an image with missing headings.
Screenshot showing an image with a heading provided.

Documentation

Detailed Accessibility Findings

Key Takeaways

Learnings

Accessibility-First Approach

Using VoiceOver showed me how different the experience is for those needing accessible features. Accessibility should be built into every step of the design process to ensure equal usability for all.

Business Benefits of Accessibility

Enhancing accessibility improves SEO, widens your audience, strengthens brand reputation, and reduces legal risks. It’s not an extra, it’s essential.