One of my recent webinars, AI and Web Accessibility: A Technical and Legal Perspective, discussed how development and web teams could leverage ChatGPT and other generative AI solutions to help develop plans, understand user challenges, and suggest solutions. To test out my theory, I decided to use ChatGPT to learn exactly how useful it could be.
The following result includes several helpful prompts that were generated as a result of this experiment. However, it’s important to remember that AI is only beneficial when used by the right people. While the text it generates may seem legit at first, it could include essential gaps that only an experienced person will spot.
How can AI and accessibility work together? Using ChatGPT to help you develop the best prompts is an excellent experience for anyone, regardless of goal and topic.
My goal was simple: I wanted to create two powerful prompts to assist web teams in enhancing web accessibility knowledge. This iterative, conversation-based approach led to prompts that could facilitate improvement across three critical stages of web development: UX/design, development, and testing/QA. But it wasn't a linear journey. Through numerous iterations and exchanges, I was able to refine this goal and formulate impactful prompts.
The first product of my experiment was a topic identification prompt: "Generate a list of the top 10 areas under design/UX, development, and testing/QA that significantly impact web accessibility."
This prompt helped identify crucial aspects that web professionals should focus on for better accessibility. The second and third results were open-ended learning and example prompts: "Explain the importance of [aspect] for web accessibility in relation to [field],” and "Provide examples of good and bad practices of [aspect] in web accessibility, along with relevant code examples."
These prompts provided the flexibility to explore any aspect of the identified list. My efforts began with a broad idea: Outlining the best practices for web accessibility across various stages of the web development process. ChatGPT helped narrow down and clarify focus areas. Using it, I identified three pivotal phases of web development: UX/design, development, and testing/QA.
Next, I zoomed in on the core aspects of web accessibility, such as color contrast, navigation, image labels, header structures, and complexities such as checkout and delivery options on e-commerce websites.
A crucial turning point was reached after providing example outputs for each section and illustrating expected results. This allowed me to validate the effectiveness of the prompts. It also ensured the prompts would be beneficial and easy to understand.
To make these insights more practical, I showcased output examples for "learning" and "good and bad" practices surrounding web accessibility, complete with relevant code examples where applicable. Refining my prompts through continuous iterations ultimately led to the final prompt structure.
I’ve included the results of these prompts. Feel free to use them as you refine and build for your individual or team needs.
"ChatGPT, generate a list of the top 10 areas under design/UX, development, and testing/QA that significantly impact web accessibility."
Results:
To show the results of the open-ended prompt, I asked ChatGPT to use the list above and select the fourth item on each list to produce the prompt.
"ChatGPT, explain the importance of “Use of images and alt texts” for web accessibility in Design/UX."
"ChatGPT, provide an example of good and bad practices of “Use of images and alt texts” in web accessibility, along with relevant code examples."
"ChatGPT, explain the importance of “Proper header structures: for web accessibility in Development."
"ChatGPT, provide an example of good and bad practices of “Proper header structures: in web accessibility, along with relevant code examples."
"ChatGPT, explain the importance of “Screen reader testing” for web accessibility in Testing/QA."
"ChatGPT, provide an example of good and bad practices of “Screen reader testing” in web accessibility, along with relevant code examples."
The output of these prompts can be viewed below. This is where an expert will see mistakes, even if the results initially seem correct.
“ChatGPT, explain the importance of “Use of images and alt texts” for web accessibility in Design/UX.”
'Images are integral to modern web design, offering a visual representation of content. However, for visually impaired users, understanding the content of images can be challenging. Alt text provides a textual description of an image, enabling screen readers to convey the image's message to the user, which makes the website more accessible.'
"ChatGPT, provide an example of good and bad practices of “Use of images and alt texts” in web accessibility, along with relevant code examples."
'Good practice: Including descriptive alt text that conveys the same information as the image.
"HTML<img src= "dog.png" alt= "A golden retriever sitting in a park."/>”
Bad practice: Not including alt text or providing uninformative alt text.
“HTML<img src="dog.png" alt=""/> <img src="dog.png" alt="Image"/>”'
Here’s where AI got it wrong. The “bad practice” example is worded somewhat incorrectly. It's okay to use 'Alt=""' when the image conveys no context, so it's not always bad—and in many cases, it's better for screen readers here to have 'alt=""' on meaningless images so they don't hear anything.
"ChatGPT, explain the importance of “proper header structures” for web accessibility in development."
'Headers structure a webpage, similar to how a table of contents organizes a book. Screen readers and assistive technology rely on this structure to help users easily navigate the content. A logical, hierarchical header structure makes the content more understandable for everyone.'
"ChatGPT, provide an example of good and bad practices of “proper header structures” in web accessibility, along with relevant code examples."
'Good practice: Using headers to structure content hierarchically.
"HTML
<h1>Main Page Title</h1>
<h2>Section Title</h2>
<h3>Subsection Title</h3>”
Bad practice: Skipping header levels or using headers for style purposes.
“html
<h1>Main Page Title</h1>
<h3>Section Title</h3>”'
"ChatGPT, explain the importance of “Screen reader testing” for web accessibility in Testing/QA."
'Screen readers are essential tools for visually impaired users to navigate websites. They convert text into speech or Braille output. Testing your website with screen readers helps ensure that all interactive elements, images, links, and forms are appropriately labeled and in logical order for all users.'
"ChatGPT, provide an example of good and bad practices of “Screen reader testing” in web accessibility, along with relevant code examples."
'Good practice: Testing your site with popular screen readers like NVDA or VoiceOver to ensure the content is correctly read out.
Bad practice: Assuming all screen readers will interpret the site the same way or neglect to test with screen readers. Remembering that different screen readers may interpret the same content differently is important.'
In this scenario, code examples may not directly apply. Still, it emphasizes the importance of thoroughly testing your website with various screen readers.
As you can see, AI can be a valuable tool for learning and understanding accessibility. However, AI-powered technology like ChatGPT cannot replace the assistance of accessibility experts and solutions.
Click here to watch our AI and Web Accessibility webinar, which covers:
And much more!