Vol-9 Issue-5 2023 IJARIIE-ISSN(O)-2395-4396

ECOMMERCE WEBSITE FOR VISUALLY

IMPAIRED
Owsikan M1, Nifaz Ahamed C S2, Vijayakumar D3, Balasamy K4
1
Student, Computer Science Engineering, Bannari Amman Institute of Technology, Tamil Nadu, India
2
Student, Computer Science Engineering, Bannari Amman Institute of Technology, Tamil Nadu, India
3
Student, Computer Science Engineering, Bannari Amman Institute of Technology, Tamil Nadu, India 4Guide,
AI & DS, Bannari Amman Institute of Technology, Tamil Nadu, India

ABSTRACT

A website design that allows visually impaired and blind users to access and shop without any assistance. The
system gives voice instruction to users and an input is requested from the user. The user is required to hover
over the entire page using the curser to access different voice messages for various fields. The user provides
input using the keyboard keys thus taking the process forward. The website is developed using React JS with its
database stored in firebase. As we all know that the E-commerce websites are evolving rapidly and are in
demand for purchasing various things, The E-commerce websites make things easier for both sellers and
consumers. But the E-commerce companies give less importance to those customers who are visually impaired.
This project will deal with the various aspects of E-commerce websites which are being used by visually
impaired people independently without taking the help of others to choose and buy the things. This will also
help the visually impaired person to purchase the things from the E-commerce website independently without
any hassle. This project will also summarize the points on how the previous research work can be improved
with various technologies.

Keywords: Text to Speech, Speech to text, Ecommerce website, visually challenged.

I. INTRODUCTION:

E-commerce is a critical part of the modern economy, but it can be difficult for people with visual impairments to
use e-commerce websites. This is because many e-commerce websites are not designed to be accessible to visually
impaired users. An e-commerce website for visually impaired users would be designed to be accessible to people
with a variety of visual impairments, including blindness, low vision, and color blindness. The text and images on
the website would be high contrast so that they are easy to see for people with low vision. This means using a dark
background with light text, or a light background with dark text. The text should also be large enough to be easily
read. The website would have text-to-speech capabilities so that visually impaired users could hear the text on the
page. This would allow them to navigate the website and read the product descriptions without having to see them.
The navigation on the website would be easy to use and would be accessible to users who use screen readers. This
means using clear and concise labels for all links and buttons and avoiding using images or icons as the only way to
navigate the website. The development of an e-commerce website for visually impaired users would be an
important step towards making e-commerce more accessible to everyone. By making e-commerce more accessible,
we can help to ensure that people with visual impairments have the same opportunities to participate in the digital
economy.

II. LITERATURE SURVEY:

The integration of artificial intelligence (AI) and satellite imagery for forest fire detection has garnered
significant attention in recent years due to its potential to revolutionize the way we monitor and manage forest
fires. In this literature survey, we explore existing works in this field, focusing on studies published in the last
five years. We aim to provide a comprehensive overview of the state-of the-art techniques, identify gaps in
current research, and highlight the challenges that need to be addressed.

2.1. Existing Works in Ecommerce websites:

21830 ijariie.com 2006

Vol-9 Issue-5 2023 IJARIIE-ISSN(O)-2395-4396

Osama Shoib et al [1] [2019], in their paper named Ecommerce Web Accessibility for people with disabilities,
they gave solutions on how the persons with disabilities can use the website on their own. Their research proved to
be 60 % success. They have the mean values for known problem =19.13, likely problem =5.87 and potential
problem =782.13. They gave the proper solution for the partially blind people only not giving proper solutions for
the fully virtually impaired people.

Mallika Chand et al [2] [2019], they gave the proposed method on how the visually impaired people can be taken
to the E-commerce website and independently do the purchase on the E-commerce website. In their page they used
the technology of the speech recognition techniques They achieved the 70% accuracy in their method.

Kunal Mohadikar et al [3] [2019], they proposed a system in which a virtually impaired friendly E-commerce
website can be made with the techniques with the speech recognition and image recognition, the proposed method
was successful on every 6 people out of the 10 people.

Hemalatha S et al [4] [2020], they also proposed a system for the website for the visually impaired people. They
used the techniques of speech synthesis and GMM models in their project. The proposed project was 82 %
successful.

2.2. Recent Developments in Ecommerce websites:

There are several existing solutions and technologies designed to enhance the accessibility of digital content and
online services for visually impaired users. These solutions aim to make it easier for individuals with visual
impairments to access information, navigate websites, and interact with digital platforms. Some of the
prominent existing solutions include:

2.2.1. Screen Readers:

Screen readers, such as JAWS (Job Access With Speech), NVDA (Non Visual Desktop Access), and Voice
Over, are software applications that read aloud the content of a computer screen. These tools provide auditory
feedback, enabling visually impaired users to navigate websites, read text, and interact with various
applications.

2.2.2. Text-to-Speech (TTS) Technology:

Text-to-Speech technology, like Amazon Polly, Google Text-to-Speech, and Microsoft's Azure Cognitive
Services, converts written text into spoken language. TTS can be integrated into websites and applications,
allowing visually impaired users to have the content read aloud to them.

2.2.3.Voice Assistants:

Voice assistants, such as Amazon Alexa, Google Assistant, and Apple's Siri, enable users to issue voice
commands to perform various tasks, including web searches, online shopping, and information retrieval. These
platforms can provide auditory feedback and assist in navigating digital content.

2.3. Challenges and Gap Identification:

Identifying challenges and gaps is crucial in the development of an e-commerce website for visually impaired
users using React TTS and a Firebase backend. Here are some key challenges and gaps to consider:

2.3.1.Usability and User Experience Challenges:

E-commerce websites are often complex with numerous product categories, filters, and features. Adapting these
for screen readers and TTS may lead to navigation challenges. Complex Forms and Checkout Processes Filling
out forms and completing the checkout process can be cumbersome for visually impaired users. Ensuring a
streamlined and accessible process is essential.

2.3.2.Content Accessibility Challenges:

Many e-commerce websites rely heavily on product images. Providing meaningful descriptions and alternative
text for these images is crucial for accessibility. Ensuring that detailed product descriptions are available and
well-structured for screen readers is essential.

2.3.3.Compatibility and Browser Support:

21830 ijariie.com 2007

Vol-9 Issue-5 2023 IJARIIE-ISSN(O)-2395-4396

The website should be compatible with various screen readers and browser combinations. Testing and ensuring
compatibility can be time-consuming. Ensuring that the mobile app version of the e-commerce platform is also
accessible presents its own set of challenges.

2.4. Proposed Solution and Problem Statement:

The proposed solution for this project is to develop a Ecommerce Website for Visually Impaired that addresses
the challenges identified in existing literature. This system will utilize recent advancements in react modules and
firebase technologies, coupled with the integration of real-time data streams, to improve the user accessibility
and speed of the website.

III.OBJECTIVES:

3.1. Primary objectives:

The primary goal of this research is to create an e-commerce platform that provides a fully accessible and
inclusive online shopping experience for individuals with visual impairments. This includes developing a user-
friendly interface, implementing React Text-to-Speech (TTS) technology to enhance accessibility, and using
Firebase as a robust backend solution to store and retrieve data The paper aims to address the existing
accessibility challenges in e-commerce websites for visually impaired users. By implementing React TTS and
other accessibility features, it seeks to ensure that all content, including product listings, descriptions, and
navigational elements, is accessible through screen readers and assistive technologies.

3.2. Goals of Ecommerce website:

Ensure the e-commerce platform is fully accessible to visually impaired users, meeting or exceeding
accessibility standards like WCAG (Web Content Accessibility Guidelines). Developing an intuitive and easy
access and user-friendly interface model that allows visually impaired people for navigation, searching and
independent purchasing. The product details should be easily understandable and readable. Payments should be
done in an easy environment. Ensure compatibility with popular screen readers like JAWS, NVDA, or
Voiceover, providing a seamless browsing experience. To Implement voice-controlled features, allowing users
to interact with the platform using voice commands. To Include high-quality audio descriptions of products and
their details to assist visually impaired users in making informed decisions. To Develop a system for providing
detailed and accessible descriptions for images of products, including alternative text and tactile graphics where
applicable. To Ensure that all functions and features can be accessed and operated using keyboard shortcuts,
enhancing usability for users with limited or no vision. Develop a system for providing detailed and accessible
descriptions for images of products, including alternative text and tactile graphics where applicable. Implement
robust security measures to protect user data and privacy, assuring users that their personal information is safe.
Establish a feedback mechanism to gather input from visually impaired users, allowing continuous improvement
based on their needs and preferences. Develop advanced search and filter options that are accessible and
efficient for users with visual impairments to find products easily. Ensure that the payment process is
straightforward and secure, with multiple accessible payment options. Provide accessible customer support
channels, including text-based, voice, or chat support, to assist users with any issues they encounter.

Ultimately, this paper strives to serve as a blueprint for creating accessible e-commerce platforms, inspiring
future development efforts to prioritize accessibility and inclusivity in the digital marketplace. By using React
TTS and Firebase, the paper seeks to demonstrate the transformative power of technology in enhancing the lives
of individuals with visual impairments. It aims to showcase how innovative solutions can bridge the
accessibility gap in the digital world and promote inclusivity. By achieving these primary objectives, the paper
aims to contribute to the broader goals of improving the quality of life and independence of visually impaired
individuals in the digital age and advocating for more accessible and inclusive web development practices in the
e-commerce sector.

IV.PROPOSED FRAMEWORK:

4.1 Introduction:

Online commerce has become an integral part of the modern world, offering convenience and accessibility to
countless individuals. However, for visually impaired individuals, participating in e-commerce can be a

21830 ijariie.com 2008

Vol-9 Issue-5 2023 IJARIIE-ISSN(O)-2395-4396

challenging and often exclusionary experience. This project seeks to address this issue by developing an
inclusive e-commerce platform specifically tailored to the needs of visually impaired users. Leveraging
innovative technologies and design principles, we aim to bridge the accessibility gap in online shopping and
create a more equitable digital marketplace.

4.2. Project Scope:

The "Ecommerce for Visually Impaired" project embraces a holistic approach, encompassing several key
phases. It commences with a strong emphasis on user-centered design, ensuring that the platform is both
intuitive and accessible for visually impaired users. In parallel, the project focuses on the development of an
accessible interface that caters to a wide array of assistive technologies, including screen readers and Braille
displays. Additionally, it seeks to enhance the user experience by implementing navigation and interaction
features, enabling users to seamlessly browse products, make selections, and complete transactions. The project
also emphasizes the importance of well-structured product listings and descriptions, delivered in accessible
formats. To make the shopping experience more immersive and engaging, React Text-to-Speech (TTS)
technology is integrated to facilitate screen reading. For robust data management, the project leverages Firebase
as the backend, ensuring secure data storage, retrieval, and real-time updates. The active involvement of visually
impaired users in the testing phase allows for the collection of feedback, driving iterative improvements.
Moreover, a commitment to compliance with accessibility standards, including the Web Content Accessibility
Guidelines (WCAG), is central to the project's ethos.

The primary objectives of this endeavor are threefold. Firstly, it strives to create an e-commerce platform that
stands as a pinnacle of accessibility and inclusivity, where visually impaired users can independently and
comfortably engage in online shopping. Secondly, the project seeks to elevate the quality of life and
independence of visually impaired individuals in the digital age, removing the digital barriers they often face in
the e-commerce realm. Lastly, it aspires to set a precedent and inspire others, advocating for more inclusive web
development practices within the e-commerce sector and encouraging a shift towards greater accessibility in
digital projects. By achieving these objectives, the project aims to contribute to the establishment of a more
equitable and inclusive online marketplace, where accessibility is not just a goal but a fundamental requirement
for all.

4.3. Content for User-Centered Design:

The cornerstone of our project lies in user-centered design, where the paramount objective is to prioritize the
needs of visually impaired users. This commitment to user-centricity encompasses various essential elements.
We initiate the process by conducting in-depth user research to gain insights into the specific needs and
preferences of visually impaired individuals. To ensure that our design caters to diverse user segments within
the visually impaired community, we create personas that represent a spectrum of user profiles. The interface we
craft is a result of thoughtful and deliberate design decisions. It is not just visually appealing but also engineered
for ease of navigation, accommodating screen readers, keyboard commands, and touch gestures. The structure
of the interface is clear and consistent, enhancing the user experience and making it intuitive. We embrace a
minimalist design approach, reducing cognitive load by maintaining a sharp focus on essential content.
Readability and legibility are paramount considerations, ensuring that all text is presented in an accessible
format. The iterative design process includes user testing and feedback, actively engaging visually impaired
users to refine the design, making it more user-friendly and efficient with each iteration. This holistic approach
ensures that our e-commerce platform is not just accessible but also designed with the utmost consideration for
the unique needs of its users.

Fig.1: color grading

21830 ijariie.com 2009

Vol-9 Issue-5 2023 IJARIIE-ISSN(O)-2395-4396

4.4. Accessibility Features:

Creating an accessible e-commerce platform involves incorporating a range of features to enhance usability for
visually impaired users:

Alt Text for Images: All images on the platform will have descriptive alt text, ensuring that screen readers can
convey the content and context of images.

Keyboard Navigation: Implementing keyboard shortcuts and navigation commands for users who rely on
keyboard input, enabling them to navigate the site efficiently.

Semantic HTML: Using semantic HTML tags to provide a clear and meaningful structure to web content,
making it more comprehensible for assistive technologies.

High Contrast and Color Contrast: Ensuring high contrast and sufficient color differentiation to make text
and interactive elements easily distinguishable for those with low vision.

Text Resizing: Enabling users to adjust text size to their preference for comfortable reading and screen
interaction.

Consistent Layout and Design: Maintaining a consistent layout and design to enhance predictability and
familiarity for visually impaired users.

Fig.2: Interactive images

4.5. Integration of Text-to-Speech (TTS) Technology:

The core of our accessibility solution involves the integration of React Text-to-Speech (TTS) technology:

•Screen Reading Capabilities: React TTS will be used to read aloud content, providing auditory feedback to
users.

•Interactive Voice Commands: Users will be able to use voice commands to navigate the platform, select
products, and complete transactions.

•Text-to-Speech for Product Descriptions: Product descriptions and details will be read aloud to users upon
request, offering a comprehensive shopping experience.

•Customizable TTS Settings: Users can personalize TTS settings, such as voice preferences and speech rate, to
tailor their experience

4.6. Result:

21830 ijariie.com 2010

Vol-9 Issue-5 2023 IJARIIE-ISSN(O)-2395-4396

The results of the project have been nothing short of transformative, profoundly enhancing the online shopping
experience for visually impaired users. Accessibility has taken center stage, achieved through a blend of user-
centered design principles and the seamless integration of React Text-to-Speech (TTS) technology. These
enhancements have not only rendered the platform user-friendly but have also made it profoundly inclusive. The
user interface, crafted with simplicity and clear navigation in mind, has significantly improved inclusivity,
making it effortlessly interpretable by screen readers and Braille displays. This ensures that visually impaired
users can seamlessly explore product listings, access detailed descriptions, and complete transactions with ease.
Real-time interaction capabilities, facilitated by React TTS, introduce a new level of immediacy. Users can now
issue voice commands, navigate the platform, and receive information without any discernible delay, further
enriching the user experience. Personalization has also been a key focus, with customizable TTS settings
allowing users to fine-tune their experience by selecting their preferred voices and speech rates. This heightened
level of personalization not only contributes to user comfort but also bolsters overall satisfaction, marking a
significant leap towards a more inclusive and accessible digital shopping landscape.

V. DATAFLOW DIAGRAM:

Fig.4: Flowchart

VI. CHALLENGES AND SOLUTION:

6.1. User-Centered Design Complexity

Challenge: Developing a user interface that caters to the diverse needs of visually impaired users can be
complex.

Solution: Implement a comprehensive user-centered design approach that involves visually impaired users in
the design process through user testing and feedback. Create personas representing different user segments
within the visually impaired community to ensure a user-friendly and inclusive design.

21830 ijariie.com 2011

Vol-9 Issue-5 2023 IJARIIE-ISSN(O)-2395-4396

6.2. Integration of Text-to-Speech (TTS) Technology

Challenge: Implementing text-to-speech technology can be technically challenging, particularly for real-time
interaction.

Solution: Collaborate with experts in TTS technology and leverage existing libraries and tools. Ensure that the
platform integrates well with widely used screen readers and assistive technologies.

6.3. Accessibility Testing and Compliance

Challenge: Ensuring the platform adheres to accessibility standards like WCAG can be time-consuming.

Solution: Conduct regular accessibility testing and audits to identify and rectify issues. Use automated testing
tools to expedite the process and achieve conformance with accessibility standards.

6.4. Data Privacy and Security

Challenge: Handling user data and transactions securely is paramount, especially when dealing with sensitive
information.

Solution: Implement strong security measures, such as encryption and secure authentication methods, to protect
user data. Comply with data privacy regulations and communicate transparently with users about data handling
practices.

6.5. User Training and Onboarding

Challenge: Some visually impaired users may require guidance in using the platform and its accessibility
features.

Solution: Develop user guides and resources, including video tutorials, to assist users in utilizing the platform's
features effectively. Offer customer support to address user queries and concerns.

VII. MERITS

The "Ecommerce Website for Visually Impaired" project offers a multitude of merits and advantages,
significantly enhancing the online shopping experience for visually impaired individuals. Its primary
achievement is the remarkable improvement in accessibility, achieved through user-centered design and
compatibility with screen readers and text-to-speech technology. This newfound accessibility fosters inclusivity,
breaking down traditional barriers that excluded visually impaired users from the digital marketplace. Moreover,
the project empowers visually impaired users, granting them autonomy in their online shopping choices and
transactions. Real-time interaction capabilities further enhance the user experience, making rapid product
selection and real-time updates possible. The platform's customizable text-to-speech settings cater to individual
preferences, adding a layer of personalization that enhances user satisfaction. A robust Firebase backend ensures
data security and reliability, crucial for user trust. Ethical compliance underscores the responsible handling of
user data, while collaboration with stakeholders has played a pivotal role in refining the platform. In advocating
for accessibility and setting an example for future projects, this initiative showcases the transformative potential
of technology in creating a more inclusive digital world.

VIII. CONCLUSION

In the ever-evolving landscape of e-commerce, accessibility and inclusivity are not just noble goals but essential
imperatives. The development of the "Ecommerce Website for Visually Impaired" represents a significant
milestone in this ongoing journey to create a digital marketplace where everyone, regardless of their abilities,
can participate with equal ease and independence. Our project has demonstrated that with innovative
technologies, a user-centered approach, and a commitment to accessibility, we can break down barriers and
empower visually impaired users to explore, shop, and engage in online commerce. The results of this project
point to a brighter and more inclusive future in the digital realm. By enhancing the accessibility of our e-
commerce platform through user-centered design, screen reader compatibility, and real-time interaction, we
have not only made shopping more accessible but also fostered a sense of independence and inclusivity.
Visually impaired users now have a platform designed to meet their unique needs, providing them with the
autonomy to make choices and transactions with confidence. Our collaboration with stakeholders, the
incorporation of ethical considerations, and adherence to accessibility standards, such as WCAG, have ensured

21830 ijariie.com 2012

Vol-9 Issue-5 2023 IJARIIE-ISSN(O)-2395-4396

that responsible and inclusive practices underpin every aspect of the platform. It is our hope that our project
serves as a model for responsible, user-centric web development, inspiring future endeavors to prioritize
accessibility and inclusivity.

As we conclude this project, we recognize that the work is far from over. Continuous monitoring, user feedback,
and iterative improvements will remain integral to the success and longevity of the platform. This project is a
testament to the fact that inclusive technology, when thoughtfully designed and responsibly executed, can bring
about positive change, and promote a more equitable digital world.

The "Ecommerce Website for Visually Impaired" is not just a technological achievement; it is a testament to the
human capacity for innovation and empathy. In building a platform where everyone, regardless of their visual
abilities, can partake in the digital marketplace, we have not only reduced barriers but also increased
opportunities. This project represents a vision of a future where accessibility is not a luxury but a fundamental
right, and where technology truly bridges the accessibility gap.

IX. REFERENCES

[1] Web Content Accessibility Guidelines (WCAG) 2.1, W3C, 2018

[2] Accessible Shopping at Amazon for People with Visual Impairments, American Foundation for the Blind,
2023

[3] E-Commerce Website for Visually Impaired, Anagha S Kulkarni, K Shravani, Kanish Vardhan A N,
Srinivas B Patil, Vinaya Jahagirdar, 2023

[4] Visually Impaired Friendly E-commerce website, IEEE Conference Publication, 2023

[5] How to Make Websites Accessible for Blind or Low Vision Customers, Pluralsight, 2023

[6] 5 ways to make websites compatible for visually impaired customers, Fuzzy Math, 2023

[7] Making E-Commerce Accessible to All, Web AIM, 2023

[8] Designing E-Commerce Websites for Visually Impaired Users, Smashing Magazine, 2023

[9] Best Practices for E-Commerce Accessibility, A List Apart, 2023

[10] How to Make Your Ecommerce Website Accessible to Everyone, Shopify, 2023

21830 ijariie.com 2013