Comparing Web
Accessibility between
Major Retailers
and Novelties
for E-Commerce
MAIN FIELD: Informatics AUTHOR: Jinmeng Xu SUPERVISOR: Johan Kohlin
Postal address: Visiting address: Phone:
This final thesis has been carried out at the School of Engineering at Jönköping University within informatics. The authors are responsible for the presented opinions, conclusions and results.
Examiner: He Tan Supervisor: Johan Kohlin Scope: 15 hp
Abstract
Purpose –Comparing the accessibility of e-commerce for General Merchandise, between major retailers and novelties, in the conformance of web accessibility guidelines, and the implementation of rich internet applications specifications. So that to figure out whether the differences exist between them, if so, what are the differences, and analyzing upcoming e-commerce and established e-e-commerce.
Method – The descriptive and quantitative case studies were used to evaluated 45 websites respectively from major retailers and novelties in General Merchandise of e-commerce, where sample websites were selected from Alexa’s rank lists. Then the WAVE tool, Accessibility Quantitative Metric (WAQM), and Fona assessment were applied for analyzing cases for representing the accessibilities and answering the research questions of purpose.
Findings – ARIA specifications as a kind of technological solution really had positive functions on web accessibility when only focusing on accessibility guidelines, because the novelty websites with less ARIA attributes resulting in lower accessibility levels generally, even though there were also many other elements that can affect accessibility.
Implications – In the main branch of General Merchandise, the degree of web accessibility in major retailer websites was better than that in novelties, which means as far as e-commerce is concerned, the accessibility of mature websites that had been established for a long time was contemporary stronger than that of new websites with creative products.
Limitations – From the perspective of the sample, there were limitations in sample sources, size, websites languages, while in the technical aspect, the evaluation of dynamic contents just aims at keyboard navigation, and the tool of Fona assessment also had restrictions.
Keywords – Web accessibility, e-commerce, WCAG 2.0, ARIA specifications, automatic evaluation, General Merchandise, Web Accessibility Quantitative Metrics, Fona
Table of contents
Abstract ... ii
Table of contents ... iii
1
Introduction ... 1
1.1 BACKGROUND...1
1.2 PROBLEM STATEMENT ...1
1.3 PURPOSE AND RESEARCH QUESTIONS ...2
1.4 THE SCOPE AND DELIMITATIONS ...2
1.5 DISPOSITION ...3
2
Methodology ... 4
2.1 LINK BETWEEN RESEARCH QUESTIONS AND METHODS ...4
2.2 WORK PROCESS ...4
2.3 APPROACH ...5
2.4 DESIGN ...5
2.5 DATA COLLECTION ...5
2.6 DATA ANALYSIS...7
2.7 VALIDITY AND RELIABILITY ...8
3
Theoretical framework ... 9
3.1 LINK BETWEEN RESEARCH QUESTIONS AND THEORY ...9
3.2 WEB ACCESSIBILITY ...9 3.2.1 With Disability ...9 3.2.2 Without Disability ... 10 3.2.3 Components ... 10 3.2.4 Guidelines ... 11 3.3 WEB 2.0 ...12 3.3.1 RIA ... 12
3.3.2 Web Browsing Process ... 13
3.3.3 Contract Model ... 14 3.4 RELATED WORK ...15 3.5 ARIA ...15 3.5.1 Attributes ... 16 3.5.2 Widgets ... 16 3.5.3 Focus Management... 16
4
Empirical data ... 18
4.1 SAMPLE...18 4.2 WAVE ...18 4.3 FONA ...21
5
Analysis ... 24
5.1 RESEARCH QUESTION 1 ...24 5.2 RESEARCH QUESTION 2 ...24 5.3 RESEARCH QUESTION 3 ...246
Discussion and conclusion ... 25
6.1 FINDINGS ...25
6.2 IMPLICATIONS ...25
6.3 LIMITATIONS...25
6.4 CONCLUSIONS AND RECOMMENDATIONS ...26
6.5 FURTHER RESEARCH ...26
References ... 27
1
Introduction
1.1 Background
According to the report of World Health Organization (2018), there were over one billion people with some form of disabilities, which accounted for 15 percent of the world’s population. In order to provide equal opportunities to people with various disabilities and guarantee a basic human right in the United Nations Convention on the Rights of Persons with Disabilities (UN CRPD), it is important to make disabled users access information and communication technologies without barriers. So, the W3C Web Accessibility Initiative covering persons from industry, disability organizations, government, etc. released Web Content Accessibility Guidelines 2.0 (2008) to direct the accessibility of web content. There were four main principles as foundations: perceivable, operable, understandable, and robust. Based on these principles, twelve guidelines are developed. Following these guidelines, the web content would be accessible for as many users with disabilities including blindness and low vision, deafness and hearing loss, learning disabilities, cognitive limitations, and so on, as possible.
With the development of the web, Web 2.0 became a new trend for users to interact from 2006 (Gehtland et al.). Compared with the static contents, dynamic and complex contents provided a better user experience. But at the same time, this kind of complex behaviors hindered disabled users from accessing web content (Brown & Harper, 2011). Technically, the WAI group (2012) also introduced Accessible Rich Internet Applications (WAI-ARIA) specifications (W3C, 2017a) to add semantic data into HTML. WAI-ARIA can identify pre-defined behaviors, provide keyboard navigation strategies and so on, its specific attributes including roles, states and properties can define elements’ characteristics, functions and information. The goal is to make assistive technologies parse the accessibility API of rich internet applications easier.
1.2 Problem statement
Then there is a significant issue that whether existing websites have adequate accessibility for all kinds of users. In fact, there were many investigations to show that the accessibilities of numerous websites still were insufficient. For example, from the perspective of guidelines conformance objectively, only 23% met the requirement of WCAG level 1.0 at the research of UK e-government sites (Kuzma, 2010), and a low adoption rate of ARIA existed (Watanabe et al., 2014). Subjectively, Freire et al. (2008) conducted a survey on the accessibility’s awareness of web developers in Brazil to imply the lack of awareness. However, these researches overlooked technical aspects when evaluating, and few of them involved the conformance of ARIA specifications and how successful after fulfilled ARIA.
At the same time, e-commerce, online shopping websites, has become a more and more popular shopping way. From Statista Website (Baron, n.d.), the annual sales of the global e-commerce market have reached $3.5 billion by the end of 2019, which represented 14% of the global retail sales. This means increasingly online retail stores were effectively closed for users with web disabilities when they had insufficient accessibilities. Meanwhile, the population of web disabilities was not a small number. As an example, there were 35 million web disabled users in the US from the Disability Statistics 2016 Annual Report (Lewis, 2017). Thus, the accessibility of e-commerce is worth being noticed.
There is a wide range of online shopping formats. Categorized by Unique Selling Propositions (USPs), they are price formats, experimental shopping, merchandise-oriented shops, mass customization, and community-based. In these groups, merchandise-oriented shops in online retailing are the most common and significant types (Zentes et al., 2016b). Literally, the term of general merchandise is used to describe nonfood sectors. Compared with Grocery, Merchandise does not have the characteristic of perishability and high turnover rate (Zentes et al., 2016a). For example, eggs as a kind of food need to be bought at regular intervals like two days or one week, while the fridge belonged to Merchandise does not have to be purchased frequently.
Like brick-and-mortar stores, there are diverse companies retailing general merchandise online, such as Amazon, Walmart. Products in these major retailers widely select from a broad
number of categories. In fact, the websites of major retailers underwent countless iterations since their establishment, which made them experienced and accomplished. On the other hand, the original and statistical infrequent products with newness (Runco & Pritzker, 1999, p. 413) are also retailed online. These novelties websites of merchandise are selling creative objects like colorful lights, unique gifts, fake ID, and so on. Generally, they were not founded for a long time, but the strength of emerging cannot be underestimated.
1.3 Purpose and research questions
Drawing on the problem statement, it is evident that e-commerce’s accessibility of General Merchandise needs to be explored, especially involving guidelines and some technical details. Further, it is interesting to compare upcoming and established e-commerce by evaluating major retailers and novelties groups. And then to figure out whether the differences exist between them, if so, what are the differences, and what leads to them. Consequently, the purpose of this study:
Comparing the accessibility of e-commerce for General Merchandise, between major retailers and novelties, in the conformance of web accessibility guidelines, and the implementation of rich internet applications specifications.
To be fulfilled, the purpose has been broken down into three questions. Firstly, the overall accessibility of websites in these two categories should be investigated. WCAG 2.0 (W3C, 2008) as a set of guidelines against accessibility levels is applied, since it defined best practice, and it is the most universal (Lazar, 2019). Hence, the study’s first research question is:
[1] What are the levels of accessibility against WCAG 2.0 level A for 45 websites respectively from major retailers and novelties?
Then the adoption rate of WAI-ARIA solutions needs to be known because ARIA specifications provided a kind of technical solution to improve the RIAs accessibility (W3C, 2012). So that the influence of adopting ARIA solutions can be explored when contacting with RQ1 results. Hence, the second research question is:
[2] Which websites did use WAI-ARIA specifications in 45 websites respectively from major retailers and novelties?
Nevertheless, not all implementations of ARIA are correct, so that the correctness should be verified. In this work, Keyboard Navigation as an example to test the accessibility of HTML built-in attributes and ARIA attributes. Because it as a basic requirement is referred by many guidelines. For instance, item 2.1 of the WCAG 2.0 draft defined that Make all functionality available from a keyboard (W3C, 2008). As for technical standards in Section 508 (US Federal Register, 2000), Checkpoint §1194.21a said When software is designed to run on a system that has a keyboard, product functions shall be executable from a keyboard where the function itself or performing a function can be discerned textually. In fact, it is critical not only for blind users but also for physically disabled users who cannot work efficiently with the mouse, such as lack of control of hands and arms, tremor, or lack of dexterity in hands and fingers (Disability Rights Commission, 2004). Hence, one mandatory requirement, Focus Management, makes web applications must create alternative keyboard interaction scenarios to access every kind of functionalities. Then, the third research question is:
[3] What are the levels of Keyboard Navigation accessibility for 45 websites respectively from major retailers and novelties?
1.4 The scope and delimitations
There are many classifications of websites that can be evaluated, such as Games, News, Non-profit organizations, and so on. However, this thesis just focused on e-commerce, namely online shopping websites. And, the category of e-commerce was limited to General Merchandise as well, by the way, other shopping categories like food, flowers, jewelry would not be involved. Another thing with it is that all website resources came from Alexa’s way and standard of
categorizing e-commerce websites1, previously definitions of categories are just in general. And then, when checking the accessibility, WCAG 2.0 guidelines was applied, as well as only the implementation of ARIA was considered in the technical aspect.
WAI's coverage of web accessibility includes Web Content, Authoring Tools, and User Agents. In particular, Authoring Tools are software and services for authors such as web developers, designers, and writers. W3C (2015a) released Authoring Tool Accessibility Guidelines (ATAG) to make people with disabilities create content. Actually, there are marketplaces or online shopping centers like Taobao, allowed users to become dealers to present and sell goods. But this kind of accessibility would not be referred to in this work. Similarly, User Agent Accessibility Guidelines (UAAG) (W3C, 2015b) advise User Agents to be accessible to people with any form of impairment. And User Agents rendering web content, such as browsers, media players, would influence web content accessibility as well, however, this investigation would not consider this factor. In a word, the scope of this work was on the web content accessibility.
1.5 Disposition
Chapter 1 is Introduction part to present the background and problem statement of accessibility and then revealing the core purpose and goal of the thesis. To guarantee the aim can be answered, research questions are set for the final contribution. Moreover, the scope and delimitation are declared to avoid deviation.
Chapter 2 called Methodology aims to describe the reason for the chosen data collection and analysis methods, and details about how the investigation has been performed including sample selections, research methods, and validity specifically.
Chapter 3, Theoretical Framework, is to explain the relationship between academic theories and research questions. In addition, relative concepts and mechanisms about web accessibility are introduced, like accessibility guidelines, accessibility API, and assistive technologies. Empirical Research is in Chapter 4. The major target in this section is to record the results of the research, in specific data collected for each research question would be presented. Together with different tables to describe the specific quantitative data.
Chapter 5, Analysis. The results from Empirical Research are analyzed according to previously referred data analysis methods to answer research questions individually so that establishing a basement for further discussion.
Chapter 6, Discussion and Conclusion, contains discussing results and implications based on former parts. In addition, some limitations of the research process are also talked about. Lastly, the conclusions of the entire research and further research directions are followed.
2
Methodology
2.1 Link between research questions and methods
The case study method is a design of gathering scientific data in different disciplines (Mills, Durepos, & Wiebe, 2010, p. 66). Typically, the process is that researchers deeply analyze a case, often a program, activity, process, or one or more cases in many fields, especially evaluation. In other words, collecting the detailed information of a case or cases by different kinds of data collection procedures, and then analyzing the collected data by statistical analysis process. According to Yin (2017), there are three conditions resulting in the usage of case studies. They are “(a) the form of research question posed, (b) the control a researcher has over actual behavioral events, and (c) the degree of focus on contemporary as opposed to entirely historical events” (pp. 39–44). In fact, just the first two would help this work to decide the case study as a methodology.
Firstly, the form of research questions is one of the conditions for selecting. Three questions are about the objective issues of accessibility levels and Boolean logic, so the data for them definitely should be tested by particular measurements without participants. However, survey researches usually recruit respondents answering the questions of questionnaires or structured interviews for collecting data, including longitudinal or cross-sectional (Fowler, 2009). Apparently, the survey method is not fit because of subjective human participation.
Then another factor is the control of research processes. In fact, the experiment is widely accepted as a methodology for controlling variables. MacKenzie (2013) declared that experiential researches seek to determine if a specific treatment influences an outcome. Generally, the experiments always test the hypothesis that is the relationship between dependent variables and independent variables. It is evident that there is no direct and indeed relationships between categories and web accessibilities although the difference between major retailers and novelties websites may exist. Therefore, the experiment method failed as well. In conclusion, the case study is the most appropriate method for evaluating web accessibilities. The case study approach is applied to investigate a contemporary problem within its real-life context, and the data can be longitudinal and cross-sectional. Therefore, the case study can be seen as a strategy for using either qualitative or quantitative data (Mills, Durepos, & Wiebe, 2010, pp. 207-208). The aim of qualitative research works is always an in-depth analysis of relative research points, usually for a special phenomenon or problem by exploring a unique case. While the quantitative projects are consistently executed to generalize views of relevant issues from multiple cases. Then it is not surprising that the quantitative approach is more suitable for checking the accessibility of multiple websites from major retailers and novelties. Nevertheless, the explicit case study procedure should be further defined after.
In fact, there are three main types from the perspective of epistemological status: exploratory, explanatory, and descriptive (Scholz & Tietje, 2011). Specifically, exploratory case studies are frequently aiming to develop hypotheses or theories by gaining an insight into the case’s structures, at the same time, explanatory case studies focus on causal relationships. Different from them, descriptive case studies often use a reference theory or model to direct data collection or case description. In addition, multiple-cases studies generally choose descriptive case studies to formulate common characteristics. Consequently, the descriptive case study method is selected for this investigation.
2.2 Work process
First of the overall process, picking the web accessibility as a central topic, and then narrowing down the scope of entire work. After the scope and delimitation are explicit, the main purpose and research questions can be precisely formulated to lead the following steps. Next, the literature review is conducted to comprehend the relevant academic background and reveal the reference theory of measurement and analysis. Once the collection methods are defined, empirical researches be implemented to gather practical data. In order to the final contribution, gathered data needs to be analyzed and discussed. Though the discussion of the raw data, the conclusion would be manifested. Ultimately, the whole work is completed and closed.
Among them, the empirical data collecting process is: firstly, to retrieve the lists of websites from Alexa’s Rank List, and then filtering these websites according to accessing permission and domain name (explain later) to choose cases; when all samples of two groups are chosen, cases would be scanned by WAVE tool to fetch all required raw data, then using these numbers to calculate accessibility level values by WAQM model; finally, implementing a kind of terminal running files to capture Fona values for presenting Keyboard Navigation accessibility level.
2.3 Approach
According to Bryman & Bell (2015, p. 27), research approaches can be divided into three types: deductive, inductive, and abductive. Specifically, deductive researches start with testing the correctness of existing hypotheses, whereas, abductive researches contribute to explain the “surprising facts” or “puzzle”. Only the inductive research approach that explores the emergence of phenomena and patterns is appropriate for testing the web accessibility of e-commerce. At the same time, Saunders et al. (2016) pointed out that from a logical degree, the inductive study is to generate untested conclusions instead of true or testable conclusions. Besides, in terms of generalizability, inductive approaches often generalize from specific to the general, which is matched that the goal of this work is to discover the general situation of web accessibility for e-commerce from some samples.
2.4 Design
Descriptive research is aimed at casting light on the issues and then attempt to describe and identify the current situation (Ethridge, 2004, p. 24). Here, the custom descriptive case study is designed for consequently conducting. To compare the websites between major retailers and novelties, the samples should be selected from categories as cases for investigating, because obviously it is not possible to test all websites. Limited by realistic factors like time, efficiency, researchers, the sample size is set into 45, which means there are 45 websites individually selected from each of the categories.
In contrast to survey research, case study research samples are ideally picked strategically rather than randomly. The samples of this study are extracted from Alexa lists. The reason is that Alexa websites used the Traffic Rank Technology combining unique visitors and pageviews to rank lists of shopping websites covering the global range2, which results that Alexa’s rank lists are the most representative samples of websites on the web. Thus, the top 45 websites that came from the Alexa list are the case study samples. And another thing to be declared is the sample unit, it is the homepage or main page of the website.
In addition, there are two criteria for checking valid links. In other words, the sample unit that fits the following situation would be skipped. The first situation is the websites that cannot be visited, concretely speaking, 403/404, or other error status code is returned when accessing the URL. Then another is about the domain name. For example, if the website domain name is as same as the previously existed one, the case would be judged invalid. Since the same domain name means the consistent coding style, so it would lead to negative results when one domain name takes up more than one case.
2.5 Data collection
The part of data collection is mainly evaluating the content of the cases for answering three research questions. Evaluating web accessibility includes three central ways: automated testing, manual inspection, and user testing (Abascal et al., 2019). User testing is based on empirical usability, and it needs to recruit participants, which means it is difficult to implement in this study. On the other hand, manual inspections are always implemented by expert human evaluators with specific academic abilities, like Barrier Walkthrough (Yesilada et al., 2011), so that conducting it with obstacles as well. Consequently, automatically analyzing the page code
2https://www.alexa.com/topsites/category/Top/Shopping/General_Merchandise
https://www.alexa.com/topsites/category/Top/Shopping/General_Merchandise/Major_Retailers https://www.alexa.com/topsites/category/Top/Shopping/General_Merchandise/Novelties
to evaluate accessibility is the most appropriate way with less time-consuming. Literally, there are many automated evaluation tools3, among them, WAVE4 is an acceptable tool (Kasday, 2000) because it was applied by various investigations, such as academic websites (Adepoju & Shehu, 2014), e-government (Lujan-Mora et al., 2014), and university websites (Ahmi & Mohamad, 2016).
WAVE is available as a website and as an extension for the Chrome browser, it provides visual feedback by injecting icons and indicators on the webpage. The numbers of errors, and so on show in the left column, and details contain against references. However actually, the raw number directly from the WAVE tool cannot be compared with each other. Since the larger website, the more errors naturally, it is not fair to straight weigh. Afterward, the quantitative metric is essential introduced to display the levels of accessibility. Fortunately, Vigo & Brajnik (2011) explored the currently main automatic web accessibility metrics like the Page Measure (PM), the Web Accessibility Barrier (WAB), the Unified Web Evaluation Methodology (UWEM), and so on, then he suggested that Web Accessibility Quantitative Metric (WAQM) is the more suitable and precise measurement in all scenarios.
In fact, the calculating process of WAQM and parameter application methods are specifically studied by Vigo et al. (2007) and Vigo et al. (2009). Here would concisely explain it. The hyperbole of WAQM is approximated by two customizable straight lines (see figure 1). Firstly, using the numbers of errors and potential errors (potential errors are all detected elements) to calculate the failure rate and compare with x’. If it is less than the point x’, the accessibility level will be calculated using S line; otherwise, V line is used. In this scenario for ordinary values, parameters a=20, b=0.3 are enough to apply. These values of WAQM are collected for RQ 1.
𝐹𝑅 = 𝑟𝑒𝑎𝑙 𝑒𝑟𝑟𝑜𝑟𝑠 𝑝𝑜𝑡𝑒𝑛𝑡𝑖𝑎𝑙 𝑒𝑟𝑟𝑜𝑟𝑠 𝑥′= 𝑎−100 𝑎−100𝑏 𝑆 = 100 − 𝐹𝑅 × 100 𝑏 𝑉 = 𝑎 − 𝑎 × 𝐹𝑅
x’ point calculation S line formula V line formula Figure 1 WAQM hyperbole
In addition, the WAVE tool also can identify the ARIA attributes amount. So, in order to know the ARIA specifications whether used, just checking the number whether greater than 0. In the end, counting the number of websites used ARIA solutions to answer RQ 2.
Ultimately, the goal of the last question is to measure the Keyboard Navigation accessibility covering widgets used ARIA attributes. In other words, all elements interacted with the mouse need to be focused by keyboards. To begin with a manual check by Tab key to check a website whether supporting keyboard navigation. If it supports, the next step is automatic evaluation. In fact, most current automated tools just validating static contents (de Mattos Fortes et al., 2019, p. 388), even some tools like AChecker5 directly testing source codes.
3https://www.w3.org/WAI/ER/tools/ 4https://wave.webaim.org/
But at the same time, Fernandes et al. (2011) supposed that Evaluating Web content in the browser provides more accurate and more in-depth analysis of its accessibility, by analyzing the DOM structures between Command line and Browser environments in 82 websites. Furthermore, Fernandes et al. (2013) evaluated the accessibility of Clickable elements from three perspectives: Before Browser Processing, After Browser Processing, and After Browser and Interaction Processing, which indicated that Evaluating Web content that considers fully processed RIA states will provide different accessibility evaluation outcomes. In other words, it is better to evaluate the accessibility after processing browser and interaction simulators. Similar with this mechanism, Abu Doush et al. (2013) designed an RIA accessibility evaluation tool for dynamic content against ARIA specifications, the components including RIA Events Controller (inspect input triggers), Web Robot (generate input trigger), WAI-ARIA Specifications, Evaluators, and Results Handler (produce summary reports). Unfortunately, this conceptual framework is not applied physically. However, among them, widget identification is explored by some studies. For instance, Chen et al. (2012) developed a novel method for differently identifying Slideshow and Carousels, based on tell-signs6. And, Antonelli et al., (2018) and Watanabe & de Mattos Fortes (2016) also developed typical methods for identifying the Drop-down Menu widgets of ARIA. But the main restriction is that these patterns are only aimed at identification instead of the entire evaluation, apart from the limited widgets types and uncertain precision.
Watanabe et al. (2015b) developed a method of using acceptance tests to validate ARIA requirements in widgets from the end-user’s perspective. This seems very suitable with this work, but the essential constraint is that acceptance tests only can evaluate widgets with ARIA role attributes like Tab, Tab panel and Tab list, instead, it would not validate the widgets without pre-defined interaction model, which would have a great negative influence on the final results. Fortunately, a quantitative metric for Focus Navigation developed by Watanabe et al. (2015a) is valid for non-ARIA attributes as well. It is called Fona, Focus Navigation assessment. The metric’s formula is 𝐹𝑜𝑛𝑎 =∑ min (𝑇𝐼𝑖 𝑖 + 𝑅𝑖 ,1)
𝐼 , 𝑖𝑓 𝐼 > 0. Where I is the number of mouse event
listeners, Ti is a decimal value that indicates if the mouse event listener i is inserted in the tab order, and Ri indicates if i has a role attribute. For example, if a mouse event listener has an order number or an ARIA role attribute, it would be seen as accessible. The metric’s value is the ratio of the accessible and total number of mouse event listeners and it ranges from 0 to 1 (100%). In addition, they also developed a tool7 that draws support from CasperJS8 to calculate values. As for CasperJS8, it based on PhantomJS9 can test and navigate scripts with the simulations of the browser and interaction. Hence, this tool would be used for collecting the data of cases for RQ 3.
2.6 Data analysis
Depending on the comparison purpose, the method of statistical analysis is the most relevant for quantitative data. Particularly, there are two types of statistical analysis, descriptive and inferential (Creswell, 2014). Instead of inferring or rejecting a hypothesis, the goal of this thesis is to describe the situation of accessibility, hence descriptive statistics is the best choice. In fact, descriptive statistics contain four essential aspects, namely Measurements of Central Tendency, Measurements of Variability, Measurements of Relative Distortion, and Measurements of Concentration (Elst, 2019). But, measurements of relative distortion and concentration do not fit this study too much.
Measurements of central tendency in descriptive statistics intend to deliver a notion of “middle” or “center” (Elst, 2019). Aiming to compare the average levels between major retailers and novelties for RQ1 and RQ3, the mean of cases is the first position for analyzing. Moreover, it is
6 “Tell-signs are the attributes or properties of a widget, or its component parts, that indicate the
presence of that widget on a page. The term originates from hunting, where a tell-sign (e.g., tracks) indicates the presence of the quarry.” (Chen et al., 2012, p.74).
7http://github.com/watinha/tabindex-counter 8http://casperjs.org/
actually not enough to stands for the overall location, then a concept of the distribution called measurements of variability or dispersion is necessary to be introduced. Definitely, it contains the range, interquartile range, and standard deviation, these terms can explain the data spread more accurately than only mean. Literally, the range is maximum value reduced by minimum value, and interquartile is the third quantile reduced by the first quantile. As a matter of fact, these variables would contribute to the display of the boxplot picture, and this kind of graph can present the distribution of values intuitively. Except for these, the standard deviation is the average difference of each score to the mean, and the positive square root of the sample variance technically.
Variables are classified as discrete or continuous, furthermore, discrete variables are divided into two types, namely nominal and ordinal (Larson, 2006). Data collecting from RQ1 and RQ3 are ordinal variables because there is no relationship between values, and the value ranges from 0 to 100%. Therefore, the above statistical analysis methods are for the data of RQ1 and RQ3. In contrast, the variables from RQ2 belong to nominal. The reason is that the value indeed is “has” or “none”, which like binary. Following the viewpoint from Fisher & Marshall (2009), the mode in the measurement of central tendency, and frequency distribution in the measurement of dispersion are the best way to analyze this kind of data. So, they would be used to record the number of websites used ARIA attributes.
2.7 Validity and reliability
According to Yin (2017, pp. 78–83), there are four tests as criteria for judging the quality of case study researches, Construct Validity, Internal Validity, External Validity, and Reliability. Then the validity and reliability of this work would be confirmed in this way. Firstly, the requirements of construct validity are to make sure the correctness of operational measurements. In other words, the theories and references for collecting data methods are convincing enough to prove researching concepts.
Vigo & Brajnik (2011) compared seven main accessibility metrics by analyzing 1543 pages from validity, reliability, adequacy, sensitivity and complexity aspects to verify the performance of WAQM, at the same time, Vigo et al. (2009) investigated approximately 1400 pages to verify parameters without tool dependence. In addition, Watanabe et al. (2015a) compared results between examples fulfilled Focus Navigation and ARIA requirements from iCITA10, and Alexa’s most popular websites11 to validate Focus Navigation assessment. So, construct validity is verified.
Afterward, the internal validity is to eliminate interference when establishing a causal relationship, so descriptive case studies do not have to consider it. As for the external validity, it is to demonstrate the generalization from sample cases to population. In fact, the criteria for sample selection are internet traffic representing the popularity of websites, so samples are pretty typical. Besides this, measurements of central tendency in data analysis also contribute to statistical generalization.
Ultimately, reliability implied that the results of the research would not be changed when conducting the instrument more than one time. In other words, the process of gathering data cannot be associated with subjective issues from researchers. Actually, the research methods have been performed as explicitly as possible, and there is a narrow space for investigators to involve personal bias. In addition, unambiguous and comprehensive calculating steps also can minimize deviations.
10http://test.cita.illinois.edu/aria/ 11http://www.alexa.com/topsites
3
Theoretical framework
3.1 Link between research questions and theory
This part provides the theoretical foundation for exploring the purpose and answering the research questions. Firstly, to give an academic background to RQ 1 about web accessibility, section 3.2 is set for describing web accessibility in detail, which contains the meaning for users with disabilities and without, and the items of WCAG 2.0.
Then figuring out what is Web 2.0, and the mechanism of the web browsing process are a critical step for applying ARIA specifications, so section 3.3 is used to briefly introduce the basic factors such as JavaScript, DOM, AJAX, and so on. In addition, the contract model that describes these factors on how to influence disabled users is also included. Afterward, the related work about peer researches is presented in Section 3.4 as well.
Finally, the last part focuses on ARIA specifications for RQ 2 & 3. Section 3.5 begins with fundamental attributes and widgets of ARIA, where Drop-down menu would be as an example for explaining the implementations of widgets. In addition, focus management and Fona mechanism are the final parts of this section for empirical data collection of RQ 3.
3.2 Web Accessibility
According to the definition of W3C (2019), basically the web accessibility means no matter users with disabilities or without both can use the web, in other words, the things around the web like websites, tools, and technologies are designed for as many users as possible. Oppositely, inadequate web accessibility is to force disabled users away from the web. As a matter of fact, this would deprive the basic human rights in the United Nations Convention (2006) on the Rights of Persons with Disabilities (CRPD) to access information or technologies.
With the development of technologies, the web gradually replaced traditional media like newspapers, TV, radio, and so on. Specifically, time spent per day with digital media is increasing from 2011 to 2018 in the U.S. while that with traditional media is decreasing, up to 2018 they are almost equal, and digital media will exceed traditional media according to prediction (Watson, 2019). On the other hand, advertisers will decline traditional spending from $114.84 billion in 2018 to $104.32 billion in 2021, during the same period, ascend digital spending from $108.64 billion to $172.29 billion (Fitzgerald, 2019). As can be seen, the connection between the web and daily life is increasingly closer. For example, many services of education or government are provided by websites. In a word, the usage of disabled users on the web cannot be ignored, they own equal opportunities to get web convenience.
Meanwhile, Tim Berners-Lee, W3C Director and inventor of the World Wide Web, said “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect” (W3C, 2019). Thus, “Design for All” is the core of web accessibility, which means as long as the information presents on the screen, it must be parsed by any kind of technology, it also called “accessible Web design”, or “universal design” (Brophy & Craven, 2007). Actually, good accessibility has a positive influence on people with disabilities, and it is also beneficial for users without. Furthermore, these circumstances are explained following.
3.2.1
With Disability
According to the classification of W3C (2019), disabilities that would result in the negative influence on accessing the web includes the aspects of auditory, cognitive, neurological, physical, speech, visual. The one main goal of web accessibility is to help these groups members retrieve the information from the internet. Begin with deafness and hearing loss, deaf or hard of hearing individuals cannot communicate with others, so there are serious problems when interacting with interfaces. Although some of them would wear hearing aids, the web also needs to provide some interaction ways like captions for videos, sign language for titles, etc. And Ladd (2005) encapsulated social forces into three models: medical, social, cultural to support the growth of assistive technologies for hearing impairment.
Next, cognitive and learning impairments are extremely various because of the complexity of human cognitive competence, which results in failing to understand the total information on the web. Alternatively, friendly interaction models, configurable presentations, and understandable information forms can make them access the web easier (Seeman & Lewis, 2019). On the other hand, a common kind of disability is physical impairments. Currently, the user depends on devices accessing the web, so physical actions such as focusing on a target by a mouse or trackpad, typing text by keyboards are necessary. However, people with physical disabilities are restricted to play expected actions when operating devices. The situations include but not limited to partial or complete paralysis, muscle weakness, or loss of control (Trewin, 2019). Instead, the 3D touch technique of iOS 1312 and the voice controller of Siri13 are greatly acceptable approaches to skip physical movements.
In addition, visual disabilities are not only used to describe totally blind, but also visually functional defects, such as visual acuity, contrast sensitivity, and field of view (Barreto & Hollier, 2019). From the perspective of improving accessibility, it is not uncommon for blind users to capture information through other sensory ways, like auditory or tactile channels. For example, JAWS14, Job Access With Speech, is a kind of screen reader, it provides speech or braille output by parsing or simplifying the resource scripts. And Supalo & Mallouk (2007) also explored the degree of independence and accessibility in the JAWS tool for blind students rather than merely commercial sides. Above disabilities just some central categories for web accessibility, nevertheless, the advantage of accessibility is not limited for users with disabilities. Then more profits of the larger range are followed.
3.2.2
Without Disability
Consistent with the claim of Henry (2006), there are four groups without disabilities that are beneficial from web accessibility, including older, new users, people with low literacy and low-bandwidth connections as well. The first point, generally the older people, the worse the functional degradation. To be more specific the abilities of vision, hearing, dexterity, and memory are weakening and declining. And at the same time, the population aged 65 and over has reached 9% in 2019 and would possibly increase to 16% in 2050 globally according to the data analysis of the United Nations (n.d.), which results in that the elderly field is worth paying more attention.
Then when people hold low Literacy or don not obtain fluent in one language, well-designed websites can afford help for them. And in the same way for new users. For example, clear and consistent design, navigation, and links can make new users familiar with fresh things swiftly. Except for the conditions of users themselves, the objective situations, like rural lagging technologies, would bother users browsing images or videos. Thus, alternative texts are useful, when files with relatively large memories so that traffics cannot load or support. Moreover, all ordinary users also can receive various availabilities from web accessibility.
Users without disabilities can customize the actions according to preferences such as, history, keyboard shortcuts, gestures, which can improve the usability and flexibility for operating the web. These are the benefits for individuals, on the other hand, there are two major profits of web accessibility for the business perspective (Henry, 2006). From the technical aspect, web content with sufficient accessibilities can be allowed by different configurations no matter software or hardware, and maintenance time and server load can be reduced as well. Meanwhile, Search Engine Optimization and the frequency of usage can be enhanced on the financial side.
3.2.3
Components
Obviously, the essential components of web accessibility are significant to recognize. In general, components can be divided into two parts, one is for developers who operate authoring tools
12https://www.apple.com/ios/ios-13/ 13https://www.apple.com/siri/
and evaluation tools to compose or test contents’ accessibility for maintenance or advancement. While, another is for users who read and interact with content through browsers, media players, assistive technologies, and so on. The relationship is presented in figure 2 (W3C, 2018), as shown, these seven components consist of web accessibility, they are contents, user agents, assistive technologies, users, developers, authoring tools, evaluation tools.
Normally, web content is used to explain all information on a web page or web application. On the users’ view, the contents are just displayed things like text, images, videos, forms, and so on. Besides, the embed properties, such as colors, text sizes, layouts that have an influence on user experience and impression are the sections of contents as well. However, the codes or markups are also seen as web content from developers’ view, because they decide the web page structures and information presented ways, even directly control the access level to some extent.
Figure 2 Components Relationship
3.2.4
Guidelines
Web accessibility relies on these components working together, so W3C (2008, 2015b, 2015a) brought the technical and human component considerations together to release Web Content Accessibility Guideline (WCAG) 2.0, User Agent Accessibility Guidelines (UAAG) 2.0, and Authoring Tool Accessibility Guidelines (ATAG) 2.0 for guiding accessibility from contents, user agents, authoring tools three aspects. However, only the content aspect is focused due to the scope. Apparently, although there are other regional and national guidelines, such as Section 508 (US Federal Register, 2000), Equality Act 2010 (UK Legislation, 2010), WCAG 2.0 is the universal used one.
WCAG 2.0 is used quite widely because it covering broad issues and can make websites access as many as possible users, but this does not mean this set of guidelines can cover all types, degrees, and situations. Moving to the guidelines itself, it is based on four principles, they are perceivable, operable, understandable, and robust, and will be explained in detail later. And then, 12 guidelines are formulated according to these principle foundations. In fact, these guidelines just provide the framework and objectives for developers to comprehend success criteria and apply authoring tools better, rather than are testable. As for success criteria, it is testable in each guideline for evaluating. Aiming to different targets and conditions, three levels A (lowest), AA, and AAA (highest) are defined. Actually, level A is used in this study, the following are four principles.
The first principle perceivable is “Information and user interface components must be presentable to users in ways they can perceive15”. And there are four guidelines. Starting with alternative texts for non-text content, moreover non-text content cannot be transfer into other forms unless alternative texts are used. Apart from traditional content forms, the time-based multiple media are also required alternatives that can be prerecorded or live captions. Although alternatives are important ways, contents should be presented in different ways initially as well, so that the overall structures can be perceived easily. Lastly, the foreground should be differentiated from the background without difficulty, no matter for colors or audios.
Then the next principle operable is “User interface components and navigation must be operable16”. Initially, all functionalities must be interacted by a keyboard for users who cannot 15https://www.w3.org/TR/WCAG20/#perceivable
use the mouse. Secondly, users should be given enough time to read and use content, for example, pause keys, scroll bars, limit adjustments are able to be utilized. Then thirdly, contents including animations, transitions cannot cause known risks, like discomfort and physical reactions. At last, available navigation ways should be supplied, which is making users feel free when they find content and determine where they are. Both the hierarchical structures and designed search functions, even the consistent interfaces. This guideline can be seen as well-structured information architecture.
Thirdly, the principle understandable says, “Information and the operation of user interface must be understandable17”. The first one in this principle suggests that the content authors should make sure as much as possible people simple to read and understand, and avoid using some obscure and uncommon words. Afterward, it is vital to keep interfaces or appearance consistent and not violate users’ preferences so that the majority of ways are predictable. Eventually, input assistance is a requirement to reduce and prevent mistakes or invalid input. This can be presented on the hints of placeholders, and recall, history functionalities. Ultimately, the last principle robust18 is to desire the contents compatible, so that a wide variety of user agents, assistive technologies can compile them without too many hinders.
3.3 Web 2.0
The term “Web 2.0” was coined comprehensively by O’Reilly (2007). In contrast to static traditional web applications, Web 1.0, Web 2.0 applications are dynamic and users are treated as co-developers on the web pages (Jazayeri, 2007) so that it was referred to the next generation web. Furthermore, O’Reilly (2007) supposed that Web 2.0 stands for lightweight programming models and rich user experience. In detail, compared with conventional SOAP (Simple Object Access Protocol) web service stack, the lightweight REST (Representational State Transfer) approach integrating AJAX, etc. technologies can enable asynchronous Web page updates. If defined Web 2.0 from both technologies and functionalities aspects, Treese (2006) assumed that it contained interactivity, social networking, tagging, and web services, four characteristics. Firstly, interactivity mostly means some resources can be fetched later in the background, rather than the requests from users. Next, numerous social media were established based on well-known social network systems for the community purpose. Then the third one, tagging, objectively is a kind of keyword of data objects. Information can be searched by tags, instead of hierarchical structures. Eventually, “web services” is an empirical concept because the web provided functionalities in place of only displaying pages.
3.3.1
RIA
Clearly, Rich Internet Applications (RIA) is the essential component of Web 2.0. In order to make interactive multimedia available, RIA technology is the best appropriate web distribution paradigm (Linaje et al., 2007). Unsimilar with traditional aggregation to load media from various sites, RIAs depending on REST APIs can mix data by scripts, and dynamic content can reorganize the layout or information according to users’ preferences (Cooper, 2007). So, the usability of rich user interfaces also was improved because of better management, distribution, and maintenance (Pilgrim, 2008). In fact, AJAX-based on the REST APIs mainly contributed to the RIA technologies.
Contemporarily, the web has become an enormous medium for the services of sharing and retrieving data, rather than large-scale hypermedia for releasing documents (Pautasso, 2013). Then one of transport layer protocols, TCP/IP suite, keeps the port 80 running HyperText Transfer Protocol (HTTP)19. Actually, HTTP is an application layer protocol for data communication and the fundamental for achieving REST APIs. In particular, REST APIs stands for REpresentational State Transfer Application Programming Interfaces and is an architectural style for fetching and creating resources. And there are six constraints when correctly applying this framework, that is to say, Uniform Interface, Stateless, Cacheable, Client-Server, Layered System, Code on Demand (Surwase, 2016).
17https://www.w3.org/TR/WCAG20/#understandable 18https://www.w3.org/TR/WCAG20/#robust
In addition, the guides of how to describe resources and to use operations are provided when the API is called from the HTTP client-side or say that from the HTTP request of JavaScript codes in the web browser (Surwase, 2016). On one hand, the URL of each request evidently is for identifying or describing the REST API resource, the first part is the root path that is the domain name, sometimes add the main page’s path, and then is accessing resource path. Besides, the array of query parameters also can be passed in the URL and some other confidential parameters can be encrypted in the HTTP request body. On the other hand, the operations of REST APIs are HTTP request methods, mostly GET, POST.
AJAX stands for Asynchronous JavaScript and XML, enables update partial the web pages content without refreshing the whole page (Zhang et al., 2007). Combined with previously mentioned REST API, XmlHttpRequest (XHR) can be created and change data format by JavaScript over the API connection. The “asynchronous” means waiting for the response from XmlHttpRequest and then JavaScript receives and transfers the return data to update DOM (Gibson, 2007). One decade ago, the eXtended Markup Language (XML) is the most common transmission format, but now, the JavaScript Object Notation (JSON)20 is a kind of lightweight data-interchange format and is more popular. The reason is that it is not difficult for developers to understand and for compilers to create.
3.3.2
Web Browsing Process
Based on web interaction patterns (Kern, 2008), Fernandes (2013) summarized the web page loading process see Figure 3. The procedure can be generally divided into two central parts. One is the Request, the browser sends the request for specific required resources (e.g. HTML, CSS, JS, images, etc.) to the server when the user types the particular URL. And the other is Parsing, the resources responded from the server are parsed into the HTML DOM (Document Object Model), subsequently DOM Ready aims to construct DOM hierarchy and DOM Load is responsible for rendering pages to display. The above is simply fitted for loading before interaction because JavaScript files are able to manipulate the DOM tree as well. Hence, the interactivity of Web 2.0 is that the user controls the web browser retrieving or creating data by JavaScript codes to change the DOM tree in order that, the displayed page is greatly different from the initial URI’s resource representation. Among them, the technologies including HTML, CSS, JavaScript and DOM.
Figure 3 Web browsing process (Fernandes, 2013)
The documents on the web are written in HTML (Hypertext Markup Language) which is a standardized format to organize the page’s structure (Vodnik, 2012a). Furthermore, HTML can indicate the implications of elements, the form is tag that can be parsed by the user agent. Generally, tags occur in pairs, just like <body></body>, <ul></ul>, while some tags are known as one sided-tags, e.g. <br>, <img>. HTML has coincided with the companion language, Cascading Style Sheets (CSS) that is a presentational language and can handle the appearance including spacing, text alignment, position, etc. for a single element or cluster by selectors (Vodnik, 2012b). As for style rule syntax, it makes up two central parts, selectors and declaration (Rutter, 2006), the example is shown in figure 4.
Figure 4 CSS style
JavaScript was developed by Brendan Eich at Netscape in the early 1990s (Doernhoefer, 2006), and can give web pages more life. What is more, it is an object-based scripting language intended for client-side scripting (Jazayeri, 2007), which means it is embedded in HTML pages and executed by browser environments and can be interacted by users. One of the essential behaviors of JS is manipulating web pages Document Object Model (DOM), such as access, read, rearrange, delete, and create (Heilmann, 2006). As for Document Object Model (DOM), it is a set of Application Programming Interfaces (APIs) for handling the structure of HTML documents (Marini, 2002). As a matter of fact, the structure of the DOM looks like a reverse tree, and each branch or leaf is called node. Similar to the conventional family relationship, the DOM tree also follows the rules of parent, child, sibling. The example shows in figure 5. Besides these element nodes with tag names as the basic bricks, there are attribute nodes and text nodes, even though not all elements contain. (Keith & Sambells, 2010).
Figure 5 DOM tree Figure 6 Element node
3.3.3
Contract Model
The definition of assistive technologies is any equipment, software that can enhance functional capabilities of individuals with disabilities (Cook et al., 2019). Additionally, screen readers and alternative input devices are explained. Currently, web-based screen readers can catch revealed notices and supply navigational speech commands (Bigham et al., 2008). In detail, the most widespread one of browsing is converting a two-dimensional page to a one-dimensional text string, namely linearization (Borodin et al., 2010). Similarly, linearization is a popular way for alternative input devices as well. For instance, Switch Access Scanning can aim at the target without too much motor control. The process is that one focus indicator scans the screen from top left to bottom right. When the indicator is on the expected aim, the user acts pre-defined manipulation behavior, like pressing the switch to focus on (Nicolau & Montague, 2019). Instead of applying complex heuristic techniques, currently, assistive technologies depend on specialized interfaces, namely accessibility APIs, to communicate with accessibility information regarding user interfaces (W3C, 2017b). In detail, accessibility APIs contain a tree of accessible objects and information about each object within applications (Watson, 2015). And actually, the accessibility tree is a subset of the DOM tree (W3C, 2017b), because rather than all nodes are needed objects in the accessibility tree. In addition, the accessibility tree is also customized for groups with specific disabilities, and influenced by the browser (WhatStock, 2014).
Consequently, the accessibility APIs and assistive technologies on how to link with user agents is depicted in figure 7 (W3C, 2017a). Model-View-Controller (MVC) is a classical pattern. Data is the model to store a set of object-oriented classes, and UI is the view to present rendered pages. So, the controller, namely JavaScript, acts as the observer to notify the change to the opponent (Jazayeri, 2007). Ultimately, the user agent delivers the above-mentioned information to the accessibility API of the operating system, and the accessibility API can directly communicate with assistive technologies (W3C, 2017a).
Figure 7 Contract Model
3.4 Related Work
Petrie et al. (2005) explored the use of accessibility logos and statements on e-commerce based on 250 websites in the UK, the result suggested that only 4% of sites had accessibility statements and 30% magnified their level of conformance to WCAG. At the same time, in a Subjective Study of Sri Lankan E-Commerce Hotel Websites (Sambhanthan & Good, 2013), 120 participants from 14 countries were invited for the survey about web accessibility, and five hotels were picked for analyzing against a checklist according to WCAG, which results implied the lack of conformance to accessibility guidelines. Both of these two studies proved the situation of guidelines conformance in general, and there were other investigations emphasizing emerging B2C sectors.
Gąsiorkiewicz (2010) selected three shop websites from the ten biggest websites in the B2C sector of Poland and examined the performance of the accessibility. Then the outcome was that none of the three websites was compliant with all meets of the fundamental standard at the automatic testing of WCAG 1.0, while the researched webs search engines were well-run according to expert analysis. And it happened that there is a similar case, 500 Australian Business-to-Consumer e-commerce websites were investigated by AChecker5 to WCAG 2.0 level A, AA, AAA, (Sohaib & Kang, 2017), where none of the 30 Australian websites fulfill the minimum success criteria (Level A). In this way, the final results indicated B2C e-commerce did not pay much attention to web accessibility.
In addition, various researches on e-commerce websites’ accessibilities focused on blind users. For example, 16 popular E-commerce sites, operating in Pakistan were selected to test and verify the hypothesis that “The accessibility of these sites does not satisfy the requirements of Web Content Accessibility Guidelines 2.0” (Rahman et al., 2015). In this study, apart from evaluation tools, five blind users participated the task-based evaluation for referring the hypothesis. Similarly, Gonçalves et al. (2017) combined the automatic tool, manual evaluation, usability specialists, blind user tests together to test the e-commerce platform that was one of the first chains hypermarkets in Portugal. In conclusion, the results showed bad labels concerning efficiency, effectiveness, and satisfaction for majority users.
3.5 ARIA
Accessible Rich Internet Applications (ARIA) was released by W3C initiatives (2017a) to add additional semantic data (mainly roles, states, and properties) into HTML for improving the accessibility of dynamic contents and advanced user interface controls, even for input focus and full keyboard navigation. It predefines widgets like Map controls, AJAX Live regions, Drop-down menus, and so forth, in order that accessibility APIs can parse dynamic contents to assistive technologies more straightforward and accurate without too many barriers. Cooper (2007) supposed that ARIA exactly likes a bridge between established and emerging technologies, because it provided a kind of mechanism to attach semantics on updated things, when the raw HTML attributes were not accessible enough.
3.5.1
Attributes
A set of attributes can be directly inserted into the normal HTML elements.
Roles define and describe elements’ characteristics and functions in the web application. Especially for widgets, roles can communicate with assistive technologies on how to interact with RIAs. They can be categorized into six groups:
– Abstract Roles consist of the DOM structure and cannot be used for the content by authors. – Widget Roles describe the components and standalone interaction models.
– Document Structure Roles always cannot be interacted, it is only for organizing content. – Landmark Roles normally are navigational landmarks or searching bar.
– Live Region Roles could be changed by live region attributes. – Window Roles act as windows within applications.
States and Properties both present information for an object or widget. And sometimes even can asynchronously update content without interaction. But they still have differences with each other. Compared with states, properties would spontaneously change by codes with little possible. However, they share the attributes prefixed ‘aria-’ together.
3.5.2
Widgets
Chen et al. (2012) supposed that “a widget is a coherent unit of the content contained within a Web page that users can interact with” (p. 76), such as Slider, Time Picker, Checkbox. Furthermore, widgets always combine client-side technologies with asynchronous communication, that is to say, a complete widget contains three components totally. The first one is the HTML that shapes the widget, and then is the CSS to describe the appearance, the last one is the JavaScript to fire the events (Casteleyn et al., 2014; de Mattos Fortes et al., 2019). The consequent part takes the Drop-down menu widget as an example to describe detailed. See figure 8, this is the HTML example of Drop-down menu widgets with ARIA attributes skipping CSS and JavaScript parts, because ARIA specifications just insert attributes into HTML. Evidently, this is a three-level menu with unordered list and list item tags, and there are six attributes role, aria-disabled, aria-hidden, aria-expanded, aria-haspopup, and aria-activedescendant. Firstly, it is the usage of role attributes21, so identifying the ul elements as menu roles and its child items or contents as menuitem roles. And then, the cluster is the state22. Particularly, aria-disabled indicates that the element is just perceivable but not editable or operable, and the value of it mostly is true or false. Similarly, aria-hidden suggests that the element and all of its descendants are not visible or perceivable. Meanwhile, aria-expanded is to describe whether the element is currently expanded or collapsed. Finally, there are two kinds of properties22 attributes. The goal of aria-haspopup is to tell assistive technologies if the element has a popup context menu or sub-level menu. And, aria-activedescendant is responsible for managing its current active child to avoid focusing on other children, and value is usually the element ID. Significantly, it is worth noticing that although there are no too many obvious changes in the scene when using ARIA attributes, assistive technologies would collect further and more information for inaccessible users.
3.5.3
Focus Management
As previously mentioned, Rich Internet Applications, sometimes it would dynamically update the DOM structure. When this situation happened, developers must make sure the users can focus the element by keyboards through the navigating mechanism. The native method to fulfill this requirement is to use HTML tags like buttons, links, these features behave in a predictable way and are focused automatically in the browser because they natively have non-negative tabindex attributes, which means they can be found in the tab order. Once the element is inserted into this tab order, the cursor can focus on it or fire events, as a rule, using the TAB key
21https://www.w3.org/WAI/PF/aria/roles#menu
to move forward and the SHIFT+TAB key to move backward. Widely, this strategy is referred to as Focus Navigation (de Mattos Fortes et al., 2019).
Nevertheless, many RIA widgets prefer the non-semantic elements such as div, span with negative tabindex (-1). Therefore, the meaning of ARIA attributes is to make these widgets enable keyboard navigation. In the conformance of tab widgets, tablist, tab, tabpanel roles are used for highlighting. Specifically, tablist roles mean the interface component including all tab elements, tab roles are all existing interactive elements, and tabpanel elements are associated with each interactive tab element. Generally, these roles attributes are combined with aria-labelledby, aria-hidden states and properties together for implementing. Therefore, once one of the roles on the tab component is activated, that is to say, the tabindex value equal to or greater than zero, others are available as well by UP/DOWN/LEFT/RIGHT keys, even though others without tabindex attributes. Besides, the focus mechanisms of other types are fundamentally close to this. (Watanabe et al., 2015a) Fona evaluation approach starts by calculating the numbers of HTML elements with any form of mouse event listeners. This amount totally comprises two main sorts. The one is using addEventListener methods in JavaScript to callback mouse events such click, mousedown, mousemove. And the other is the mouse events callback directly attached to the HTML elements as attributes like onclick, onmousedown, onmousemove. After catching the number of mouse event listeners, the task is to compute the number of accessible events. As the previously referred, if it is inserted into the tab order with tabindex (non-negative) or HTML built-in order attributes, or, it has role attributes of ARIA specifications, it could be defined accessible. Therefore, Fona assessment is to collect the numbers of total mouse events and accessible mouse events. Eventually, the number of accessible mouse events is divided by the total number to calculate the ratio, or say Fona value. (Watanabe et al., 2015a)
4
Empirical data
4.1 Sample
As stated above, the website’s resource is Alexa’s rank list2, selecting the Top 45 websites from each list of major retailers and novelties. These were retrieved on April 4, 2020. When filtering it, there is no repeat domain name, but there are three websites that cannot be visited in novelties category. Therefore, the samples are 45 websites in major retailers and 42 websites in novelties for analyzing. Moreover, all specific websites will be shown in the appendixes of the final part. And then the empirical data mainly contains two parts, one is inspected by the WAVE4 tool for RQ 1 & 2, and the other is assessed by Tab-index counter7 tool for RQ 3.
4.2 WAVE
Although WAVE can be used as a website or plugin attached to the browser, the extension is selected in this research. So, opening the testing websites firstly and then initiating the extension to let WAVE access the operating website (see figure 9). Moreover, the user agent is Mozilla version 5.0, AppleWebkit version 537.36, and Chrome version 80.0.3987.149. In particular, there are six numbers on the summary tab panel, the Errors means the accessibility errors, and Contrast Errors are mostly visual color contrast in the CSS, Alerts are just likely errors and not enough defined as real errors. Then the numbers of Features, Structural Elements, ARIA are exactly the DOM structures or attributes in the HTML. Nevertheless, not all numbers can be straight used for calculating WAQM value, because of the conformance standard is WCAG 2.0 level A. Thus, before recording these data, the researcher needs to check the reference of each item. If the item is not covered in WCAG 2.0 level A, it should not be counted, for example, Contrast Errors are not included because the references of them is not WCAG 2.0 level A. So real errors are Errors against WCAG 2.0 level A, and the potential errors are all detected elements including Errors, Alerts, Features, Structural Elements, ARIA, against WCAG 2.0 level A.
Figure 9 WAVE Screenshot
Once all prepared data is collected, the next action was to work out the WAQM value. The flowchart was depicted in figure 10. The preparation including calculating x’ and failure rate. According to the previous theory, the 𝑥′= 𝑎−100
𝑎−100𝑏 and parameters a=20, b=0.3, so, the x’
approximately equal to 25.53%. At the same time, let the numbers of real errors divided by the number of potential errors to get the failure rate (FR). Afterward, applied S line formulate 𝑆 = 100 − 𝐹𝑅 ×100
𝑏 when the failure rate less than or equal to x’, vice versa, V line formulate 𝑉 =
