Appendix G: AI for OER Accessibility and Higher Education
ChatGPT for Higher Education
ChatGPT for Higher Education by Rob Rose, University of North Florida.
“ChatGPT in Higher Education explores the positive integration of AI in academia and the ways that it might enhance pedagogy, research, and professional development.”
AI for HTML Accessibility
Tables
In the Accessibility chapter, we discussed how to edit HTML to make a table accessible. This editing gets more time consuming as tables get larger, but AI like ChatGPT can automatically make these edits.
Prompt: Make the following html table accessible by using scope="col" and scope="row" where appropriate:
<table class=" aligncenter" style="border-collapse: collapse; width: 48.4219%; height: 45px;" border="0">
<caption>Make me accessible</caption>
<tbody>
<tr style="height: 15px;">
<td style="width: 25%; height: 15px;">Category A</td>
<td style="width: 25%; height: 15px;">Category B</td>
<td style="width: 25%; height: 15px;">Category C</td>
<td style="width: 25%; height: 15px;">Category D</td>
</tr>
<tr style="height: 15px;">
<td style="width: 25%; height: 15px;">1</td>
<td style="width: 25%; height: 15px;">2</td>
<td style="width: 25%; height: 15px;">3</td>
<td style="width: 25%; height: 15px;">4</td>
</tr>
<tr style="height: 15px;">
<td style="width: 25%; height: 15px;">5</td>
<td style="width: 25%; height: 15px;">6</td>
<td style="width: 25%; height: 15px;">7</td>
<td style="width: 25%; height: 15px;">8</td>
</tr>
</tbody>
</table>
This yields the HTML below which is accessible because of the <th> tags and scope=”col”/”row”.
<table class="aligncenter" style="border-collapse: collapse; width: 60%; height: 45px;" border="0">
<caption>Make Me Accessible</caption>
<tbody>
<tr style="height: 15px;">
<th style="width: 25%; height: 15px;" scope="col">Category A</th>
<th style="width: 25%; height: 15px;" scope="col">Category B</th>
<th style="width: 25%; height: 15px;" scope="col">Category C</th>
<th style="width: 25%; height: 15px;" scope="col">Category D</th>
</tr>
<tr style="height: 15px;">
<th style="width: 25%; height: 15px;" scope="row">1</th>
<td style="width: 25%; height: 15px;">2</td>
<td style="width: 25%; height: 15px;">3</td>
<td style="width: 25%; height: 15px;">4</td>
</tr>
<tr style="height: 15px;">
<th style="width: 25%; height: 15px;" scope="row">5</th>
<td style="width: 25%; height: 15px;">6</td>
<td style="width: 25%; height: 15px;">7</td>
<td style="width: 25%; height: 15px;">8</td>
</tr>
<tr style="height: 15px;">
<th style="width: 25%; height: 15px;" scope="row">9</th>
<td style="width: 25%; height: 15px;">10</td>
<td style="width: 25%; height: 15px;">11</td>
<td style="width: 25%; height: 15px;">12</td>
</tr>
</tbody>
</table>
We now have this accessible table:
Category A |
Category B |
Category C |
Category D |
|---|---|---|---|
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
As opposed to this table which is not accessible:
| Category A | Category B | Category C | Category D |
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
Lists
Lists are much easier. Basically you just tell the AI to create an HTML list and you provide the list.
peaches
apples
bananas
pears
grapes
strawberries
kiwi
<li>peaches</li>
<li>apples</li>
<li>bananas</li>
<li>pears</li>
<li>grapes</li>
<li>strawberries</li>
<li>kiwi</li>
</ul>
- peaches
- apples
- bananas
- pears
- grapes
- strawberries
- kiwi
Nested Lists
Nested lists are a little trickier. Note the prompt difference and the second prompt to get a solution.
Prompt: Create html code for the following list. Nest San Francisco under Los Angeles and nest Washington and Milwaukee under the Braves.
Los Angeles Dodgers
San Francisco Giants
St. Louis Cardinals
Chicago Cubs
New York Mets
Atlanta Braves
Washington Nationals
Milwaukee Brewers
Philadelphia Phillies
Cincinnati Reds
This generated an HTML ordered list that had unordered nested content, so I asked nicely: “please change the nested unordered lists to ordered lists” which gave me the HTML for the following list. (To get the lower case letters, I added a Pressbooks class to the ordered list: <ol class=”legal”>)
HTML
<li>
Los Angeles Dodgers
<ol>
<li>San Francisco Giants</li>
</ol>
</li>
<li>St. Louis Cardinals</li>
<li>Chicago Cubs</li>
<li>New York Mets</li>
<li>
Atlanta Braves
<ol>
<li>Washington Nationals</li>
<li>Milwaukee Brewers</li>
</ol>
</li>
<li>Philadelphia Phillies</li>
<li>Cincinnati Reds</li>
</ol>
Final nested list
-
Los Angeles Dodgers
- San Francisco Giants
- St. Louis Cardinals
- Chicago Cubs
- New York Mets
-
Atlanta Braves
- Washington Nationals
- Milwaukee Brewers
- Philadelphia Phillies
- Cincinnati Reds
I haven’t yet had consistent luck with nesting lists via AI/ChatGPT, so remember you can use the Visual Editor’s Increase Indent button to nest lines of a list.
Links
We all know using url’s for link text is not accessible basically because the screen reader will read the entire link. So:
https://ghr.nlm.nih.gov/primer/basics/dna
becomes:
“h-t-t-p-s colon backslash backslash g-h-r dot n-l-m dot g-o-v backslash….” and so on, basically reading individual letters and dots and backslashes etc.
The following prompt will turn a url into an HTML anchor/href link.
https://ghr.nlm.nih.gov/primer/basics/dna
https://medlineplus.gov/genetics/understanding/basics/gene/
which yields us:
This can be a REAL time saver, especially if you have a list of 10, 20 or more url’s.
Note
Often the AI generates extra code needed for an entire webpage.
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Accessible Links</title>
</head>
<body>
<nav>
<ul>
<li><a href=”https://ghr.nlm.nih.gov/primer/basics/dna”>Genetics Home Reference – DNA Basics</a></li>
<li><a href=”https://medlineplus.gov/genetics/understanding/basics/gene/”>MedlinePlus – Gene Basics</a></li>
</ul>
</nav>
</body>
</html>
You can request that the AI delete all the non-essential HTML:
Yields:
<a href=”https://ghr.nlm.nih.gov/primer/basics/dna”>Genetics Home Reference – DNA Basics</a>
<a href=”https://medlineplus.gov/genetics/understanding/basics/gene/”>MedlinePlus – Gene Basics</a>
