E-Commerce Website for Visually Impaired

Abstract

E-Commerce is an online marketplace where buying and selling goods as well as services over the internet takes place. In the past few years, we have seen e-commerce surging rapidly and catering significant opportunities to the entrepreneurs across the world. With pandemic, e-commerce became more relevant and convenient. Though e-commerce is booming, there are not many sites that are accessible to the visually impaired people. In this paper, we build a website that operates on voice messages given to the user. The user needs to hover over the page in order to obtain different voice instructions from numerous fields given to the user and continue the process accordingly. The user input such as name, address, email-ID, phone number, searching product etc are taken via voice commands. Furthermore, there are categories available such as clothing, grocery etc which displays all the products belonging to that particular category and reads their cost, ratings, description etc. All the inputs given by the user will be via voice and that keyboard is not utilized anywhere in the entire process. This e-commerce website is developed using HTML, CSS, JavaScript and the SQL server is used to store its database.

Introduction

I. INTRODUCTION

E-commerce has become extremely popular worldwide. Although the terms "e-commerce" and "online shopping" are frequently used interchangeably, at its core, e-commerce encompasses a concept for conducting business online and includes a wide range of services such as booking flights online and making online payments.. It is important not to underestimate the power of e-commerce because it continues to permeate everyday life and offers vital opportunities for online investors and businesses. World Health Organization (WHO) estimates that globally at least 2.2 billion people have a near or distance vision impairment. As most of non-government as well as government website are not accessible, it creates rather a significantly difficult circumstance for a visually impaired individual. This results into lesser opportunities for blind people to shop online or avail any of the benefits of online services. They need a constant in-person assistance while using the non-accessible websites which only increases their dependency on others. And in times of pandemic, where an individual neither gets physical help to use the online services nor is allowed to step out of the house, only proves that making websites as well as many other online services visually impaired friendly is the need of the hour.  On December 3, 2015, the Accessible India Campaign (Sugamya Bharat Abhiyan) was launched by the Department of Empowerment of Persons with Disabilities (DEPwD) as a nationwide campaign to ensure that all facilities are accessible to people with disabilities (PwDs). While one of the contributing factors that visually impaired users do not prioritize shopping online due to dependency on others, the other factors are the shortness of tools that are accessible friendly. Usage of screen readers, easy navigation, navigation via voice inputs by users, voice instructions needs to be encouraged and supported for both non-government and government websites so that world wide web becomes more accessible for every individual despite their disabilities.

In past few years, Big Tech like Google, Apple, Amazon have endeavored to make their products and services more available for individuals with disabilities. People who are blind or with visual disabilities make up a segment of our society. In recent years, accessibility for people with visual impairments has received a lot of attention. Hence small, medium, large scale businesses should adopt visually impaired or accessible friendly features in their websites in order to promote inclusivity in the digital world. Here, we build a website that takes voice inputs from user as well as provides various voice instructions to the user when hovered over the entire screen, thereby paving the way for customers to buy their desired products online.

II. PROPOSED WORK

The website has two entities, one being the user while the other one being admin panel. Admin panel is similar to that of any normal websites. The admin panel, like any other E-commerce website, is used for adding the products, deleting products etc. Admin panel, in our project, is used for managing the products among all the categories.

The admin needs to enter his/her credentials in order to login and perform operations. The login page for admin is different than that of the users. It is ran as different website but is connected to the same database. Hence when a product is added or deleted, it is reflected in the ‘products’ table, ‘products’ table is used for displaying products in products page. The login page for admin does not have any voice messages on hovering over various fields. The input will be via keyboard. This is developed keeping in mind that admin will be someone who is not visually impaired.

The user entity will be operated by voice commands provided by the user and hovering over the screen to access voice instructions, for all the operations, from logging in or signing up, to placing the order for the product. First, user needs to log in to their accounts. If the account is not created then, the user has to sign up. When the login page is loaded, a voice instruction says "Welcome to the Login page. Hover over the screen to find username, password fields and login button. Thank You". Once the user manages to hover over the username or password fields, the voice instruction is triggered "click here to speak username". The user needs to click on the field and speak the username. Once the username is said, a voice message is triggered saying the username entered by the user in order to verify. If the credentials are matched, then the user is logged in. Same steps needs to be followed for entering password as well. If they do not match, then the user is redirected t sign up page, where the user needs to create account by speaking username, password, name, address, mobile number, etc by hovering over the particular fields and then clicking on them. The buttons are full screen wide as we can see in figure 3 and figure 4 in results section.

Once logged in or signed up, the user is directed to products page. At the top of the screen we have input search field for searching products, then comes cart button which directs the user to carts page on clicking. Below the cart button, we have ‘my orders’ button, where on clicking, the user is directed to ‘my orders’ page which displays all the products that were previously purchased by the user. Then we have few categories such as clothing, groceries, electronics etc. All the fields are full screen wide for user's convenience. The user once hovers over the search field access voice instruction saying "click here to search product or say help for help". If the user wants help, then the user should say 'help', a series of voice instructions are given to the user about how to search product, how to add product to cart etc. The user then can again click on search field and say the product name, the matching products are displayed and the corresponding price, ratings, description about the products are read out to the user.

The user should then manage to hover over those matching products displayed on screen and click on them if he/she wishes to add that product to the cart. Every time the user hovers over the products displayed, a voice message is triggered saying the product name. After clicking on the product, a voice message appears saying "product added successfully to cart". If the user wants to search another product, then user should manage to reach search input field and then click on that field and say the product name.

For displaying products of particular category, the user needs to hover over the category buttons. Every time the user hovers over the category, a voice message is triggered saying the category name. After clicking the desired category, corresponding matching products are displayed and their description, price, ratings etc of every displayed product is read out. If the user wishes to know the cart items, then he/she needs to hover over the cart button and click it. the user is redirected to cart page.

In the cart page, the user is supposed to click anywhere on the screen, it triggers the action and all the products along with the name, product ID, price, quantity are read out. If the user wants to proceed for buying, deleting item, going back to products page or increasing/decreasing product quantity then user is supposed to click anywhere on the screen. Once the cart items are read out, the user is asked to speak following commands for their corresponding operations:

1. proceed order - for proceeding order
2. empty cart - for deleting all the items in the cart
3. delete - for deleting the item in the cart
4. increase / decrease - for increasing or decreasing product quantity
5. back - to go back to products page

For deleting item, increasing /decreasing item quantity, the user first needs to say the command and then say the product-id. After every operation, the cart items are read out in order to reflect the changes in the cart to the user. Once the user is sure of buying all the items in the cart, the user can click anywhere on the screen, wait for the cart items to be read out and then say 'proceed order'. The order is placed, the shipping details are taken at the time of sign-up. Hence this completes the process. Once the order is placed, the user is redirected back to products page. If the user wants to check ordered products then they may click on ‘my orders’ button. The user is redirected to ‘my orders’ page. On clicking anywhere in the entire page, a voice message is triggered reading out all the ordered products and their corresponding quantity and price. Once the products are read out, it is redirected back to products page.

Conclusion

This paper summarizes the working of e-commerce website which is accessible. The primary inspiration for development of such site is due to shortage of tools that are visually impaired friendly and to reduce their dependency on others. The website provides voice output to guide users through each step in every page and provides convenient navigation throughout the website. One of the main objective of the project was to make all the user inputs via voice based in order to save the visually impaired user from the discomfort of using keyboard. Hence with this website, we are taking one step forward in building inclusive digital world where every individual despite their disabilities can access the internet and avail the benefits of online services.

References

[1] American Foundation for the Blind, “Accessible Shopping at Amazon for People with Visual Impairments”. Available: https://www.afb.org/blindness-and-low-vision/using-technology/online-shopping-and-banking-accessibility-people-visual-1 [2] Hulya Francis; Dhiya Al-Jumeily; Tom Oliver Lund. \"A Framework to Support E-Commerce Development for People with Visual Impairment\", 2013 Sixth International Conference on Developments in eSystems Engineering, https://ieeexplore.ieee.org/document/ [3] Jonathan Lazar ,Aaron Allen,Jason Kleinman &Chris Malarkey, “What Frustrates Screen Reader Users on the Web: A Study of 100 Blind Users,” International Journal of Human–Computer Interaction ; vol 22, 2007. [4] Kunal Mohadikar, Rahul Nawkhare “E-commerce based online shopping for visually impaired people using speech recognition”, pubilshed in: International Journal of Development Research Vol. 07, Issue, 08, pp.14581-14584, August, 2017, https://www.journalijdr.com/sites/default/files/issue-pdf/9843.pdf [5] Mallika Chand; Shreya Mulchandani; Sulalah Mirkar. \"Visually Impaired Friendly E-commerce website\", published in: 2019 4th International Conference on Electrical, Electronics, Communication, Computer Technologies and Optimization Techniques (ICEECCOT), https://ieeexplore.ieee.org/document/9114617 [6] Maria Claudia Buzzi; Marina Buzzi; Barbara Leporini; Fahim Akhter. \"User Trust in eCommerce Services: Perception via Screen Reader\", Published in: 2009 International Conference on New Trends in Information and Service Science, https://ieeexplore.ieee.org/servlet/Login?logout=/document/5260447/ [7] Roopa Bose & Helmut Jürgensen “Accessibility of E-Commerce Websites for Vision-Impaired People” published: July 2014, https://link.springer.com/chapter/10.1007/978-3-319-08596-8_18 [8] Yevgen Borodin, Jeffrey P Bigham, Glenn Dausch, IV Ramakrishnan , “More than meets the eye: a survey of screen-reader browsing strategies,” Proceedings of the 2010 International Cross Disciplinary Conference on Web Accessibility (W4A), April, 2010

Copyright

Copyright © 2023 Anagha S Kulkarni, K Shravani, Kanishkvardhan A N, Srinivas B Patil, Vinaya Jahagirdar. This is an open access article distributed under the Creative Commons Attribution License, which permits unrestricted use, distribution, and reproduction in any medium, provided the original work is properly cited.