Clarins USA
PROBLEM STATEMENT
Clarins USA is taking action to ensure that people with disabilities can interact with services, products, and materials readily available for individual needs regardless of ability, technology, or environment. The evaluation will standardize Clarins USA’s culture towards accessibility and will ensure everyone in the organization understands the importance of accessibility. In addition, the evaluation will allow the team to continuously monitor updates to web accessibility standards to ensure the company evolves with digital experiences and the world around us.
Project goals
Conduct an accessibility evaluation of Clarins USA using three evaluation methods:
- Automated code inspection
- Manual code inspection
- Experience walkthrough
Three criteria for the experience walkthrough were employed:
- How well does the site support using assistive devices such as screen readers?
- The degree to which the site is navigable without a mouse or trackpad.
- Do the pages allow visitors with disabilities to understand where they are and what they can do?
Scope
This evaluation covered the following areas of the site:
Search for an item of choice from the main page, then interact with the search results page and the product page for the item.
Project Duration
Tools Used
Approach
Initiation Phase:
The beginning phase will start with the process of improving efforts toward accessibility. Learning, communicating, and raising awareness about accessibility will help define the company’s need to support accessibility.
While Clarins USA has a current plan for evaluating accessibility at a minor level, the optimal approach is to integrate accessibility seamlessly into daily processes at all levels.
Designing with accessibility in mind is crucial for the success of web-based applications. It ensures a positive user experience, broadens the audience by reducing site abandonment, enhances customer satisfaction, and gives a competitive edge, leading to increased revenue for organizations like Clarins. This approach also fosters inclusivity, positively shaping the company's image and improving the lives of individuals with disabilities.
Meeting WCAG requirements prevents legal issues and promotes cross-browser and mobile compatibility. Enhancing SEO through accessible design improves site trustworthiness and competitiveness in search engine results, contributing to better KPI measurements and bottom-line metrics. The ultimate goal is to instill confidence in the audience, allowing them to focus on their experience and goals.
Planning Phase:
The WCAG 2.1 guidelines offer technical specifications for creating accessible content. Testing with people with disabilities is the most accurate assessment, but evaluating without users can still reveal areas of inaccessibility. The POUR principles—Perceivable, Operable, Understandable, and Robust—are foundational for web accessibility. Conformance levels include A (lowest), AA (mid-range), and AAA (highest).
WCAG 2.1 introduces 17 success criteria beyond 2.0, enhancing accessibility for mobile users, those with low vision, and cognitive/learning disabilities. Organizations, including Clarins USA, should strive for Level AA compliance to meet federal laws like the ADA and Sections 508 Standards. The focus on various testing types ensures accessibility for all users and aligns with ADA compliance.
To achieve accessibility for users of all abilities and maintain ADA compliance, Clarins USA must focus on this multi-layered approach for accessibility testing.
ACTIONS
User Research
This report describes the results of an accessibility evaluation conducted on ClarinsUSA. Also provided in this report are recommendations for bringing ClarinsUSA into compliance with the World Wide Web Consortium’s Web Accessibility Initiative (W3C WAI) for Web Content Authoring Guidelines (WCAG), version 2.1. The WCAG can be found at this URL: https://www.w3.org/TR/WCAG21/. Below is a summary of the project goals and scope.
Automated Code Inspection
SortSite was utilized to identify problems on the site.
Automated Code inspection uses analytical methods to inspect and review the entire code. Then, it applies rules against the code, verifying the source code to conform to best practices to determine whether it meets accessibility guidelines by detecting bugs, vulnerabilities, or security issues.
Manual Code Inspection
The site's source page was viewed, mobility was checked and used a screen reader.
Manual code evaluation is the process of reading source code line by line to look for vulnerabilities. It allows human eyes on the code and makes qualitative judgments about authentication, authorization, cryptography, and overall data validation. Also, offering a human touch to the system can help identify design-level problems. Finally, the strategy helps recognize code that automated tools can ignore.
Experience Evaluation
Evaluator
A user experience walkthrough is a technique created to identify usability and accessibility issues in a website or application. The advantage of the walkthrough is that the evaluator takes on the role of a person with one or more disabilities experiencing a site or application. The walkthrough allows one to evaluate accessibility from a practical standpoint.
RESULTS
Fail Perceivable:
1.1.1 Single Page Product
1.2.1 Single Page Product
1.3.1 All pages
1.4.1 Main Page
Fail Operable:
2.1.1 Single Page Product
2.4.4 Single Page Product
2.4.7 All pages
Fail Understandable:
3.2.3 Main Page and Search Page
Fail Robust:
4.1.1 Main Page
4.1.2 Search Page and Single Product Page
Summary Results - Manual Code Inspection
After attempting to use Clarins USA with the manual code inspection, issues were found on each page. The critical and severe issues are summarized in the table below and elaborated on in subsequent pages.
Summary Results - Experience Using Assistive Technologies
After attempting to use Clarins USA with the macOS VoiceOver screen reader and via keyboard navigation, it was concluded that people using screen readers or not using pointing devices such as a mouse or trackpad could not navigate the website. However, while conducting the experience portion of the accessibility audit, issues were severe enough to stop every potential user from using a screen reader or keyboard-only navigation. The critical and severe issues are summarized and elaborated on in subsequent pages.
Overall Results
The overall results for the automated and manual reviews showed issues on all pages in the areas of the four principles of the WCAG guidelines. The failed areas were perceivable on 1.1.1 non-text content, 1.2.1 the videos, 1.3.1 the information, structure, and relationships conveyed through the presentation, and 1.4.1 the color contrast of text and images. The areas that failed operable were 2.1.1 keyboard functionality, 2.4.4 the link purpose of each link can be determined from the link text alone or together, and 2.4.7 the focus visibility on any keyboard operable user interface has a mode operation where the keyboard focus indicator is available. The areas that failed in understandable are on 3.2.3, the consistent navigational mechanisms repeated on multiple web pages within a set of web pages and occur in the same relative order each time they are repeated unless the user initiates a change. The areas that failed robust are on 4.1.1, the parsing in content implemented using markup languages, elements have complete start and end tags, elements are nested according to their specifications, elements do not contain duplication attributes, and on 4.1.2, any IDs are unique, except where the specifications allow these features and the name, role, and value for all user interface components. The experience walkthrough reflected these issues when using the website.
Recommendations
Summary Recommendations
The recommendations are that this document be used as a reference, follow the experience walkthrough summary results to identify the level of the priority issues, and fix the critical issues first where the visitor cannot continue. The steps to make those changes would be to reflect on the automated code inspection report for the code listed with errors, reference the manual code, and reflect those changes with what is being asked on the WCAG site. Once the code is changed on the critical issues, rerun the automated code inspection to verify and test that errors are fixed. The next step would be fixing the next level of errors following the same SOPs to make the site globally accessible for all users.
Importance of the Methods Together
The best practice combines automated and manual reviews of code. These reviews have pros and cons, but combining machines and humans is the ideal system. Manual testing is better suited for handling complex scenarios, whereas automated testing requires coding and test maintenance but proves to be faster in covering more ground in less time. Even though the code is being checked, it is essential to understand the user experience walkthrough and the user’s steps in navigating our website.
Proposed E-Commerce Workflows for Testing:
- Browsing the main page
- Searching for or navigating to an item of interest
- Learn about the item on the product page and add it to your cart.
- Removing an item from your cart
- Creating an account
- Checkout
Anticipated Results:
All workflows must conform and work together holistically to accomplish our accessibility goal as a company. Web accessibility testing is fundamental to ensuring inclusivity for all individuals, especially those with disabilities. Once the website is made accessible, the Clarins USA website will meet the WCAG standards and improve our site's overall quality, creating a universal design and experience.
User Testing:
User testing with people with disabilities, such as those using screen readers or mobility devices daily, can confirm the site’s usability.
design
Ideate
By now, accessibility is embedded into the organization’s process. Therefore, the core teams must stay on top of new accessibility standards and regulations to track, adopt, and adapt to new accessibility-related technologies.
The teams will start by keeping detailed records of what is tested, when, and the standards and steps taken to improve the automated, manual, and experience walk-through. It can be challenging to find and address each error. In addition, regular reviews of content, organizational processes, and resources will help identify the issues, ensuring that accessibility remains an evolving priority within the company.
Improvements, accessibility checks, and updates related to accessibility will be communicated and published on Clarins web-based applications and products to reduce the risks of issues reoccurring. In addition, getting the community involved in grassroots events and team outings will become a part of the organization’s culture in building more awareness of people with disabilities to make a more sustainable, accessible world.
Clarins USA is a thoughtful and socially progressive organization on the cutting edge of a more inclusive business model geared toward accessibility. People with disabilities make up a growing segment of users. So, let us work together to ensure Clarin's digital assets are usable for all.
LESSONS LEARNED
I learned Adobe XD was more accessible to navigate than Figma due to my knowledge of Adobe products and key commands. After focusing on the screens, I needed to create the app's navigation, which got more manageable once I learned.
However, the workflow for what I thought was a simple settings screen is more complex than I realized. I redrew this repeatedly to understand the precise steps of the navigation structure.
I learned that research is a critical part of understanding the needs and wants of users. During the wireframe phase, I kept referring to my research to confirm or deny my thought process. In addition, the feedback was critical in guiding the wireframe navigation and design for anything that needed to be clarified on the user journey.