In the rapidly expanding e-commerce market, particularly in the fashion industry, the accessibility of online shopping platforms is becoming increasingly crucial. According to the World Health Organization, approximately 16% of the global population experiences some form of disability, and many of these individuals rely on the keyboard, a widely used input method, for website navigation. This study evaluated keyboard accessibility of product filters on ten leading fashion ecommerce websites in Finland. We conducted a manual expert evaluation of the website's compliance with the Web Content Accessibility Guidelines (WCAG) and the European Accessibility Act (EAA). Our findings indicate a need to improve the accessibility of product filters. Nine out of ten websites exhibit severe accessibility issues, failing to comply with basic WCAG criteria, thus hindering keyboard users. This highlights the urgent need to enhance accessibility in e-commerce product iflters, not only to comply with the guidelines and regulations but also to improve the overall user experience.
provements for e-commerce websites, with fashion ecommerce websites cited as an example of poor accesWeb accessibility is about ensuring that all people, re- sibility. The topic is current as the requirements for acgardless of their abilities, can efectively access and use cessibility of e-commerce websites set by the European web content [1][2]. With the World Health Organization Accessibility Act (EAA) will come into force already in (WHO) estimating that 1.3 billion people, i.e. 16% of the summer 2025 [13]. global population, have some form of disability - the num- Our investigation focuses on the keyboard accessibility ber is expected to rise due to non-communicable diseases of product filters in leading fashion e-commerce websites and increased life expectancy [3], the importance of this in Finland. Product filters are crucial for the online shopinclusivity can not be neglected. ping experience. If users have dificulty filtering products
While web accessibility discussions have traditionally efectively, they could easily abandon the site. It is esfocused on public services, e.g. [4] and [5], recent re- sential to ensure the eficiency of using these filters for search has been increasingly dedicated to employment all users, regardless of their ways of interacting with the websites, e.g. [6][7] and common web elements like wid- website. gets [8]. In recent years, the scope has expanded to Despite the recognized importance of product filters, include e-commerce websites [9][4][10][11][2], where research on product filters in e-commerce is limited. This enhancing accessibility benefits both customers and busi- study aims to bridge the gap by shedding light on an nesses. E-commerce websites, in particular, can gain a often-overlooked aspect of web accessibility: keyboard competitive advantage when incorporating accessibility navigation in product filtering. We formulated the reinto their design [7]. However, it’s important to acknowl- search questions as follows. edge that research on web accessibility does not address all types of impairments [7]. • Are there keyboard accessibility violations in
This study focuses on keyboard accessibility, a widely product filters? supported input method for individuals with disabilities • What improvements to keyboard accessibility of and their assistive technologies [11]. The authors were these filters can be recommended? inspired by an accessibility awareness event hosted by • How do potential accessibility violations impact a software consultancy company [12] in spring 2023, the user experience for individuals who rely on which highlighted the urgent need for accessibility im- keyboard accessibility?
The rest of the paper is structured as follows. Section 2 introduces the basics of web and keyboard accessibility. Section 3 details the evaluation method applied for website assessment. Section 4 presents and discusses the ifndings of the evaluation. Finally, Section 5 concludes the work. This paper is based on the first author’s master’s thesis research [14]. 2. Web and Keyboard Accessibility keyboards or devices that replicate traditional keyboard functions. Furthermore, some users prefer keyboard navigation for its eficiency [ 17]. Table 1 summarizes common keyboard interactions for keyboard navigation. These common interactions are adapted from keyboard testing guidelines provided by WebAIM [17].
menting websites in a way that ensures ease of use for all people, regardless of disabilities. It encompasses a Table 1 wide range of user needs, including auditory, cognitive, Common online interactions and the standard keystrokes. neurological, physical, speech, or visual disabilities [1]. Interaction Keystrokes In addition, an accessible web also takes into account the Navigate to inter- . Tab - navigate forward impact of slow internet connection, varying screen sizes, active elements . Shift + Tab - navigate backward diferent input models, changing abilities due to aging, Link . Enter - activate the link as well as situational limitations like bright sunlight or Button . Enter or Spacebar - activate the butan environment that does not allow listening to audio ton [1]. Checkbox . Spacebar - check/uncheck the
Web accessibility follows internationally recognized checkbox standards and local legislation. The Web Content Accessi- Radio buttons (.oSfpnaoctebsaelre-csteedle)ct the focused option bility Guidelines (WCAG), developed by the World Wide . Arrow keys - navigate between opWeb Consortium (W3C), serve as the primary global stan- tions dard. The latest version, WCAG 2.1, is structured around . Tab - leave the group of radio butfour high-level principles: perceivable, operable, under- tons standable, and robust. Each principle is further divided Select (dropdown) . Arrow keys - navigate between opinto guidelines with testable success criteria across three menu tions conformance levels: A, AA, and AAA. Level A sets a min- . Spacebar - expand imum level of accessibility and Level AAA is the highest. . Enter/Esc - select option and colWhen a website fully meets the success criteria of some lapse level or provides a conforming alternate version, it con- Dialog . Esc - close forms to the WCAG at that level. However, achieving Slider .sliAdrerrovwalkueeys - increase or decrease Level AAA across entire websites can be challenging, as . Home/End - beginning or end not all content can satisfy all the stringent criteria. [15] Scroll . Arrow keys - scroll vertically and
In addition to WCAG, the European Accessibility Act horizontally (EAA) and the Web Accessibility Directive (WAD) mandates accessibility standards within the EU, aligning Despite its critical importance, keyboard accessibilclosely with WCAG 2.1’s A and AA criteria. These frame- ity is one of the most prevalent accessibility issues works are crucial for ensuring that digital services, includ- [18, 8, 19, 11] and some websites contain accessibility ing e-commerce, are accessible to all users, highlighting errors that make the keyboard completely unusable [20]. the legal and ethical necessity for compliance. The common challenges include missing focus indicators, illogical navigation order, inaccessible custom widgets, 2.1. Keyboard Navigation and lengthy navigation processes [17]. When an element on a website has a focus, it can be activated or manipuKeyboard accessibility, ensuring all web functionalities lated using the keyboard [17][16]. This focus is typically are accessible via keyboard, is a crucial aspect of web ac- indicated visually, such as a border or outline around cessibility [16]. It is a universally supported and operable the focused element. In Figure 1, three screenshots show input method among users and deserves special attention the focus element highlighted using the black outline [11]. Users with disabilities often utilize assistive tech- around the product category item "Vaatteet", the sort ornologies, such as screen readers, screen magnifiers, or der "LAJITTELU", and the color filter "Keltainen". Clear selection switches, for interacting on the web. Many of visual indicators are essential for keyboard users to avoid these assistive technologies output simulated keystrokes. unintentional actions.
As one specific technique, keyboard navigation is the Intuitive and logical navigation orders are crucial for use of a keyboard to move around and interact with a web accessibility [11]. As a keyboard user navigates through a page. It is particularly important for users with motor webpage, the sequence in which interactive elements reparalysis and paresthesia, tremors, or limited hand use, ceive focus should naturally follow the visual flow of the as well as for blind users who navigate using modified page, typically moving from left to right and top to bottom. This means that a user would generally encounter depends on the path of the user’s movement and not just the header first, followed by the main navigation, any the endpoints.” [16] page-specific navigation, and finally the footer. In addition to “2.1 Keyboard Accessible”, the guideline
When a web design includes widgets that go beyond “2.4 Navigable” [16] ensures that websites provide clear native HTML elements, it is essential to maintain accessi- navigation cues and indicators to help users find content bility for keyboard users so that the elements can receive and understand their position within the website [W3C keyboard focus and the interaction can be achieved using 2018]. Two essential criteria under this guideline are: standardized keystrokes. “2.4.3 Focus Order (Level A) If a Web page can be nav
In addition, web pages with lengthy navigation can igated sequentially and the navigation sequences afect pose challenges, particularly for keyboard users with mo- meaning or operation, focusable components receive fotor disabilities. Unlike mouse users who can visually scan cus in an order that preserves meaning and operability.” a page and click directly on any items, keyboard users [16] must sequentially navigate through all preceding inter- “2.4.7 Focus Visible (Level AA) Any keyboard operactive elements. To alleviate this, "skip to main content" able user interface has a mode of operation where the links can be implemented to allow keyboard users to by- keyboard focus indicator is visible.” [16] pass long navigations, reducing the number of keystrokes The findings of this study will be analyzed in light of required and enhancing accessibility. these three essential accessibility criteria, providing valu
These issues create significant barriers for users who able insights into the efectiveness of website accessibility rely on keyboard navigation, emphasizing the need for measures. careful design and implementation to ensure that keyboard focus follows a logical and intuitive order on the page. 3. Method and Data
2.2. Guidelines on Accessible Keyboard prevalence of keyboard accessibility issues, which are Navigation often overlooked or inaccurately detected by automated evaluations. To achieve this, we evaluate the ten leading The WCAG 2.1 guideline “2.1 Keyboard Accessible” is the fashion e-commerce websites in Finland identified by most relevant to this study. It states that all functionality Statista [21]. They are zalando.fi, hm.com, boozt.com, should be available from the keyboard. Compliance with zalando-lounge.com, uniqlo.com, stockmann.com, elthis guideline can be checked with four success criteria. los.fi, shein.com, aboutyou.fi, and xxl.fi. As zalandoThree of them are of level A and only one is of level AAA, lounge.com is part of Zalando, it is left out and replaced indicating that keyboard accessibility is the foundation with sokos.fi, one of the largest department stores in Finof accessibility [16]. land along with Stockmann. Sokos renewed their website
Under "2.1 Keyboard Accessible", the most critical crite- at the beginning of 2023 [22]. In light of the forthcoming rion is "2.1.1 Keyboard (Level A)". Violations of it severely accessibility requirements for e-commerce in the EU, it damage the operability of the website. The criterion says: is interesting to evaluate how accessibility is taken into “2.1.1 Keyboard (Level A) All functionality of the con- account in the freshly renewed website. tent is operable through a keyboard interface without We assessed whether all functionalities were operable requiring specific timings for individual keystrokes, ex- using a standard QWERTY keyboard interface, without cept where the underlying function requires input that the need for specific timings between keystrokes. We also identified any instances of keyboard traps and evaluated the intuitiveness of navigating and using filters via a keyboard.
Recognizing the subtle and often complex accessibility issues that automated evaluations might overlook, expert human judgment was crucial for accurately assessing compliance with WCAG guidelines, ensuring a thorough understanding of accessibility barriers within e-commerce. Therefore, we followed the Web Accessibility Conformance Evaluation Methodology (WCAG-EM) [23] to conduct a detailed manual expert evaluation.
The evaluation was conducted between 21.7.2023 and 13.8.2023 with Google Chrome version 115.0.5790.170 (Oficial Build) (arm64). Google Chrome was chosen because it is currently the most popular web browser. A standard QWERTY keyboard was used when navigating the websites. 3.1. Product Filters ality while others are mainly cosmetic problems. For this reason, every identified accessibility error is given a severity rating. Assigning severity ratings to issues is also a way to mark their priority, so that the most critical issues can be addressed first [ 24]. We adopted the Severity Matrix by the Digital Accessibility Services (DAS) of Harvard University to rate between three levels of severity of accessibility issues, as below.
The evaluation of product filters includes the product category, product filters, and sort order selectors. Although sort order selections serve a distinct purpose: organizing product listings to match user preferences rather than narrowing down the product pool based on specific criteria, they are categorized as product filters in this study, as this functionality is particularly valuable when dealing with lengthy product lists, as manual browsing through all options can be time-consuming and cumbersome. 1 - high: A very severe and critical problem that pre
Figure 2 illustrates an example of how the filters were vents the user from using the feature. implemented in one website. The product category selec- 2 - medium: An inconvenience that prevents the option is listed on the left side of the page, the sort order timal usage of the feature and may cause unnecdropdown selectors on the top right corner, and the rest of essary trouble and annoyance for the user but the product filters and the show more filters button in the does not completely prevent the user from using middle. In e-commerce websites, like the ones selected in the feature. our study, the filters are implemented as dropdowns or 3 - low: A cosmetic problem that gives an unfinished accordions containing lists of selectable options, check- impression but does not prevent the user from boxes, radio buttons, and sliders. Regardless of some using the feature. diferences in layout and implementation, the accessibility of product filters could be evaluated and the results In addition to severity, each error is examined against could be compared. The product filters and sorting are the WCAG criteria it violates. The errors are further cateoften implemented as a horizontal bar or a left-hand ver- gorized into more detailed categories to better formulate tical sidebar. The diference between filtering and sorting the possible improvements. is the boundaries they set for the result list. Sorting is a soft boundary that only rearranges the product list by 4. Results and Discussion some attributes while filtering sets hard boundaries that limit the scope of the results. Both of these are relevant 4.1. Accessibility Errors and Violations of for comfortable user experience and thus they are both included in this evaluation. WCAG Criteria
e-commerce sites identified 34 distinct accessibility issues, numbered as prefix-E*, as shown in Figure 3 and Figure 4. These issues were depicted in screenshots available at [14].
(Level A), 2.4.3 Focus Order (Level A), and 2.4.7 Focus Visible (Level AA), which hamper the operability and navigability of the website. Specifically, focus indication problems occur on 80% of the sites, and 70% of the sites have filters that are not accessible by keyboard. In addition, other issues include duplicate focus areas, nonintuitive navigation order, hidden elements, etc. which are categorized in Table 2. Out of the 34 observed accessibility errors, 15 errors were highly severe, 18 were medium, and 1 was low in their severity. 4.1.1. Highly severe accessibility issues
The most prevalent issue is the unreachable element.
The elements were completely bypassed during keyboard navigation, never gaining focus. Consequently, every instance in this category violates the WCAG criterion “2.1.1 Keyboard (Level A)”. As detailed in the description in Figure 5, a wide variety of elements, including menus of iflters (stockmann-E1, shein-E3, sokos-E2), sliders (ellosE4), dropdown menus (aboutyou-E1, aboutyou-E2), and can navigate to elements using the keyboard, but cannot make selections. Typically, this issue was identified in radio buttons of sort order (hm-E1) and checkboxes of the dropdown list (bootz-E2, shein-E2) in product filters, Figure 5: Example of unreachable element: On ellos.fi, the where they are focused and can be reached, but remain focus never gets to the price slider by keyboard. unselectable via keyboard.
The third major category of severe accessibility errors involves unscrollable elements, notably in dropdowns radio buttons (xxl-E3), are unreachable via keyboard in (boozt-E1) and accordions (ellos-E5, ellos-E6). These elethese implementations. It is alarming that over half of ments are not fully navigatable via the keyboard, hinderthe websites evaluated in this study exhibited at least one ing users from accessing all available options and causing such error. the focus to vanish into hidden elements, forcing users
The category of inoperable options ranks second in to guess its location. This violates the “2.1.1 Keyboard severe accessibility errors. This issue arises when users (Level A)” and “2.4.7 Focus Visible (Level AA)” criteria. means of knowing the focus location, without randomly clicking interactive elements on the page to get a hint of the location of the focus. Notably, eight out of the ten websites evaluated exhibited at least one error in this category, implying its prevalence as a common accessibility issue.
The second category is unintuitive navigation order.
The identified issues include the focus unexpectedly jumping to an illogical location (zalando-E4), users navigating through an invisible list of items before reaching Fmiegnutrsest6a:cEkxoanmtpolpe ooffesatachckointhgeerlaenmdefnotcsu:sOins iznavliasnibdloe.fuin,edleer- the next element (hm-E3, aboutyou-E4), and new eleall of them. ments being added before the current one which expects users to navigate backward to the new element (ellos-E1).
These scenarios result in confusing navigation, violating the WCAG criteria “2.4.3 Focus order (Level A)”. In addi
Additionally, zalando-E2 involves a non-functional tion, the focus in two instances (hm-E3, aboutyou-E4) is erase button in the search bar, unresponsive for both temporarily lost in hidden elements, violating the “2.4.7 keyboard and mouse users. Users must rely solely on the Focus visible (Level AA)” criterion. backspace key to erase text. Another issue, zalando-E5, is Also, unnecessary clicks in some filters were identirelated to element stacking, as shown in Figure 6 where ifed. These occur when dropdowns remain open after overlapping elements render both top and underlying the keyboard focus leaves (zalando-E3) and every option layers inaccessible due to hidden focus. This not only on the list of filters has more than one focus area from confuses users about focus location but also violates the which only the latter is activatable (hm-E2, xxl-E1), as “2.4.7 Focus Visible (Level AA)” criterion, as the focus the example shown in Figure 7. Unnecessary clicks are a becomes invisible when hidden beneath other elements. common annoyance for keyboard users although there is no explicit WCAG criterion for that. We observed many 4.1.2. Other accessibility issues unnecessary clicks during data collection, particularly in The majority of identified issues are of medium and low the main menu which lacked a “skip to the main content” severity. The most prevalent medium-severity accessibil- option, leading to excessive clicks to reach the product ity error is the missing focus indicators, which violate list. the WCAG criterion “2.4.7 Focus visible (Level AA)”. A One error, rated low severity, contributes to an unkeyboard focus indicator, such as an outline or other vis- finished page impression without fully blocking the use ible cue, is essential for indicating the currently focused of the feature or causing unbearable discomfort for keyelement as a user navigates a page. It is particularly cru- board users to interact with the product filter. This imcial for keyboard users, as it often represents the only plies incomplete consideration of keyboard accessibility emerges as the most accessible filter, with one instance of inaccessibility identified.
For individuals with disabilities who rely primarily on keyboard navigation, the absence of accessible filters can render an e-commerce platform unusable. These accessibility errors can hinder eficiency, amplify user frustration, and potentially result in lost sales for businesses.
Therefore, thorough accessibility testing and remediation are imperative to ensure that all users have an equal and eficient online shopping experience.
The path to enhancing keyboard accessibility is dependent on the specific nature of the accessibility error. The identified errors in Figure 3 and Figure 4 can be transformed into actionable tasks for development teams with in page design and implementation. The misaligned el- minimal adjustments. ements error specified in aboutyou-E5 falls under a po- For high-severity issues, the solutions are relatively tential “broken styles” category, yet no specific WCAG straightforward. As outlined in Table 2, to prevent uncriteria address this type of error. reachable elements, ensure that all interactive elements and filter options are accessible via keyboard navigation. 4.2. Accessibility Errors Afect the Usage Elements that are scrollable with a mouse should also be of Common Product Filters navigable using the keyboard. Buttons should function identically for both mouse and keyboard users. AdditionAcross various e-commerce platforms, regardless of the ally, if focus is lost due to overlapping elements, close specific product category, a common set of filters is typi- previously opened elements before opening new ones to cally employed, and they are category selection, sort or- maintain focus on the uppermost element. der, brand, size, and color in the ten fashion e-commerce Medium-severity errors, including the prevalent websites. As shown in Figure 8, almost all of the fashion unindicated focus issue, have straightforward solutions. e-commerce websites included these five filters, except The remedy is to visually mark the focused element, typthat Uniqlo.com and shein.com exclude the brand filter. ically with a black outline, as shown in Figure 1. The
Figure 8 indicates the specific accessibility error code navigation should follow a logical and intuitive order that obstructs or impedes filter use. Some errors are that aligns with the presentation in the graphical user severe enough to entirely disable filter functionality, as interface to minimize confusion and focus loss. Reducdiscussed previously. A glaring disparity is observed with ing the number of activatable fields within elements can Shein.com, where none of the filters are accessible via eliminate unnecessary clicks. The only low-severity erkeyboard, including the category selection option which ror, broken styles in aboutyou-E5, can be rectified by is accessible and operable on all other websites. adjusting the style sheet for element misalignment.
Stockmann.com and sokos.fi allow users to select prod- The impact of these accessibility errors on the user uct categories and set sort order, despite some inconve- experience can be severe, particularly for those who rely niences. Yet, the brand, size, and color filters remain on keyboard navigation. Inaccessible or inadequately inaccessible via keyboard, limiting full user engagement. accessible product filters can lead to considerable user
Zalando.fi, uniqlo.com, ellos.fi, and xxl.fi stand out frustration and dissatisfaction, hindering the ability to for their adherence to keyboard accessibility principles browse products eficiently. Users may abandon a website across all evaluated filters. Despite certain usability chal- if they encounter obstacles in locating desired products. lenges, these sites ensure that no filter is entirely unus- Previous studies [25][2] have established that accessiable, thereby enhancing the overall user experience. bility violations significantly influence user experience,
A critical evaluation of the filters indicates that color with emotions playing a pivotal role – accessibility issues selection is disproportionately afected by severe accessi- can result in user frustration and reduced engagement. bility errors, with four out of the ten sites lacking in this The fashion e-commerce websites analyzed in this study aspect. Conversely, sort order, brand, and size filters ex- require further accessibility development to ensure a poshibit accessibility concerns on a smaller scale, with issues itive user experience. present in only three sites. Notably, category selection
expected to drive significant improvements. Further research should include comprehensive accessibility audits, Although WCAG guidelines have been in existence for user testing, and automated evaluation tools, as well as over two decades, they are not restrictive and accessi- a thorough understanding of the impact on user experibility is often overlooked and not set as a high prior- ence. ity in web development projects. This study identified over 30 accessibility errors in product filters on leading fashion e-commerce websites in Finland. Most errors References were of medium severity but some were severe, afecting common product filters and potentially impacting [1] Introduction to web accessibility, https://www. user experience. These findings highlight the necessity w3.org/WAI/fundamentals/accessibility-intro/, Acof urgent enhancements, such as ensuring the keyboard cessed: 2023-7-15. navigability of all interactive elements and improving [2] N. Patvardhan, M. Ranade, K. Patvardhan, Web focus indicators. accessibility supporting diversity inclusion and ef
While this study primarily employed manual evalu- fective internet communication in e-commerce, for ation techniques, we recognize the potential value of sustainable social development, in: 2022 OPJU Interintegrating automated tools. These tools can eficiently national Technology Conference on Emerging Techidentify a range of accessibility issues, ofering a comple- nologies for Sustainable Development (OTCON), mentary perspective to manual assessments. 2023, pp. 1–5.
The upcoming EU legislation on web accessibility is [3] Disability, https://www.who.int/news-room/