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:

Accessible
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:

Not A11y
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.

 

Prompt: Create html for the following list:
peaches
apples
bananas
pears
grapes
strawberries
kiwi
And you get this HTML:
…for this list.
<ul>
<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

<ol class=”legal”>
<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

  1. Los Angeles Dodgers

    1. San Francisco Giants
  2. St. Louis Cardinals
  3. Chicago Cubs
  4. New York Mets
  5. Atlanta Braves

    1. Washington Nationals
    2. Milwaukee Brewers
  6. Philadelphia Phillies
  7. 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.
 

Screen grab of the Visual Editor's Increase Indent button.
Use the Increase Indent button to nest Lists.

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.
 

Prompt: Create accessible html links from the following url’s. For the links’ text, use the site name and then add the webpage name:

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.
 

<!DOCTYPE html>
<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:
 

Prompt: please delete everything but the 2 anchor html text

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>

License

Icon for the Creative Commons Attribution 4.0 International License

ACT@PSU Quick Start Guide Copyright © 2020 by Wade Shumaker is licensed under a Creative Commons Attribution 4.0 International License, except where otherwise noted.

Share This Book