Using generative AI to improve digital accessibility efficiency, featuring Copilot, Whisper, and Claude

Contents

Delivered at the University of Kent's Digitally Enhanced Education Webinar on 2 October 2024.

Watch the presentation

Play Video: Using generative AI to improve digital accessibility efficiency, featuring Copilot, Whisper, and Claude

This video is hosted on YouTube by the University of Kent and has automated captions. Corrected transcript below.

Read the transcript

Transcript: Using generative AI to improve digital accessibility efficiency, featuring Copilot, Whisper, and Claude.

Slide Deck

Download the slide deck for "Using generative AI to improve digital accessibility efficiency, featuring Copilot, Whisper, and Claude" (123 MB PowerPoint).

Resources demonstrated in the presentation

Links

Prompts

Creating Sample Content for Accessibility Remediation Training

Adjust this prompt to suit the context and content you require. This is just an example.

Please create a project update document for a fictious project that aims to make university project managers more efficient in delivery of project outcomes using cats.

The outline should include:

  1. an overview of the project aims.
  2. red/amber/green ratings for time and cost.
  3. a list of project deliverables.
  4. a project roadmap.

Creating a transcript from captions

The process begins by using Subtitle Edit or a similar tool to convert the captions file into plain text with any timings removed.

Instructions:

Please format the following transcript to be more readable.

Use headings, paragraph breaks, and bullet points as appropriate.

Important: because this is a transcript, it is essential that the text itself is kept verbatim. Please make sure you do not change any of the original words or the order in which they are presented.

Transcript:

...

Podcast transcription

This process begins with using Whisper Desktop to create the initial plain text transcript. Here is my guide to setting up Whisper Desktop.

Speaker Attribution

Instructions:

I will paste a transcript from a podcast. The speakers' names are:
Simon Kemp
Grace Compton
Craig Hutton
Lily Kilner
Sophie Green

I would like you to add speaker attribution to the text I will paste, so we know who is talking. Do this by writing the name of the speaker followed by a colon in bold formatting when each speaker speaks. The first speaker is Simon Kemp.

Transcript:
...

Creating a a process flow diagram and an written version of the process.

You are working on a project to provide a process map or flow diagram explaining the access to work process.

I will provide a PDF print out of the government website describing the access to work process.

Please create mermaid markup describing this process. Make sure in the mermaid markup to include suitable accTitle and accDescr keywords and description that you determine are appropriate from the source text.

Follow up with:

Please write a text version of the process, in HTML in the following way.

  1. Add an H2 element that contains a heading something like “Readable Description of the [insert name] process

  2. Create an ordered list element.

  3. Within it create list items describing the process step by step.

  4. Where there are choices, please use the numbers to explain which step to go to, e.g. if Yes, go to step 4, if No go to step 8.

  5. Close the ordered list element when complete.

 

I will then paste the html you make me into the webpage. I have already included a script element to import mermaid from a CDN.

Creating a table showing different colour vision deficincy friendly palettes

You are a senior software engineer with a passion for digital accessibility and the web content accessibility guidelines at level A and level AA. When you create content, you strive to make it as digitally accessible as possible.

You are also confident when given instructions to ask questions and suggest alternative routes to achieve the same goal if you think they will be better.

You have been given the following task. The overall goal is to create set of tables based on data of colour palettes.

Please create a JavaScript or snippet that will do the following.

You will use a set of data held in the cvdp.json file in the same directory as the webpage you will work on.

The cvdp.json is structured as follows. A key called “palettes” contains multiple colour palettes. These are structure as a further key for the name of the palette, with an array containing a set of colour codes in hex format that make up each palette.

Within a div with an id of “insertHere”, for every palette in the JSON file, you will:

  1. create a <section> element with an ID of the palette name with the word “Section” appended to it. You will remove any spaces from the ID e.g. abcPaletteSection.

  2. Create an <h2> element at the start of the section containing the name of the palette e.g. “abc Palette”.

  3. Create a <table> with an ID of the palette name with the word Table appended to it, e.g. abcTable.

  4. Create a <caption> for the table with a class of “hidden”. The caption will contain the name of the palette.

  5. The structure of the table is to be as follows.

  6. The first row is the column heading. There will be five columns in every table. The first column name is “Colour”, the second column name is “Trichromacy”, the third column name is “Protanopia”, the forth column name is “Deuteranopia” and the fifth column name is “Tritanopia”. These names will be the content of each cell that makes up the column heading row.

  7. The first column will be part of a <tr> element with a “role” of “row” within a <thead> element with a “role” of “rowgroup”

  8. Each cell for the column heading will be a <th> element with a “scope” of “col” and “role” of “columnheader”

  9. Each subsequent row will be for each colour in the palette. It will be part of a <tbody> element with a “role” of “rowgroup”. Each row within that will be a <tr> element with a role of “row”.

  10. The first cell of each row will be a row header, it will be a <th> element with a “scope” of “row”, a “data-label” of “colour” and a “role” of “rowheader”. The content of the cell will be the colour code in hex format from Json data for the palette. So for example the second row, which is the first non-column row will be about the first colour in the palette, the next row will be the second colour and so on. The rows will finish when all the colours in the palette have been parsed.

  11. All the cells in the second column from this row onwards will be <td> elements given a class and “data-label” of “trichromacy” and role of “cell”. Each cell will have a style where the “background-color” of the cell is set to the current hex colour from the content of the palette being parsed and will match the content of the first cell in each particular row.

  12. All the cells in the third column from this point will be <td> elements given a class and data-label of “protanopia” and role of “cell”. Each cell will have a style where the “background-color” of the cell is set to the current hex colour from the content of the palette being parsed and will match the content of the first cell in each particular row.

  13. All the cells in the fourth column from this point will be <td> elements given a class and data-label of “deuteranopia” and role of “cell”. Each cell will have a style where the “background-color” of the cell is set to the current hex colour from the content of the palette being parsed and will match the content of the first cell in each particular row.

  14. All the cells in the fifth column from this point will be <td> elements given a class and data-label of “tritanopia” and role of “cell”. Each cell will have a style where the “background-color” of the cell is set to the current hex colour from the content of the palette being parsed and will match the content of the first cell in each particular row.

Creating a table showing different colour vision deficincy friendly palettes

You are a senior software engineer with a passion for digital accessibility and the web content accessibility guidelines at level A and level AA. When you create content, you strive to make it as digitally accessible as possible.

You are also confident when given instructions to ask questions and suggest alternative routes to achieve the same goal if you think they will be better.

You are working on a project that aims to help people adjust SVG images to use a selection of colour blind friendly colour palettes so that the SVG images will be more understandable by those who are colour blind.

The task you have been given is:

  1. Create a webpage using HTML, CSS and Javascript or Jquery that allows a user to upload a SVG file. No data will go to a server, everything will occur on the client side.

  2. Once the SVG file is uploaded, display the same image in four containers.

  3. The first should have the class “trichromacy”,

  4. The second should have the class “protanopia”,

  5. the third should have the class “deuteranopia”,

  6. the fourth should have the class “tritanopia”.

  7. Note that we already have a solution to implement colour blind simulation, so for your task, all that is important is setting the class for each container.

  8. Since these four images may not display tidily, it’s important that this is a responsive webpage.

  9. The containers should show the whole centered SVG, maintaining its aspect ratio, using for example object-fit: contain; and object-position: center; If the SVG doesn't have a viewBox attribute, one should be calculated and added to ensure proper scaling.

  10. Identify all the unique colours used in the SVG and display their names and their colours on screen to the user.

  11. We have prepared a list of colour blind friendly colour palettes in the https://matthewdeeprose.github.io/cvdp.json file. The cvdp.json is structured as follows. A key called “palettes” contains multiple colour palettes. These are structured as a further key for the name of the palette, with an array containing a set of colour codes in hex format that make up each palette. 

  12. Provide the user with a drop down menu to select a colour blind friendly colour palette from the cvdp.json file. Since the palettes have different numbers of colours, only show in the drop down the name of the palette and how many colours are available and only allow the user to select a palette that has the greater than or equal to the number of colours in the palette.

  13. If the number of colours in the SVG file is larger than the number of colours in any of the palettes, then offer the palette with the largest number of colours available. Inform the user how many colours are in their SVG and that it exceeds the amount available in the palette.

  14. Once the user has chosen a colour palette, show them an interface that shows the colours in the original SVG file and the colours in their chosen colour blind friendly colour palette from the cvdp.json file. Make this attractive and usable by showing the colours in the SVG side by side with the colours available in the palette.

  15. Allow the user to choose to swap colours in their original SVG for colours in their chosen colour blind friendly colour palette.

  16. Dynamically update the on-screen image in the four containers with the new colours as the user chooses them. They can then view the results and experiment with different palettes and different colours until they find a palette that will present their image in a way that those who are colour blind can distinguish.

  17. When the user is happy with the result, provide a way for them to save the SVG file with their updated colour scheme.

  18. Provide a “reset” button so that users can reset the colours back to how they started.

  19. Provide an “upload new SVG” button so that users can start the process again with a new SVG file.