Enhancing Stemettes’ Inclusivity: An Accessibility Audit
The Challenge
This self-directed project aimed to identify and address accessibility issues on the Stemettes website to create a more inclusive experience for users with disabilities.
While undertaking a comprehensive site audit, I uncovered several critical and severe violations of the Web Content Accessibility Guidelines (WCAG 2.1) A & AA standard. This case study outlines my research process, findings, and the actionable recommendations that followed.
Role:
Accessibility Auditor
Usability Consultant
Duration: 6 weeks
Tools:
WCAG 2.1 Accessibility Guidelines
WAVE (web accessibility evaluation tool)
A11Y Color Contrast Accessibility Validator (contrast analyser tool)
VoiceOver (Apple’s Screen Reader)
Gov.UK Personas (for persona-based user testing)
Contents
-
Scope: Auditing the Stemettes website to identify and fix accessibility issues, I reviewed the entire site, focusing on WCAG 2.1 compliance and usability for users with disabilities.
-
-
Accessibility Findings: Significant issues included missing alternative text, low contrast, poor keyboard navigation, and disruptive content.
-
Conclusion & Recommendations: This audit addressed Level A and AA violations, including non-text content, contrast, and keyboard navigation, concluding that enhancing accessibility significantly improves user experience and will align Stemettes with inclusive design standards.
-
Reflection: Emphasising the importance of inclusive design, this project demonstrated how thoughtful improvements can make digital experiences accessible to everyone - further highlighting the critical role of accessibility audits and working with users for usability.
Scope
Endeavouring to ultimately make the Stemettes website accessible for all users—including those with visual, auditory, motor, and cognitive impairments—I used the audit to review the requested pages of the site to identify usability and accessibility barriers, conducting user testing with personas reflective of real-world disabilities, and suggesting improvements that align with WCAG 2.1 standards
Methods
Using the Website Accessibility Conformance Evaluation Methodology (WCAG-EM) “Easy-checks” methodology & Apple’s VoiceOver screen reader, I performed an initial code inspection and navigational assessment of the website, focusing on its usability for assistive technologies like screen readers and keyboard navigation.
As contrast seemed to be a significant issue amongst all website pages, using the Web Accessibility Tool List, the A11Y Color Contrast Accessibility Validator by A11Y Company was run to investigate the website’s contrast issues further. WAVE, a web accessibility evaluation tool, was also used in conjunction with this tool.
Finally, each page’s content and functionality were reviewed in-depth and assessed against the WCAG 2.1 Level A and AA conformance standards, with a provided link to each violation of the guidelines. Each issue was assessed and ranked using the below four-tier Accessibility Issue Severity Scale (adapted from Nielsen and Ruben’s usability scales).
To provide user-based evidence and explanations for the suggested fixes, I used Gov.UK personas representing individuals with specific disabilities, such as visual impairment, dyslexia, and rheumatoid arthritis—simulating real user experiences.
Table of Accessibility Issue Severity Scale
Accessibility Findings
To outline the results of the audit, I created a table supplying information regarding:
The main identified accessibility issues and their descriptions
The severity of the problem, according to the Accessibility Issue Severity Scale,
The location of the issues, supported by visual or text-based examples,
Hyperlinked WCAG 2.1 guideline(s) the issue violates,
Suggested fixes for the issue, supported by Gov.UK user personas
Example of an identified Accessibility Issue, taken from the full accessibility audit results table.
The above table shows an example of how I mapped out the accessibility issues, structured in a way that is easier to understand and follow.
For a deeper dive into these key issues, I identified the following as Critical (Level 4):
Impoverished keyboard access and no visual focus
Suggested Fix: Ensure all site functionality is keyboard-accessible, including visible focus indicators for better navigation by users with motor impairments.
Level A: 2.1.1 Keyboard | 2.1.2 No Keyboard Trap | 2.1.4 Character Key Shortcuts | 2.4.3 Focus Order | 2.5.1 Pointer Gestures | 2.5.2 Pointer Cancellations | 2.5.3 Label in Name
Level AA: 2.4.7 Focus Visible | 4.1.3 Status Messages
Lack of appropriate labels for buttons and links and accessible interactions for forms.
Suggested Fix: Add descriptive labels to all interactive elements, ensuring they are announced correctly by screen readers.
Level A: 3.1.1 Langauge of Page | 3.3.2 Labels or Instructions.
Level AA: 3.2.4 Consistent Identification | 2.5.3 Label in Name
Low text contrast ratio and low colour contrast ratio.
Suggested Fix: Adjust colour combinations to meet a minimum contrast ratio of 4.5:1, particularly for interactive elements like buttons and links.
Level A: 1.4.1 Use of Color
Level AA: 1.4.3 Contrast (Minimum) | 1.4.11 Non-Text Contrast
Severe (Level 3) issues included:
Lack of appropriate alternative texts for images and videos and empty alt markups
Suggested Fix: Implement detailed and context-appropriate alternative text for images and ensure all videos include captions and audio descriptions for full accessibility.
Level A: 1.1.1 Non-Text Content | 1.2.1 Audio-only and Video-only (Prerecorded) | 1.2.3 Audio Description or Media Alternative (Prerecorded) | 4.1.1 Parsing | 4.1.2 Name, Role, Value
Level AA: 1.2.5 Audio Description (Prerecorded)
Moving, flashing and blinking content
Suggested Fix: Remove or replace flashing content and offer controls to pause or stop animations, ensuring user comfort and safety, e.g. for users with dyslexia who may struggle with concentrating when there is moving content.
Level A: 2.2.2 Pause, Stop and Hide | 2.3.1 Three Flashes or Below Threshold
Lack of appropriate text headings
Suggested Fix: Implement a logical heading hierarchy (H1, H2, H3, etc.) to improve the website’s readability and navigability for users who rely on assistive technologies, such as screen readers.
Level A: 2.4.2 Page Titled | 2.5.3 Label in Name
Level AA: 2.4.6 Headings and Labels
Conclusion & Recommendations
Addressing these accessibility issues would significantly enhance the usability of the Stemettes website, enabling a broader range of users to engage with their content. This project reinforced the importance of inclusive design and how small, thoughtful changes can transform the user experience for people with disabilities. By making these improvements, Stemettes aligns with legal standards and demonstrates a commitment to empowering all users, regardless of ability.
Moving forward, I would recommend:
Conducting user testing with individuals who have disabilities to validate the effectiveness of these changes.
Regularly reviewing the website’s accessibility as content updates and new features are added, ensuring continuous adherence to GOV.UK’s accessibility requirements.
Implementing automated accessibility tools to flag issues in real time.
Reflection
This project was a powerful reminder that accessibility is not just about compliance—it’s about ensuring that every user, regardless of physical or cognitive abilities, can interact meaningfully with a website.
In future audits, I would position my findings as opportunities to empower stakeholders to make their websites more accessible. Additionally, I would take a more structured approach to my findings and recommendations, providing them in a way that allows clients to address the most pertinent accessibility issues as soon as possible. By following inclusive design principles and regularly reviewing websites for accessibility needs, organisations can ensure their mission is accessible to everyone.
