=Paper=
{{Paper
|id=Vol-3776/paper04
|storemode=property
|title=Evaluating keyboard accessibility of product filters on fashion e-commerce websites
|pdfUrl=https://ceur-ws.org/Vol-3776/paper04.pdf
|volume=Vol-3776
|authors=Nelli Leinonen,Zheying Zhang,Timo Poranen
|dblpUrl=https://dblp.org/rec/conf/tktp/LeinonenZP24
}}
==Evaluating keyboard accessibility of product filters on fashion e-commerce websites==
https://ceur-ws.org/Vol-3776/paper04.pdf
Evaluating Keyboard Accessibility of Product Filters on
Fashion e-commerce Websites
Nelli Leinonen, Zheying Zhang and Timo Poranen
Tampere University, Finland
Abstract
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 e-
commerce 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
filters, not only to comply with the guidelines and regulations but also to improve the overall user experience.
Keywords
web accessibility, keyboard accessibility, fashion e-commerce
1. Introduction provements for e-commerce websites, with fashion e-
commerce websites cited as an example of poor acces-
Web accessibility is about ensuring that all people, re- sibility. The topic is current as the requirements for ac-
gardless of their abilities, can effectively 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 shop-
inclusivity can not be neglected. ping experience. If users have difficulty filtering products
While web accessibility discussions have traditionally effectively, they could easily abandon the site. It is es-
focused on public services, e.g. [4] and [5], recent re- sential to ensure the efficiency 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 re-
into 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?
TKTP 2024: Annual Doctoral Symposium of Computer Science, 10.- The rest of the paper is structured as follows. Section
11.6.2024 Vaasa, Finland
$ leinonen.nelli@gmail.com (N. Leinonen); zheying.zhang@tuni.fi
2 introduces the basics of web and keyboard accessibil-
(Z. Zhang); timo.poranen@tuni.fi (T. Poranen) ity. Section 3 details the evaluation method applied for
0000-0002-6205-4210 (Z. Zhang); 0000-0002-4638-0243 website assessment. Section 4 presents and discusses the
(T. Poranen) findings of the evaluation. Finally, Section 5 concludes
© 2024 Copyright for this paper by its authors. Use permitted under Creative Commons License
Attribution 4.0 International (CC BY 4.0).
CEUR
ceur-ws.org
Workshop ISSN 1613-0073
Proceedings
the work. This paper is based on the first author’s mas- keyboards or devices that replicate traditional keyboard
ter’s thesis research [14]. functions. Furthermore, some users prefer keyboard navi-
gation for its efficiency [17]. Table 1 summarizes common
keyboard interactions for keyboard navigation. These
2. Web and Keyboard Accessibility common interactions are adapted from keyboard testing
guidelines provided by WebAIM [17].
Web accessibility is the practice of designing and imple-
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
different 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 but-
an environment that does not allow listening to audio ton
Checkbox . Spacebar - check/uncheck the
[1].
checkbox
Web accessibility follows internationally recognized
Radio buttons . Spacebar - select the focused option
standards and local legislation. The Web Content Accessi- (of not selected)
bility Guidelines (WCAG), developed by the World Wide . Arrow keys - navigate between op-
Web 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 but-
four high-level principles: perceivable, operable, under- tons
standable, and robust. Each principle is further divided Select (dropdown) . Arrow keys - navigate between op-
into 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 col-
When a website fully meets the success criteria of some lapse
Dialog . Esc - close
level or provides a conforming alternate version, it con-
Slider . Arrow keys - increase or decrease
forms to the WCAG at that level. However, achieving
slider value
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) man-
dates accessibility standards within the EU, aligning Despite its critical importance, keyboard accessibil-
closely 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 manipu-
Keyboard 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 or-
nologies, 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 re-
paralysis 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 bot-
Figure 1: The focus elements on product filters are indicated as a black border.
tom. 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 affect
pose challenges, particularly for keyboard users with mo- meaning or operation, focusable components receive fo-
tor 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 oper-
active 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 effectiveness of website accessibility
rely on keyboard navigation, emphasizing the need for measures.
careful design and implementation to ensure that key-
board focus follows a logical and intuitive order on the
page. 3. Method and Data
This study aimed to deepen our understanding of the
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, el-
this guideline can be checked with four success criteria.
los.fi, shein.com, aboutyou.fi, and xxl.fi. As zalando-
Three 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 Fin-
of 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 accessibil-
ity issues that automated evaluations might overlook,
expert human judgment was crucial for accurately as-
sessing compliance with WCAG guidelines, ensuring a
thorough understanding of accessibility barriers within
e-commerce. Therefore, we followed the Web Accessibil-
ity 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
(Official Build) (arm64). Google Chrome was chosen be-
cause it is currently the most popular web browser. A
standard QWERTY keyboard was used when navigating Figure 2: Examples of product category, filters, and sort order
the websites. on a fashion e-commerce website in Finnish language.
3.1. Product Filters
ality while others are mainly cosmetic problems. For
The evaluation of product filters includes the product cat- this reason, every identified accessibility error is given
egory, product filters, and sort order selectors. Although a severity rating. Assigning severity ratings to issues
sort order selections serve a distinct purpose: organizing is also a way to mark their priority, so that the most
product listings to match user preferences rather than critical issues can be addressed first [24]. We adopted
narrowing down the product pool based on specific crite- the Severity Matrix by the Digital Accessibility Services
ria, they are categorized as product filters in this study, as (DAS) of Harvard University to rate between three levels
this functionality is particularly valuable when dealing of severity of accessibility issues, as below.
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 op-
tion is listed on the left side of the page, the sort order timal usage of the feature and may cause unnec-
dropdown 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.
differences in layout and implementation, the accessibil-
ity 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 cate-
often implemented as a horizontal bar or a left-hand ver- gorized into more detailed categories to better formulate
tical sidebar. The difference 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
some attributes while filtering sets hard boundaries that
4. Results and Discussion
limit the scope of the results. Both of these are relevant
for comfortable user experience and thus they are both
4.1. Accessibility Errors and Violations of
included in this evaluation. WCAG Criteria
The manual expert evaluation of the product filters of ten
3.2. Severity of Accessibility Issues e-commerce sites identified 34 distinct accessibility issues,
numbered as prefix-E*, as shown in Figure 3 and Figure
The accessibility errors of product filters vary in their 4. These issues were depicted in screenshots available at
severity: some errors prevent the usage of the function- [14].
Figure 3: Accessibility issues of the product filters of five fashion e-commerce websites.
These errors violate WCAG criteria 2.1.1 Keyboard 4.1.1. Highly severe accessibility issues
(Level A), 2.4.3 Focus Order (Level A), and 2.4.7 Focus
A highly severe accessibility issue can prevent a user from
Visible (Level AA), which hamper the operability and
using the feature. Several such issues were identified
navigability of the website. Specifically, focus indica-
when selecting among different product filters using the
tion problems occur on 80% of the sites, and 70% of the
keyboard navigation.
sites have filters that are not accessible by keyboard. In
The most prevalent issue is the unreachable element.
addition, other issues include duplicate focus areas, non-
The elements were completely bypassed during keyboard
intuitive navigation order, hidden elements, etc. which
navigation, never gaining focus. Consequently, every in-
are categorized in Table 2. Out of the 34 observed ac-
stance in this category violates the WCAG criterion “2.1.1
cessibility errors, 15 errors were highly severe, 18 were
Keyboard (Level A)”. As detailed in the description in
medium, and 1 was low in their severity.
Figure 5, a wide variety of elements, including menus of
filters (stockmann-E1, shein-E3, sokos-E2), sliders (ellos-
E4), dropdown menus (aboutyou-E1, aboutyou-E2), and
Figure 4: Accessibility issues of the product filters of another five fashion e-commerce websites.
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 ele-
these implementations. It is alarming that over half of ments are not fully navigatable via the keyboard, hinder-
the 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.
Table 2
Categorization of accessibility errors, their severity rating, and the WCAG criteria they violate. WCAG criteria: 2.1.1 Keyboard
(Level A), 2.4.3 Focus order (Level A), 2.4.7 Focus visible (Level AA).
Category # Errors Sev. WCAG
Level criteria
Unreachable element 7 stockmann-E1, ellos-E4, shein-E3, aboutyou-E1, aboutyou- 1 2.1.1
E2, xxl-E3, sokos-E2
Inoperable options 3 hm-E1, boozt-E2, shein-E2 1 2.1.1
Unscrollable elements 3 boozt-E1, ellos-E5, ellos-E6 1 2.1.1, 2.4.7
Stacking elements 1 zalando-E5 1 2.4.7
Non-functional button 1 zalando-E2 1
No focus indicator 11 zalando-E1, zalando-E6, uniqlo-E1, stockmann-E2, ellos- 2 2.4.7
E2, ellos-E3, shein-E1, aboutyou-E3, aboutyou-E6, xxl-E2,
sokos-E1
Unintuitive navigation 4 zalando-E4, hm-E3, ellos-E1, aboutyou-E4 2 2.4.3, 2.4.7
order
Unnecessary clicks 3 zalando-E3, hm-E2, xxl-E1 2
Broken style 1 aboutyou-E5 3
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 cat-
egory, 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 navi-
gating through an invisible list of items before reaching
Figure 6: Example of stacking elements: On zalando.fi, ele-
ments stack on top of each other and focus is invisible under
the next element (hm-E3, aboutyou-E4), and new ele-
all 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 identi-
related to element stacking, as shown in Figure 6 where
fied. 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 un-
keyboard 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 key-
element as a user navigates a page. It is particularly cru- board users to interact with the product filter. This im-
cial 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 accessi-
bility errors can hinder efficiency, amplify user frustra-
tion, 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
efficient online shopping experience.
4.3. Product Filters Need Further
Development for Accessibility
Figure 7: Example of unnecessary clicks: On hm.com, each The path to enhancing keyboard accessibility is depen-
list item with checkbox has two focus areas. dent on the specific nature of the accessibility error. The
identified errors in Figure 3 and Figure 4 can be trans-
formed 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 un-
criteria address this type of error. reachable elements, ensure that all interactive elements
and filter options are accessible via keyboard navigation.
4.2. Accessibility Errors Affect the Usage Elements that are scrollable with a mouse should also be
navigable using the keyboard. Buttons should function
of Common Product Filters
identically for both mouse and keyboard users. Addition-
Across 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, typ-
that 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. Reduc-
discussed 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 er-
keyboard, 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 efficiently. 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 accessi-
able, 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 affected 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 pos-
hibit accessibility concerns on a smaller scale, with issues itive user experience.
present in only three sites. Notably, category selection
Figure 8: Keyboard accessibility of common product filters of ten fashion e-commerce websites. “Yes” means that the filter is
accessible and usable by keyboard. “No” means that the filter is unaccessible and inoperable with the keyboard. The error
code related to the feature is in parentheses. Empty cells indicate that the filter is not implemented on the website.
5. Conclusion expected to drive significant improvements. Further re-
search 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 experi-
bility 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, affect-
ing 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/, Ac-
of 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 Inter-
integrating automated tools. These tools can efficiently national Technology Conference on Emerging Tech-
identify a range of accessibility issues, offering 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/
fact-sheets/detail/disability-and-health, Accessed: thesis, Tampere University, 82 pages, available at:
2023-4-9. https://trepo.tuni.fi/handle/10024/151714 (2023).
[4] M. Goodwin, D. Susar, A. Nietzio, M. Snaprud, C. S. [15] Web content accessibility guidelines (wcag) 2.0,
Jensen, Global web accessibility analysis of national https://www.w3.org/TR/WCAG20/, Accessed: 2023-
government portals and ministry web sites, Journal 7-15.
of Information Technology & Politics 8 (2011) 41– [16] Web content accessibility guidelines (wcag) 2.1,
67. https://www.w3.org/TR/WCAG21/, Accessed: 2023-
[5] Directive (EU) 2016/2102 of the European 7-15.
Parliament and of the Council of 26 October [17] Keyboard accessibility, https://webaim.org/
2016 on the Accessibility of the Websites and techniques/keyboard/, Accessed: 2023-7-15.
Mobile Applications of Public Sector Bod- [18] W. M. Watanabe, A. L. Dias, R. P. D. M. Fortes, Fona:
ies. OJ L 327, 2 December 2016. pp. 1–15., Quantitative metric to measure focus navigation on
.https://eur-lex.europa.eu/legal-content/EN/ rich internet applications, ACM Transactions on
TXT/PDF/?uri=OJ:L:2016:327:FULL, Accessed: the Web (TWEB) 9 (2015) 1–28.
2023-8-28. [19] B. Wentz, P. T. Jaeger, J. C. Bertot, Accessibility for
[6] T. D. Gilbertson, C. H. Machin, Guidelines, icons persons with disabilities and the inclusive future of
and marketable skills: an accessibility evaluation libraries, Emerald Group Publishing, 2015.
of 100 web development company homepages, in: [20] W. A. R. W. M. Isa, A. I. H. Suhaimi, N. Ariffrn, N. F.
Proceedings of the international cross-disciplinary Ishak, N. M. Ralim, Accessibility evaluation using
conference on web accessibility, 2012, pp. 1–4. web content accessibility guidelines (wcag) 2.0, in:
[7] P. Wheeler, D. Kreps, User testing is not a luxury, 2016 4th International Conference on User Science
Electronic Markets 18 (2008) 324–332. and Engineering (i-USEr), IEEE, 2016, pp. 1–4.
[8] W. M. Watanabe, R. J. Geraldo, R. P. d. M. Fortes, [21] Most popular categories for online pur-
Keyboard navigation mechanisms in widgets: an chases in finland as of march 2023,
investigation on ARIA’s implementations, Journal https://www.statista.com/forecasts/823270/
of Web Engineering (2015) 041–062. most-popular-categories-for-online-purchases-in-finland,
[9] P. Acosta-Vargas, B. Salvador-Acosta, L. Salvador- Accessed: 2023-8-15.
Ullauri, J. Jadán-Guerrero, Accessibility challenges [22] Usein kysytyt kysymykset, https://www.sokos.fi/
of e-commerce websites, PeerJ Computer Science 8 info/faq, Accessed: 2023-7-15.
(2022). [23] Website accessibility conformance evaluation
[10] A. Pascual-Almenara, T. Granollers-Saltiveri, Com- methodology (wcag-em) 1.0, https://www.w3.org/
bining two inspection methods: Usability heuris- TR/WCAG-EM/, Accessed: 2023-9-15.
tic evaluation and WCAG guidelines to assess e- [24] Digital Accessibility Services (DAS) of Harvard
commerce websites, in: Human-Computer Interac- University. Template for Reporting Accessibil-
tion: 7th Iberoamerican Workshop, HCI-COLLAB ity Issues, https://accessibility.huit.harvard.edu/
2021, Sao Paulo, Sept. 8–10, 2021, Springer, 2021, template-reporting-accessibility-issues, Accessed:
pp. 1–16. 2023-8-28.
[11] P. T. Chiou, A. S. Alotaibi, W. G. Halfond, Detecting [25] J. Sauer, A. Sonderegger, S. Schmutz, Usability, user
and localizing keyboard accessibility failures in web experience and accessibility: towards an integrative
applications, in: Proceedings of the 29th ACM model, Ergonomics 63 (2020) 1207–1220.
Joint Meeting on European Software Engineering
Conference and Symposium on the Foundations of
Software Engineering, 2021, pp. 855–867.
[12] Futurice ltd., https://futurice.com/, Accessed: 2024-
1-24.
[13] Directive (EU) 2019/882 of the European Par-
liament and of the Council of 17 April 2019
on the accessibility requirements for products
and services (Text with EEA relevance). 2019.
Official Journal of the European Union, L 151,
70–115, https://eur-lex.europa.eu/legal-content/
EN/TXT/PDF/?uri=OJ:L:2019:151:FULL, Accessed:
2023-8-28.
[14] N. Leinonen, Keyboard accessibility of product
filters on fashion e-commerce websites, Master’s