The goal of this project was to conduct a thorough accessibility audit of the Stemettes website. The objective was to identify and address barriers that could prevent users with disabilities from fully engaging with the site, ensuring an inclusive experience for all visitors.
Approach to testing
Severity Scale
Once all the errors were listed, they were assigned a severity level based on the extent to which they would affect the user journey of people with disabilities:
Accessibility User Personas
Due to the audit's constraints, which prohibit disabled persons' direct recruitment for user interviews because of time and legal constraints, an alternative approach to investigate user personas has been employed to understand accessibility requirements.
A variety of user profiles were chosen from the Digital Accessibility Research by Gov.uk, matching Stemettes' user specifications of a young female student with diverse impairments (like visual, auditory, motor, or cognitive disabilities). This action was taken to comprehend the precise details of their disabilities and limitations, in order to pinpoint the obstacles that deter them from thoroughly interacting with the website's content and features.
Persona - 1 , Persona - 2, Persona - 3, Persona - 4
Easy Check with WAVE Accessibility Tool
I initiated the process by utilizing the automated WAVE website accessibility appraisal tool to carry out a thorough examination of every page on the site: Homepage, Team Introduction Page, Events Page, and Newsletter page.
Screenshots of errors found on the webpages through WAVE Testing
Outcome
The automated testing highlighted more than 150 issues including empty hyperlinks, absent alt text, poor colour contrast, erratic heading hierarchy, and general structure concerns. These findings provide a comprehensive snapshot of the existing problems and direct our attention to areas for targeted manual accessibility verification.
Missing Skip-to-Content Links: Across all pages, there were no "skip to content" links, forcing screen reader users to navigate through every link before reaching the main content. This issue significantly increased the time and effort required to interact with the site.
Pop-up Window Issues: On the homepage, pop-up windows presented another challenge. Screen reader users had to tab through elements behind the pop-up before interacting with it, leading to confusion and inefficiency.
Inaccessible Navigation Elements: The main menu and newsletter sign-up page included drop-down menus that were not accessible via keyboard alone, making it impossible for users relying on screen readers to access these important sections.
Empty Links and Missing Alt Text: Icons like the search, hamburger menu and the social media icons had empty links, and many images were missing alt text. These omissions meant that screen reader users were unable to understand the purpose of these elements or interact with them effectively.
Screenreader Compatibility Test
Outcome
During the audit, significant issues were identified related to screen reader compatibility, which is critical for visually impaired users. The Stemettes website lacked several key accessibility features that are essential for effective screen reader navigation
Contrast analysis with WebAim
Low Contrast Ratios: Numerous elements, such as the donate link with white text on a yellow background, and buttons and links with similar colour schemes, did not meet the minimum contrast ratio of 4.5:1. In some cases, the contrast was as low as 1:1, making these elements nearly unreadable for users with visual impairments.
Flashing Content Risks: On the events page, several flashing images or GIFs posed a significant risk to users with photosensitive epilepsy. These elements exceeded the recommended flash thresholds, increasing the potential for triggering seizures.
Inadequate Text Visibility: Text within pop-up windows, filter elements, and the quotes section on the home and events pages also failed to meet the required contrast standards, further complicating readability.
The contrast analysis revealed several key issues across the Stemettes website, particularly concerning the text and background color ratios. These deficiencies made it challenging for users with low vision to read and interact with the content effectively.
Outcome
The contrast ratio was insufficient across multiple screens and sections which showed that the visual language of the site needed to be scaled.
Observation based on WCAG 2.1 guidelines
The accessibility audit conducted on the Stemettes website, using the WCAG 2.1 Level AA guidelines as a benchmark, uncovered several critical areas where the site did not meet the necessary standards for accessibility. These observations highlighted the need for improvements across various aspects of the website to ensure a more inclusive user experience.
Proper Landmarks: ARIA landmarks were correctly used.
Descriptive Links: Some links were well-labeled.
Consistent Navigation: Navigation menus were consistent across pages.
Readable Font Size: Font size was generally adequate.
No Skip-to-Content Links: Missing on all pages.
Inaccessible Navigation: Drop-down menus not keyboard-accessible.
Low Contrast Ratios: Text and UI elements failed contrast standards.
Empty Links/Alt Text: Missing alt text and links with no purpose.
Inadequate Form Labels: 'Sort by' lacked accessible labels.
Flashing Content: Risky flashing images on the event page.
Skipped Heading Levels: Inconsistent heading structure across pages.
Improve Contrast: Adjust text and background colors to meet WCAG 2.1 contrast ratios (4.5:1 for text, 3:1 for large text).
Consistent Font Size: Ensure all text sizes are readable and meet accessibility standards.
Add Skip-to-Content Links: Implement skip-to-content links on all pages for easier navigation.
Make Drop-Down Menus Accessible: Ensure all drop-down menus are fully accessible via keyboard.
Recommendations
Once all the issues were marked out, I proceeded to recommend potential solutions for each issue detailing what improvements were needed in order to comply with WCAG 2.1 accessibility standards and incorporate inclusivity.
These recommendations were mainly sourced from the primary and secondary guidelines and research articles referenced that explained how such issues affect people with impairments and what can be done to enhance their user experience and accessibility. Below are listed some of the important recommendations:
Visual
Navigation
Provide Alt Text: Add descriptive alt text to all images and meaningful labels to interactive elements.
Fix Empty Links: Remove empty links or provide descriptive text within them.
Control Flashing Content: Limit flashing content to three flashes per second or remove it entirely to prevent seizures.
Add Captions and Transcripts: Provide captions for videos and transcripts for audio content.
Provide option to pause auto-moving content (gifs, videos) and give sufficient time to interact with them.
Text Content
Media Content
Ensure Full Keyboard Access: Make sure all interactive elements, including forms and pop-ups, are accessible via keyboard.
Add Focus Indicators: Use visual indicators to show which element is currently in focus for keyboard users.
Keyboard
