A New Approach of e-Commerce Web Design for Accessibility based on Game Accessibility in Chinese Market

China is the largest e-commerce market globally, with a share of more than 40% of the total value of e-commerce transactions in the world, down from just 1% a decade ago. The Chinese are the most used electronic payment, ordering services, and watching videos on smart devices worldwide. The study of ecommerce is one of the branches of business administration established electronically through the use of Internet networks, which aim to carry out buying and selling operations. With the popularity of e-commerce, people from more and more backgrounds are using e-commerce websites and apps, but among these users, some people are unable to use these apps/websites or have barriers to use them. Accessibility design enables anyone (regardless of ability, for example, Color-blind) to successfully navigate, understand and use some applications. The accessibility design is widely used in video games, which can give guidance to the e-commerce accessibility design. This study will analyze five well-known e-commerce websites worldwide and the consumption habits of people with barriers to use from the perspective of accessible design to suggest two new concepts of accessible design methods based on game accessibility and web accessibility to make these e-commerce websites/apps more suitable with the user habits of the particular group. Keywords—e-Commerce; accessibility design; color-blind; game accessibility


I. BACKGROUND
A. The Importance of Accessibility Design to e-Commerce Websites Designing a professional online store for our business in an innovative way that provides a good user experience for our customers will undoubtedly build a different and strong image in front of consumers and increase their confidence in your services and products. China e-commerce has made remarkable achievements, increasing impact and penetration on the economic, social, cultural, and other fields, and has become a new driving force for economic growth. e-Commerce has also become an indispensable part of the daily life of the Chinese people. As a virtual place for businesses and consumers to communicate, e-commerce websites provide consumers with an excellent online consumption experience, including visual and auditory stimuli. With these advantages, those e-commerce websites encourage consumers to spend actively and give consumers a good experience. [1]. However, the vast majority of e-commerce sites are not explicitly designed for people with disabilities. The users of an e-commerce website should be all consumers, and it should provide more help to these disabled users. Because of their physical reasons, people with disabilities are subject to many restrictions when using ecommerce websites, so they cannot get a complete experience, undermining people with disabilities in using e-commerce websites.

B. Difficulties in using e-Commerce Websites for People with Disabilities
According to the 12th five-year Development Program data for the cause of disabled people in China, the total number of disabled people in China is about 85 million, which means in every 16 Chinese people, there's one has a disability. [2]. There is no doubt that it is challenging for people with disabilities to use e-commerce sites without accessibility design, even if they have some assistive devices, such as voice recognition and auxiliary input. To fundamentally solve the problem that it is difficult for people with disabilities to use, it is necessary to carry out the barrier-free design of e-commerce websites. However, the vast majority of websites are not specially designed for the disabled so far. The mainstream dynamic design and color layout of e-commerce sites are not effective enough for visually impaired people, making it difficult to obtain product information and purchase products.

C. Game Accessibility Solutions
As an entertainment tool that gives users powerful sensory impact, the accessibility design in video games is targeted and integrated. The integrated accessibility settings can be used in other fields, especially vision and hearing settings. Take "The Last of Us: Part II" for example; Naughty Dog studio designed more than 60 accessibility settings in one particular block called "Accessibility" shown in Fig. 1. The rules for classification and some methods such as "Magnification and visual aids" can inspire the accessibility design in e-commerce.

D. Objectives and Motivations
From the previous A and B part, the Chinese e-market has a large number of users with disabilities. Many of them have problems using e-commerce website, how to increase the user experience for this group of users is the question need to be solved in this paper. As a solution to the problem, better ecommerce using the system can increase the user experience directly; this system should consider different types of disabilities and put other solutions in an integrated environment. Designing an integrated setting or system for e-commerce www.ijacsa.thesai.org accessibility is the purpose of this research; various tools and ideas are used to achieve this. Since the online website nowadays requires more on images, UI, and interaction quality, which are the core fields of video game design or game accessibility, it is possible to transport the experience of game accessibility to e-commerce accessibility. In total, this research aims at the e-market of users with a disability, trying to design an integrated system for e-commerce accessibility based on the experience from game accessibility; this system is the ideal solution to solve the using problems from users with disabilities.

II. RELATED WORK
Since the same research material could not be found, the researcher will analyze similar studies, namely on game accessibility, to inspire the design. Game accessibility is an approach commonly used in modern console games. In [3,4], the methods and challenges of designing accessible games are analyzed from the perspective of the game itself and the user, which also gives the inspiration for the choice of the scope of this research. The scope, or user profile is essential for the whole design method in this research, not only in video games, this research also collect user profile from table games, in [5] the user profile and the way of typical methodologies, limitations are reported; respectively, an efficient accessibility game design will be one of this article's guidance, "The Last of US: Part II" is a uniformed and detailed example in-game field, in [6], the author demonstrates the importance between accessibility and game by providing Active Game Accessibility (AGA) development framework and game accessibility guideline. Although the content of game accessibility above cannot be copied in this paper, the framework they used will be a guide for building an integrated accessibility environment.
To be able to demonstrate the scientific validity of the proposed solution, this paper uses Chinese disabled data [2,7] and consumer data of different shopping stages produced through the Taobao dataset [8] to be able to analyze the feasibility of the solution mentioned in this paper, this paper introduces two models based on the basic understanding of web accessibility [9,10,11], PEQUAL, a comprehensive website based on multiple analysis methods evaluation models, and Web Content Accessibility Guidelines (WCAG) 2.0 is a benchmark to guide web accessibility analysis and design. To visualize the website analysis by WCAG 2.0, tools for website review can be used. Also, an experiment about conversion rate and time of e-commerce websites and some literature reviews about the environment of the e-commerce website for people with disabilities are used for data comparison and discussion [12,13]. In the models and data above, the detailed data of the users with a disability is not able to be calculated or predicted; this paper will treat the materials above as benchmarks, WCAG 2.0 will be the benchmark of detail UI design while PEQUAL and data from Alibaba open-sourced dataset will be the benchmark while testing.
Apart from WCAG 2.0, there is more technical, biological, or psychological research result that gives guidance to the design and analysis part of this article: The accessibility analysis in Australia e-Commerce website based on WCAG 2.0 [1] and the standard Munsell Color System, which can be the application for helping people with color blindness [14,15]. The use of the standard Munsell Color System can be more accurate if "Gamut Mask" is also engaged in a website color analysis [16]. Pointing and Clicking difficulties can cause problems shopping online; the behaviors from and assessment for people with clicking challenges [17] can affect the design methods. Using an AI-based voice assistant can also be a solution except for the result above. A study about interaction quality or voice assistant system (VAS) [18,19] can guide the voice recognition technology in the proposed solution. Both Munsell Color System and voice assistant system are widely used in the field of design and voice recognition, but can't find application in the field of e-commerce websites; this paper will use both of them to build two core functions about colorblind support and voice support in the whole system.
Due to the scope of target users, web accessibility design can be scattered, frameworks for improving accessibility design service [20] and the example for web design from egovernment website [21] can give the inspiration to the final united and classified design methods. The external insights above in the both applications proved the feasibility of the solution provided by this paper, also gives the guidance for system testing, but this paper does not share the same group of users, the objective of users are different while using, so while testing and designing, this paper will consider both the successful application and user characteristics.

A. Scope
The proposed solution and the analysis are mainly aimed at the classified groups in Table I [7]. At the same time, considering the existence of a particular group of sellers, changes in the design of online shopping systems could change the experience of the seller group; this change will not be considered in the designing part.

B. Purpose
By analyzing Web Content Accessibility Guidelines (WCAG) 2.0, some global e-commerce platforms, and some specific users of these platforms (see "III scope" for details of specific user groups), this article will suggest several solutions to build a more user-friendly online shopping environment for these particular groups. The solutions include 1) a new system Visual impairment. Color blindness; maximum visual acuity in both eyes is less than 0.1; visual field is incomplete.
The structure and function of the auditory system are severely impaired, the average hearing loss of the better ears is between 81 and 90(dB HL), and the comprehension and communication are severely limited.
Dyskinesia. Cannot use the mouse to make fine movements; using the keyboard input is more complicated.
Comprehension barrier. Unable to understand long sentences, dyslexia, low comprehension

A. Analysis
To make the proposed design method more convincible, the analysis of the using process and user profiles are needed. By analyzing the user journey, comparing the actions and time between different users, the needs from the particular group will appear. Based on WCAG 2.0, the unreasonable design of some certain e-commerce websites can also be found. In total, the analysis will provide the basic logic and reference for design.

1) Analysis of mainstream e-commerce websites:
The duration of each step, including the interaction of every stakeholder in the whole user journey, is showed in Fig. 2. Almost every platform from the research, Taobao, JD, Amazon, and eBay, has shared the same process. Those platforms will use different sales strategies or recommendation strategies in different status, but the process itself won't be influenced. Meanwhile, Pinduoduo's service system, as an APP-only platform, is somewhat different from them. When paying for this link, customers can spend less waiting for another customer who purchases goods simultaneously. The general flow of the service system is shown in Fig. 3.
Based on the user journey above, user interface change may change the conversion rate for each status and average spending time on different pages. However, a recommendation system and other sales strategies could also affect the conversion rate. Testing and contrasting the average spending time in different shopping statuses could be more accurate and precise.

2) User analysis a) User Reaction Time Based on Simulation:
The reaction time data should not be affected by subject choices; simply calculating data from user behavior datasets from different e-commerce platforms can hardly ignore the error. A simulation experiment was designed to fix this problem.
This experiment chooses 15 different users who do not have problems using those e-commerce websites by giving them other shopping purposes (for example, user A is supposed to buy powdered milk) to decrease the influence of recommendation and memory. At the same time, this experiment gives users the use of barriers to simulate the target users. The change of CSS filter scale in the source code of an e-commerce website can affect the sight from different kinds of color-blind; the slightly shaking from the mouse to simulate the shaking from hands can be realized by C++ [5]. The experiment result is shown below; all the experiment was based on Taobao China website.
Based on the result in 4.1.1, the test was divided into four parts to simulate: (1) view the homepage and choose classification the user needs, to decrease the influence of personal preference, the classification was randomly chosen in one routine of the test; (2) choose the specific item in the classification page; (3) read the introduction page of items; (4) make payment.   To ensure the data is accurate and precise, the variation (CV) coefficient was calculated for all the average data in Table II. All the CVs are under 15%, and the first 2 steps have higher CVs while CV in steps 3 and 4 are lower; the errors may come from different familiarities to the Taobao website.
To put four processes into side-to-side comparison, the time of reading the specification takes most of the whole process, which means the information from the item is more important to users. The assistant reading and understanding in this part will be more critical. Viewing the homepage and finding classification takes more time to compare with finding specific items; this result could lead to the question about the main navigation bar; too many sorts may distract the user's attention, or the color and font influence users' judgment.  Table II. Using the chart to determine the gap of all kinds of simulations, the move disorders group spends more time determining the specific item and making payment. These two parts typically need more interaction, like clicking and typing. Meanwhile, viewing and reading parts are harder for group presbyopia, meaning that the text in those two-part is hard for people to read. Overall, the other 3 groups' average time is higher than standard data; a solution used in the whole process is needed.

b) Portrait the User According to the User's Behavior:
The reaction data present the user behavior objectively while the user interview reflects the subjective feelings from the users, which could also be necessary. At present, 10 users were intensely interviewed, including their shopping habits, online shopping routine, and problems they've met were asked. Among these users, some hardly use the online platform for shopping and users who frequently use these apps as well as the linked industry apps; in this section, the target users will be further broken down, and the results of the interviews of these target users are shown in Table III.
The result of user analysis will affect the focus direction of the final solution; for example, the colorblind user takes more time viewing, and using process about "viewing" in these websites may need more colorblind-aimed assistance. In the opposite way, if the solution provided from this paper can decrease the particular using time, the solution can be treated as an ideal solution to the research question this paper proposed.

3) Web design analysis:
With the increase in Internet users, the importance of owning a website has increased to manage the business and promote products in all its forms. Every company or business community, whether small or large, has a website that talks about it and its services and products. There must be many features for the design and content of the website to represent a tool to attract the most extensive audience base and attract many new visitors and retain existing visitors. The analysis above is based on users; this section will focus more on web design analysis. Based on WCAG, the color used for a website have strict rules, if the rules are not followed, users can take more time to recognize the message, take the main navigation and search bar from Taobao as an example (Fig. 5), by using a color review tool, the result of color using is showed on Fig. 6, Fig. 7 and Fig. 8.      Three lines on the color review, "3", "4.5", "7", means three standards for AA and AAA in WCAG 2.0, the index of the circle in the graph the higher, the better. In the result of the color review, only the background-text color contrast ratio of the main navigation bar while not clicking fulfilled the WCAG 2.0 AA standard.
Meanwhile, in the main navigation bar, products are classified in 15 blocks, which can be complex for users to organize and remember.
The analysis of the web page, compare with WCAG 2.0 and other benchmarks, can provide the guideline about UI design for the final solution; since the benchmarks, this paper choose are widely used in other fields, including other websites, the result of web design analysis should be convincible and helpful to build a better UI for e-commerce accessibility.

4) Accessibility design:
All design methods will be based on analysis and combined with the user profile in the scope. Design methods are divided into two parts according to the problems that need to be solved. 1) problems that need to be solved as soon as the user enters the page; and 2) problems that may need to be solved as the user uses the site.
The solution before using: 1) Visual aids, adjustable font and icon size for the main interface, enhanced contrast for image display, weaker background, highlighting text and product subjects; these adjustments are specified in WCAG 2.0 [10], i.e., text cannot be adjusted, the font needs to be 14-18 px; repeated scrolling of text needs to be in width 320 and height of 256 CSS pixels in the window. Contrast ratios of at least 4.5:1 for large text and up to at least 7:1 for other text. To prevent light epilepsy, interactive animations should preferably not be displayed on the home page, nor should any web content contain any flashing more than 3 times/second.
2) Motion/cognitive aids increase the feedback area, and to address the needs of Parkinson's patients, the delay of the web interaction will be longer, with the highest delay of 3s [10]. The user can control the length of the delay, and the size of the interaction module will be more significant.
The solution while using: 1) Colorblind, color-blind mode, anything related to the discriminability of the web page can be adjusted by the color-blind/color-blind mode, based on the Munsell Color System [4], which is shown in Fig. 9. All colors are represented by hue, luminance, and chroma. The hue is divided into red (R), red-yellow (YR), yellow (Y), yellowgreen (GY), green (G), green-blue (BG), blue (B), blue-violet (PB), violet (P), and purple-red (RP); luminance is expressed from white to black from N0-N10; chroma is used to indicate the purity of the hue, and the upper limit of standard colors is about 10. The color-blindness mode mentioned in this paper will be designed for all types of color-blindness using quantitative experiments, which will first determine the lightness as N5 and the chroma as 5, then let users sort the hues, the system interface will have different color matching according to the sorting results (because there is red-green and blue-green color-blindness, the color-blindness mode will be designed for all types of color-blindness). After determining the hues, the adjustment of lightness and chroma will be made according to similar methods to ensure that the needs of all similar users are met. www.ijacsa.thesai.org 2) Cognitive assistance, this point also applies to users other than visually impaired users; when opening the assistance mode, you need to remove all irrelevant icons, reduce the length of advertising images by 50%, increase the font size to 18px and bold, in the mobile terminal, vibration and touch need to be corresponding adjusted, for example, increase the vibration feedback at each stage of shopping, such as adding a shopping cart, For instance, adding vibration feedback at each step of the shopping process, such as adding a shopping cart for a short vibration, and two long vibrations for payment. Long press on an interactive video can appear auxiliary subtitles, long-press on an extended language can play a voice to assist reading. This mode can also be open as a full voice assistant; users can use voice instead of clicking in the whole process.
The design part suggests separate parts of the e-commerce web accessibility design based on the needs from the analysis part. Also, based on the analysis part, these design methods will be used in the different user journeys to ensure the system's logic and make the system integrated and easy to use; the final solution will be concluded in Section V.

V. PROPOSED SOLUTION
This section will specifically describe how the above design is implemented in the actual website, taking Taobao as an example; first, for the main page and all the pages that require reading, the contrast rate should at least be 4.5:1, font size need to be larger than 16px, the critical text need to be bold; all the thrilling video cannot be played, the descriptive text should be more precise, especially in the specific item description; The classification in the main navigation bar is suggested to be decreased. Those are a minimum requirement, based on the essential condition, the analysis result, and inspiration from game accessibility; two more things are needed for the system: 1) Calibration of the whole system, at the beginning of the entire process of using, a calibration for accessibility is needed; this article suggests putting the complete calibration in the login page for the influence to normal users won't be strong. Based on the design and analysis above, the calibration process needs to contain:  Color Sensitivity test, the process will be similar to the method based on Munsell color system in 4.2.
 Font adjustment, adjust the font size, bold or not by giving the user an article.
 Web layout adjustment using block model and click adjustment, by giving a simulated website based on the e-commerce website which is made by different blocks, users can adjust the size of blocks, the system will change the size of pictures in the real website, after finalizing the block, users are required to click some of the buttons, by testing the accuracy of clicking, the system can get the force range and necessary delay.
 Whether to start voice input, if the voice input is open, the voice assistant can be opened, and users can use voice for payment and clicking.
2) Adjustment while using, similar to the settings in the game, users' requirements will change through the using process. The adjustment needs to contain the following functions:

Font:
Options: 16px to 20  based on the cognitive assistance in 4.2, the information for the products will be concentrated, the voice assistant will work for the whole process.
The adjustment can be a floating window on one side of the website; users can click to open the settings, choosing one of the functions to adjust.

VI. DISCUSSION
Because all the proposed solutions are based on the analysis and authoritative data and models, it is considered as convincible, especially for the part of simulation experiment is www.ijacsa.thesai.org useful, if it combines the calculating result based on Alibaba user behavior dataset and Learning optimal tree models under beam search [8], for example, the conversion rate from "adding to cart" to "buy" is 72.9%, these data about the percentage of conversion can also be influenced by time, shopping time and conversion rate are supposed to have some relationship, there's also an experiment support this idea. However, the rate of convincible is still in the theoretical part, in some of the application [20], it is found that users with disabilities are used to ask help while they have using difficulties [13], that makes the promotion and testing of the whole system harder. Also, since the design method may not be suitable for all of the websites (different companies have different design principles), it is better to make the design method of the system like a guideline as WCAG 2.0, which may be more friendly to all the companies.

VII. CHALLENGES AND LIMITATIONS
While taking care of particular groups, this paper also considers the impact of changing the system on e-commerce companies and tries to make some accessibility design with the most negligible effect on the system itself. The solution above does not need a lot of budget or some significant changes to the original system, so it is available to use.
The difficulty of this study is to find the proper users for testing. Second, because the accessibility design is scattered and fragmented, more requirements will be needed by increasing the user number, so it is necessary to develop more functions based on the coming conditions. The final test of the system is hard to simulate, especially for calibration; the alphabeta test needs to take a lot of time due to this situation. Another challenge this system faced is the possible conflict between accessibility and promotion; if the access mode is used, the promotion activities by the e-commerce company will be unavoidable decreased, except for recommender system, moderated promotion or advertisement can improve the profit as well as the user experience, thus, a better way of promotion or a better UI including advertisement is needed, to make the system easy to use and assure the profit of the company at the same time would increase the confidence level of this system.
The provided system can now only work for the buyers, but not the businessmen who also have this kind of situation; if a system for business people is also developed, other stakeholders with the same problems may also struggle because of disabilities, that is because the proposed system is only in the application layer, accessibility design can be used in multiple platforms, multiple occupations, and multiple devices; so, the whole solution can be raised to the system layer.

VIII. CONCLUSION
To solve the problems for users with disabilities while using e-commerce website, this paper based on the game accessibility design and other related application, analysis the user behavior and user journey and designed an integrated and flexible system for the whole process of online shopping, including UI design and special support (colorblind testing and voice assistant). The proposed system design is convincible by comparing with data and benchmarks, it still needs improvement in many ways like promotion, in the future, the application layer accessibility design may be placed by system layer accessibility, this proposed system is hoped to make some contribution to the narrow sense of accessibility design in the field of e-commerce.