2025 Accessible artificial intelligence (AI) chatbot in 5 steps (in progress)

Project overview

Summary: I designed and developed an accessible AI chatbot user interface (UI) that gives accessibility solutions using JavaScript, Node.js, OpenAI APIs from ChatGPT, and conformance to Web Content Accessibility Guidelines 2.1 Level AA.

My design process

• Step 1. Empathize

• Step 2. Define

• Step 3. Ideate

• Step 4. Prototype

• Step 5. Test

For my design process, I followed these steps: empathize, define, ideate, prototype, and test (Figure 2 below). 

Step 1. Empathize

• Interview users in digital disability advocacy groups

• Maintain a respectful, friendly, and non-judgmental approach

In the first step, Empathize, I decided to interview people with lived experiences of various abilities in disability rights advocacy groups to empathize on common digital accessibility barriers for AI chat bots.

Some key findings included:

• There is a high need of seamless keyboard-only navigation and no keyboard traps for users that may use screen readers for digital spaces

• There is a need for high contrast between text and backgrounds while asking and receiving AI-generated responses

• There is a need for alternative text for meaningful images generated by AI

• There is a need for focus and hover states for buttons

• There is a need for using more than color alone to show information

Step 2. Define

• Objectives

• Personas

• Pain points

• Decisions and challenges

In the second step "Define" of this project, I decided to develop clear, actionable objectives from the feedback received from Step 1. Empathize. 

These are the objectives:

1. Design an accessible user interface (UI) that is keyboard navigable

2. Develop an accessible developer tool with JavaScript, Node.js, and OpenAI API keys from ChatGPT, a well known AI chatbot of our time

In the next phase of the Define step, I decided it was important to craft a user persona based on the interview feedback from the Empathize step. Personas will help identify and alleviate customer pain points to guide my design decisions. Below is a anonymous persona based on the interviews.

This is Persona 1:

• Persona 1 is a 22 year-old college student that is ambitious and interested in engineering AI Chatbots for a science competition. This student identifies as being blind, so she relies on screen reader assistive technology. She constantly feels frustrated on the barriers of robotics engineering, but feels hopeful for change.

These are the 3 common pain points:

1. Keyboard navigation issues, such as keyboard traps

2. Color contrast issues, such as low contrast between background and text

3. Lack of alternative text and/or visual descriptions for images

For this project, it will be important to document each design step on this portfolio site with accessibility in mind to address the common pain points. This means that I'll have to conduct thorough research to use the most accessible 3rd-party tools available. The main challenge for me will be attempting to make a design and development project accessible in addition to how I present the project on this website. HTML is an a11y.

By completing the Define step, I set the stage for a human-centered and purpose-driven design approach, ensuring that my design and developer decisions and solutions would effectively cater to the identified user needs while aligning with project goal.

Step 3. Ideate

• Brain storming

• All ideas are valuable

• Collaborate for new perspectives

• Prioritize within time and budget

In the third step, Ideate, I used brainstorming to bring out all my innovative ideas and design concepts to develop this project. I reached out to my network to collaborate and gain valuable insights. I encouraged each "team member" to contribute their unique perspectives by listening to understand. The project timeline was 3 months and there is no budget, so all open-source tools were prioritized. Again, it was important to make sure the tools used are the most accessible ones possible that are available.

Step 4. Prototype

• Basic development tool set-up

• Low fidelity wireframes

• High Fidelity designs

• Mockups

Part A. Moving into Step 4, Prototype, I will show the basic set-up for developing this project tool from a coding perspective using JavaScript, Node.Js, npm, OpenI API keys from ChatGPT and more at the front-end.

Here are the steps from ChatGPT to develop a chatbot in Windows 11:

1. Set up the project in Command Prompt (cmd).

a. Create a new folder for project.

mkdir ai-chatbot

cd ai-chatbot

b. Initialize a new Node.js project.

npm init -y

c. Install the required dependencies.

npm install express dotenv openai body-parser

2. Configure the environment variables.

a. Open File Explorer and navigate to your project folder

b. Create a .env file by right-clicking inside the folder, selecting New > Text Document, and name it .env at the end.

c. Add the OpenAI API key to this new .env file.

OPENAI_API_KEY=your_openai_api_key

3. Write JavaScript code.

a. Open your project folder in Visual Studio Code.

b. Create a new file named index.js by right-clicking inside the Explorer panel on the left and Select New file, then name it index.js.

c. Add the following code to index.js file and save.

const express = require('express'); const bodyParser = require('body-parser'); const { Configuration, OpenAIApi } = require('openai'); require('dotenv').config(); const app = express(); const port = 3000; // Middleware app.use(bodyParser.json()); // OpenAI Configuration const configuration = new Configuration({ apiKey: process.env.OPENAI_API_KEY, }); const openai = new OpenAIApi(configuration); // Routes app.post('/chat', async (req, res) => { const userMessage = req.body.message; if (!userMessage) { return res.status(400).json({ error: 'Message is required.' }); } try { const response = await openai.createChatCompletion({ model: "gpt-3.5-turbo", // or "gpt-4" if available messages: [ { role: "system", content: "You are a helpful assistant." }, { role: "user", content: userMessage }, ], }); const botMessage = response.data.choices[0].message.content; res.json({ reply: botMessage }); } catch (error) { console.error('Error with OpenAI API:', error.message); res.status(500).json({ error: 'Failed to fetch response from AI.' }); } }); // Start the server app.listen(port, () => { console.log(`AI Chatbot server running at http://localhost:${port}`); }); 

4. Run the Chatbot.

a. Go back to the Command Prompt (cmd) and start the server by running this code below.

node index.js 

b. You may get a message that states AI Chatbot server running at http://localhost:3000

5. Start testing the Chatbot.

Step 5. Test (currently in progress)

• Unit and integration testing using Jest frameworks

• Source code management (SCM) for different versions

• Pull request review for code with network

• Web Content Accessibility Guidelines (WCAG) 2.1 level AA

In step 5, test, I'll be using a framework to test the JavaScript code and manage the source code for different versions of the tool. Since this is a passion project, I'll be reaching out to my network to have a brief pull request review for the code. Lastly, I'll be using WCAG 2.1 level AA to guide me in testing the chatbot user interface to address and fix three basic pain points from earlier.

These are the 3 common pain points again:

1. Keyboard navigation issues, such as keyboard traps

2. Color contrast issues, such as low contrast between background and text

3. Lack of alternative text or visual descriptions for images

Acknowledgements

A big thank you to the resources below that helped me with this UX design project:

• AIVA Chatbot template - A template by Abubakar Sherazi for the chatbot design of this project by AIVA available in the Figma community.

• ChatGPT - An artificial intelligence prompt interface that answers questions by OpenAI. This web application assisted me in giving me ideas to how to approach this project's write-up. I used some of the answers and APIs from ChatGPT with revisions.

• Google UX Professional Program - A remote online program by Google on Coursera with project-based learning and certificates on UX design best practices.

• Flaticon and iconSVG free icons - Talented designers created original icons and graphics to use for this project. Here are these awesome designers:

  • • • • • Accessible free icon by NajmunNahar

          • Prosthetic leg free icon by Hary Murdiono JS on iconSVG in Figma Plugin

          • Arrow free icon by Hary Murdiono JS on iconSVG in Figma Plugin

          • Artificial free icon by Satawat Anukul

          • Circular glasses free icon by Freepik

          • Loafer free icon by NeXore88

          • News free icon by iconSVG in Figma Plugin

          • Sloth free icon by NeXore88

          • Sloth free icon 2 by NeXore88

          • Sloth free icon by iconSVG in Figma Plugin

          • White cane free icon by agus raharjo

          • Front free icon by Ylivdesign

          • Wheelchair free icon by iconSVG in Figma Plugin

Sources

1. Canva. (2023). Canva Smartmockups. Canva.com; Canva. https://www.canva.com

2. Figma. (2022). Figma: the collaborative interface design tool. Figma. https://www.figma.com/

3. MeisterLabs. (2019). MindMeister. MindMeister; MindMeister. https://www.mindmeister.com/

4. Standford University. (2012). Design Thinking Process. https://web.stanford.edu/class/me113/d_thinking.html

5. W3C. (2018, June 5). Web Content Accessibility Guidelines (WCAG) 2.1. W3.org. https://www.w3.org/TR/WCAG21/