Executive Summary
This report describes the conformance of the Shein website with W3C’s Web Content Accessibility Guidelines (WCAG). The review process is described below and is based on the evaluation methods described in Accessibility Evaluation Resources. This evaluation and the subsequent redesign covered three unique WCAG 2.1 criteria for each page evaluated: Home page, Sale page, and Flash Sale page. Based on this evaluation, the Shein website does not meet the WCAG 2.1, Conformance Level AA.
Detailed review results are available in Reviewed Pages, Result & Recommendation Section below. Resources for the follow-up study are listed in Reference Section. Feedback on this evaluation is welcome.
Background
This report describes the conformance of the Shein website with W3C’s Web Content Accessibility Guidelines (WCAG). The review process is described in Section 5 below and is based on the evaluation described in Accessibility Evaluation Resources. This evaluation and the subsequent redesign covered three unique WCAG 2.1 criteria for each page evaluated: Home page, Cart page, and Support page. Based on this evaluation, the Shein website does not meet the WCAG 2.1, Conformance Level AA.
Scope of Review
Website
Shein
Scope
Shein is a Chinese fast-fashion online retailer known for its wide range of affordable clothing and accessories. The scope of this project involves reviewing Shein’s website to identify and address accessibility issues according to WCAG 2.1 standards. The goal is to ensure that the platform is accessible to users with disabilities, improving the overall user experience. By evaluating key aspects such as keyboard navigation, text alternatives, time-based content, and proper use of HTML structure, we aim to identify barriers that may limit access for users with visual, cognitive, and mobility impairments.
Evaluation Method
To ensure accessibility, we conducted thorough evaluations of all pages using both automated tools (like WAVE and A11y Contrast Checker) and manual testing.
Review Timeframe
This review was conducted from 6th September 2024 - 9th September 2024
Website Language(s)
English
Reviewers
Team PROtotypers
Organization with which the reviewer is affiliated
The University of Texas at Austin - School of Information
Review Process
WCAG Version
WCAG 2.1
Conformance Level
Level A, AA
Evaluation and Validation Tools
Web Browser - Google Chrome
Tools and Plugins - WAVE, A11y Contrast Checker, Accessibility Insights for Web, Web AIM Contrast Checker, ANDI
Our Process
A team of graduate students from the University of Texas at Austin's MSIS program, known as the PROtotypers team, meticulously evaluated the accessibility of us.shein.com. We followed a well-defined approach that placed emphasis on manual testing, while also using specialized tools to comprehensively assess how well the website adheres to the Web Content Accessibility Guidelines (WCAG).
Preliminary steps
Website Selection
We started the review process by choosing the website for evaluation. Other options which we considered were, Decathlon, Temu, Bank of America & Chase. Based on a discussion and few observations we considered Shein as the candidate for assessment.
Rational for Selection: Given Shein's widespread popularity and the variety of content it offers, we decided to assess its accessibility. As web accessibility is a crucial consideration in any digital environment, it was a relevant choice for our academic assignment.
Focus Definition
We went through a lot of pages during the selection process. We picked 3 crucial pages, Home, Sale & Flash Sale. The consideration was based on few aspects like, importance and visual faults.
Gathering Resources
Pivotal resources, including the WCAG guidelines and pertinent documentation, were considered as a reference through the evaluation process.
Final Review
Summary of Findings
To ensure the accuracy and comprehensiveness of our findings and recommendations, we conducted a final review of the report.
Our meticulous evaluation process involved a careful selection of us.shein.com as the primary website, following a thorough examination of various options.
The following sections will detail the discoveries, recommendations, and potential implications derived from this comprehensive analysis.
Reviewed Pages, Results & Recommendations
Page 1: Home Page
Checkpoint 1
1.4.3 Contrast (Minimum) Level AA
Status
Fail
Guideline: The visual presentation of text and images of text has a contrast ratio of at least 4.5:1.
Summary of Issues:
The description text in the “Top Trends” section has a very low contrast ratio (1:22:1) against the background color, which does not meet Level AA standards.
The carousel menu buttons in the “Style Gallery” featuring links to other pages have a very low contrast ratio that does not meet Level AA standards.
How to Fix it
Increase the contrast between the foreground (text) color and the background color. Large text (larger than 18 point or 14 point bold) does not require as much contrast as smaller text.
Checkpoint 2
Link Purpose (In Context)- Level A
Status
Close to Passing
Guideline: The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general.
Summary of Issues:
Redundant links.
The product picture and matching caption lead to the same link resulting in additional navigation and repetition for keyboard and screen reader users.
How to Fix it
Combine the redundant links into one link and remove any redundant text or alternative text (for example, if a product image and product name are in the same link, the image can be given alt="")
Checkpoint 3
Three Flashes or Below Threshold- Level A
Status
Fail
Guideline: The objective of this technique is to avoid flashing at rates that are known to cause seizures if the flashes are bright and large enough. Since some users may be using screen enlargers, this technique limits the flashing of any size content to no more than three flashes in any 1-second period.
Summary of Issues:
The webpage consists of 9 flashing banners on one screen in an area that is flashing more than 25% of 10 degrees of the visual field (which represents the central area of vision in the eye)
Each banner flashes at a rate of 80 bpm or 1.5bps, extrapolating this to 9 banners in a 1-second interval results in 7 flashes per second, surpassing the required criterion.
How to Fix it
Content is designed so that lightning only flashes two or three times without a pause in flashing.
Page 2: Sale Page
Checkpoint 1
2.2.2 Enough Time - Pause, Stop, Hide (Level A)
Status
Fail
Guideline: For any auto-updating information that (1) starts automatically and (2) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it or to control the frequency of the update unless the auto-updating is part of an activity where it is essential.
Summary of Issues:
The description text in the “Top Trends” section has a very low contrast ratio (1:22:1) against the background color, which does not meet Level AA standards.
The carousel menu buttons in the “Style Gallery” featuring links to other pages have a very low contrast ratio that does not meet Level AA standards.
How to Fix it
Provide controls: Add buttons to pause, stop, or hide the auto-updating content.
Set time limits: Implement reasonable timeouts
Checkpoint 2
1.1.1 Non-text content (Level A)
Status
Fail
Guideline: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose
Summary of Issues:
For Screen Reader Users: If images lack alt text, screen readers cannot convey the image's purpose, leaving users unaware of important content.
For Users with Visual Impairments: If text is embedded in images without a proper text alternative, they cannot access crucial information.
How to Fix it
Add Descriptive Alt Text: Ensure every image has meaningful alt text that describes its purpose or content.
Provide Text Alternatives: Offer text descriptions for any critical text embedded in images, either in captions or nearby.
Checkpoint 3
1.3.1 Info & Relationships (Level A)
Status
Fail
Guideline: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
Summary of Issues:
For Screen Reader Users: Improper semantic markup (e.g., using <div> instead of proper headings) can confuse screen readers, making it hard for users to understand the content structure.
For Users with Assistive Technology (AT): Improperly labeled form fields or missing associations between labels and inputs can prevent users from understanding what information is required in forms.
How to Fix it
Use Semantic HTML: Ensure proper use of headings, lists, and ARIA landmarks to define structure
Page 3: Flash Sale Page
Checkpoint 1
Success Criterion 3.2.2 On Input (Level A)
Status
Fail
Guideline: Changing the setting of any user interface component does not automatically cause a change of content unless the user has been advised of the behavior before using the component
Summary of Issues:
As per the guideline, changing the context (for example, opening a pop-up) should not occur unless the user intentionally performs the action.
In the Flash Sale page of the website, the promotional banner contains text but lacks any clear interactive element. Upon hovering over the text, the arrow-shaped cursor changes to a text-based cursor (I-beam). However, clicking the text automatically triggers a pop-up window without any appropriate visual cues of whether the text is clickable or not.
The I-beam usually indicates that the user can interact with the text to select it or highlight it. The change in cursor from pointer to a text-based cursor indicates that the text is inactive, i.e., not a clickable action.
This displays inconsistency and lack of user control. The unexpected occurrence of a pop-up when the user is attempting to select the text produces a confusing and unpredictable user experience
Unexpected changes of context can cause confusion, especially for users with visual impairments and cognitive disabilities.
How to Fix it
The redesign proposed here ensures that users can highlight and select text within the banner without triggering a pop-up or changing the context.
This approach ensures that the text remains accessible and usable through assistive technologies.
Checkpoint 2
Success Criterion 2.5.3 Label in Name (Level A)
Status
Fail
Guideline: Make it easier for users to operate functionality through various inputs beyond the keyboard. For user interface component with labels that include text or images of text, the namecontains the text that is presented visually.
Summary of Issues:
This success criterion ensures that the visible label of the input matches with the programmatic name (i.e., accessible name) of that particular component.
In this case, the search bar contains simply an icon of a magnifying glass with dynamic and changing placeholder text that does not match with the icon.
The magnifying glass icon is not sufficient to convey that the input field is for searching
Further, providing other words as placeholder text may lead users to believe that the input field is not for general searching
An accessible name, in this case ‘Search’ is required for properly conveying the use of the input to the users
This ensures that those relying on assistive technology, such as screen readers, benefit from a clear label, thus improving their interaction experience.
How to Fix it
Increase the contrast between the foreground (text) color and the background color. Large text (larger than 18 point or 14 point bold) does not require as much contrast as smaller text.
Checkpoint 3
Success Criterion 2.4.7 Focus Visible (Level AA)
Status
Fail
Guideline: Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. This success criterion ensures that a visible component is displayed to let users know which element is in focus, particularly those who rely on keyboards
Summary of Issues:
This is particularly important for users with visual impairments and/or motor impairments who solely rely on keyboards to navigate through a web page. A clear indication of the element in focus improves user experience and reduces confusion
The Flash Sale page does not meet this success criteria: no visible indicator (example: borders or highlights) is displayed upon tabbing through the page creating confusion for the users
How to Fix it
Visible focus indicators, for example, a boundary or outline as depicted here, helps users clearly see which element is in focus
References
Web Content Accessibility Guidelines (WCAG) Overview
Web Content Accessibility Guidelines 2.1
Techniques for WCAG 2.1
Accessibility Evaluation Resources
Web Accessibility Evaluation Tools List School of Information Page
Using Combined Expertise to Evaluate Web Accessibility
