Accessibility is a WIN WIN situation for everyone involved.
I was tasked with building a website that demonstrates my understanding of disability rights and WCAG 2.1 specifications. To ensure accessibility, I used current accommodation software to test Burberry's website and made recommendations to the code to meet WCAG 2.1 guidelines.
Accessibility and UX Designer
August 2023 - December 2023
WAVE
HTML
CSS
Bootstrap
To showcase my proficiency with voice-over navigation, keyboard accessibility, and ensuring compliance with WCAG 2.1 standards, I chose to evaluate Burberry's website.
To explore Burberry's site yourself, click on the following link: Burberry's Website
I set three tasks for myself to complete with my screen turned off, relying solely on voice-over. These tasks were:
Task 1 of 3:
Add the "Burberry Check Cashmere Scarf" to your Shopping Bag and then open your Shopping Bag.
Task 2 of 3:
Find the contact phone number for the Burberry Company.
Task 3 of 3:
Find the "Check Wool Twill Jacket".
Discovery: I experienced firsthand the challenges of navigating a website with incorrect element ordering. Due to the improper arrangement of elements, I struggled to select the correct links.
Tasks Incomplete: I was unable to complete any of the tasks relying solely on voice-over. It was only after visually navigating the site and identifying where the task elements were located that I was able to successfully complete them. Unfortunately, for a blind user, this would not be an option.
Recommendations: I recommend the following changes to Burberry's website to meet WCAG 2.1 standards and enhance usability for a broader audience:
The WAVE tool is my best friend when it comes to evaluating accessibility. After running the Burberry website through the WAVE tool, I discovered the following accessiblity errors on just the landing page alone:
After conducting screen reader testing on a professional site, I wanted to apply my knowledge of WCAG accessibility standards to my own website. The site I built incorporates these accessibility rules to ensure it is usable for as many people as possible.
The Home page outlines the disabilities currently prevalent in the United States and emphasizes the critical importance of having accessible websites.
Having an Accessibility Statement is essential to demonstrate the conformance status of my website.
Content should be written in short-separated sections to make it easier for users to read. Long paragraphs can cause readers to lose interest, so it's important to keep text concise and aligned to the left for better readability and findability.
The final section demonstrates how to make a form fully accessible. When the user clicks in the input box, the label "Full Name" does not disappear but moves up and remains visible, ensuring the user remembers what information to enter.
The email section includes validation to prompt users to enter a valid email address and informs them that this is a required field.
Making websites accessible to as many users as possible is crucial. This approach not only increases usability but also saves companies money in the long run. Using the WAVE tool on Chrome, I quickly identified color conflicts and website errors, learning how to make simple changes that significantly enhance accessibility for users.