Making STEM Accessible for All - An audit for Accessibility Compliance
What went behind the process of an accessibility audit that was conducted to expand Stemettes' reach and impact to make sure that no student was left behind.
Not all barriers are physical…
Stemettes, a non-profit organisation passionate about inspiring students and young women in STEM fields, understood the importance of reaching every mind without borders.
They required assistance to identify accessibility weaknesses on their existing website Stemettes.org and find potential solutions to resolve critical issues so that their services were inclusive to all students.
-
I did a deep dive into content using page scanning and manual testing and reported details of findings with potential fixes to meet accessibility standards.
-
Easy Checks
WAVE Automatic Testing
Voice Over
Keyboard Navigation
-
6weeks
Read the detailed accessibility report with the password I provided in my resume/application or please reach out to me .
Problem
Digital platforms often face accessibility limitations for individuals with disabilities, leading to frustration, exclusion, and potential discrimination.
People with disabilities account for up to 20% of all customers for a business, while 83% of potential disabled customers had to look elsewhere, to a more accessible competitor.
The current website for Stemettes was not formally evaluated for accessibility, which meant that it could potentially leave out students with diverse needs and negatively impact their organisational reach and user experience.
Opportunity
How can the Stemettes website cater to users with diverse abilities?
Outcome
The accessibility audit showcased how seemingly minor details can create major obstacles for different users when browsing.
A comprehensive report was delivered to Stemettes, detailing what the errors were, where improvements were needed (linking to the relevant WCAG 2.1 recommendation at every stage), and how to go about fixing the errors to comply with Accessibility standards.
Testing with Purpose
Here is an overview of the steps taken while performing the expert accessibility review.
AUTOMATED TESTING
PERSONA ASSESSMENT
ASSISTIVE TECHNOLOGY TESTING
VISUAL ASSESSMENT
STANDARDISED GUIDELINE CHECKS
PROPOSED SOLUTIONS
This particular order was followed to understand issues from a standardized perspective initially, and then according to set guidelines to be successful in finding relevant issues which led to developing potential solutions to fix the issues.
Step 1
Analysis with WAVE Accessibility Tool
I began by using the automated WAVE web accessibility evaluation tool to scan each page of the site: Homepage, Meet the Team Page, Events Page, and Newsletter page.
Screenshots of errors found on the webpages through WAVE Testing
OUTCOME:
This automated testing brought up over 151 errors of empty links, missing alternate text, inaccessible colour contrast, inconsistent heading levels, and general structure issues.
These results gave an overview of present issues and areas to focus on when performing manual accessibility testing.
Step 2
Considering Users with various Access Needs
As constraints of the audit prevented direct recruitment of disabled individuals for user interviews due to time limitations and legal restrictions, an alternative method of studying user personas was adopted to gather insights into accessibility needs.
A range of user profiles were selected from Digital Accessibility Research by Gov.uk who fit Stemettes’ user criteria of a young girl/student with various disabilities (such as visual, auditory, motor, or cognitive impairments).
This was done to understand the exact specifications of their disabilities and impairments to analyse the barriers that prevented them from fully experiencing the website’s content and functionalities.
Student with ADHD and dyslexia
Profile A - Cognitive Disabilities
OUTCOME:
Although, direct user input could have provided deeper insights, adopting such personas highlighted the precise access needs of disabled users. This helped emphasize the importance of their perspectives in conducting the accessibility audit.
Step 3
Testing Screenreader compatibility
A legal requirement for digital accessibility is often Screenreader compatibility, as they are essential for users with visual impairments. To ensure that this important user base can access and interact with the digital content, manual testing on key templates was performed to identify additional errors.
The testing techniques performed in this audit were keyboard navigation with a screen reader, and reading web-copy to asses the tone and reading age.
Most site content was skipped over due to missing alt text, label text, heading tag orders, and visible keyboard focus indicators which made it difficult to control interactions through keyboard operations.
While navigating through different pages, the main navigation bar at the top of each page was repeated with no option to skip which turned time-consuming and frustrating.
The media player could not be accessed or operated as it did not receive any keyboard focus or controls.
OUTCOME:
Testing screenreader compatibility demonstrated diligence in accessibility efforts. The website did not prove to be highly compatible with screen readers, thereby not making the experience usable by the widest possible audience.
Step 4
Contrast analysis with WebAim
I tested the contrast of 3 prominent colour combinations throughout the website:
The yellow text on the white background
The white text on the purple background in the menu
CTA buttons (white text on yellow background)
An accessible contrast ratio is over 4.5. Here the contrast ratio was below 4 for all.
The black text on the white background throughout the website passed all the WCAG accessibility checks.
OUTCOME:
The contrast ratio was insufficient across multiple screens and sections which showed that the visual language of the site needed to be scaled.
Step 5
Observation based on WCAG 2.1 guidelines
Website accessibility mandated by W3C Web Content Accessibility Guidelines (WCAG 2.1 Level AA) divides its guidelines into four categories: Perceivable, Operable, Understandable, and Robust.
Below is an outline of the summary of the preliminary findings for the categories found through the audit.
Satisfactory
Content can be presented without scrolling in two dimensions
Navigation through header and footer is present
Dissatisfactory
Multiple links, images & buttons are missing alt-text.
Incomplete and empty labels with no instructions not indicating their function to users.
Low contrast ratio throughout the website making the content difficult to read.
Non-accessible Media Player that does not support keyboard controls.
Absence of captions & transcripts for video content making them uninterpretable.
Focus order misses a majority of content when using a screen reader.
Missing skip links causing repetition of information on the main nav bar for users with assistive technologies.
Secondary guidelines were referred from Harvard Digital Accessibility, SiteImprov (Harvard-Licensed Tool to Check Accessibility), and the style guide from British Dyslexia Association 2022.
Step 6
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
Improve colour contrast across the site, ensuring that all text, coloured panels, and buttons are at least AA compliant.
Enable zooming and scaling without clipping of text or visual content
Navigation
Incorporate a skip link mechanism that allows users to skip navigation.
Highlight the navigation menu for current page to determine their location. Add a breadcrumb trail to indicate the location.
Keyboard
Add keyboard controls (for buttons, drop-downs) to make website accessibility easier
Style CSS outline property to show a visual indicator of focus.
Text content
Add descriptive label text for elements (forms, icons) to indicate their function .
Structure headings to keep up hierarchy
Provide alt-text for images, buttons & links
Media content
Use a media player that supports keyboard accessibility.
Add captions & transcripts for hard-of-hearing users to get a text version of the material to understand the content.
Provide option to pause auto-moving content (gifs, videos) and give sufficient time to interact with them.
Reporting
The audit was performed by scanning each page cross-referencing the primary and secondary guidelines as well as making use of assistive technology such as a screenreader.
The details behind the findings were consolidated into an easy-to-decipher report, providing clear explanations and examples where possible, and linking to the relevant WCAG 2.1 recommendation at every stage.
The findings were then sequentially ordered and framed by the severity of the issues. Severity was categorised into 4 levels:
4 – Unusable for users, 3- Problematic for users, 2 – Will bother users, 1- Minor issue to users.The errors were colour-coded by severity along with an optional screenshot that highlighted their location on the site, the guidelines they violated, a description of the problem and why it mattered, and recommendations to fix the issues.
Results of a successful re-build
As part of the content accessibility audits, Stemettes redesigned and re-wrote their main site based on the findings from the accessibility audit. An automated retest showed that the errors were now reduced to 17 implying a decrease of 88.7% in accessibility issues.
By making changes in order to comply with WCAG 2.1 recommendations, Stemettes have made it easier for people of all areas to use their website.
Reflection
This accessibility audit helped achieve the objective of contributing towards a more welcoming and inclusive Internet.
While I was aware of the surface-level problems faced by users who have diverse needs, performing an in-depth accessibility review helped me realise the number of creative ways that exist to resolve these issues and the importance of integrating inclusivity into the core of Stemettes' digital presence.