Appendix I: A11y Remediation via AI
Brief description
I have had success giving AI a page’s worth of HTML and getting back accessible HTML by using the following prompt. Gemini allows you to upload the HTML in the prompt field. Copilot only allows about 2000 characters to be uploaded, but you can cut & paste the HTML into a Word doc and upload that to get the same results.
Prompt
I work in Pressbooks which is a derivative of WordPress.
Our current task is to make sure all of our Pressbooks are accessible.
I want to give you webpage HTML. Please check it for accessibility and make edits as needed to make it accessible.
I only want you to consider the following areas:
Organizing content:
- Content is organized under headings and subheadings.
- Headings and subheadings are used sequentially (e.g., Heading 1, Heading 2).
- Going from H1 to H3 or H4 is not accessible
Images:
- Images that convey information must include alternative text (alt text) descriptions of the image’s content or function.
- Alt text should be limited to 10-20 words (less than 125 characters).
- If more are needed, they should appear in the surrounding text or a Long Description.
- Graphs, charts, and maps also include contextual or supporting details in the text surrounding the image.
- Images do not rely on color to convey information.
- Images that are purely decorative do not have alt text descriptions. (Descriptive text is unnecessary if the image doesn’t convey contextual content information).
Links:
- The link text describes the destination of the link and does not use generic text such as “click here” or “read more.”
- If a link will open or download a file (like a PDF or Excel file), include a textual reference in the link information (e.g., [PDF]).
- Links do not open in new windows or tabs.
- If a link must open in a new window or tab, a textual reference is included in the link information (e.g., [NewTab]).
- For citations and references, the title of the resource is hyperlinked, and the full URL is not hyperlinked.
Tables:
- Tables are used to structure information and not for layout.
- Tables include row and column headers.
- Row and column headers have the correct scope assigned.
- Tables include a caption.
- Tables avoid merged or split cells.
- Tables have adequate cell padding.
- Double check that all tables have the appropriate attributes of scope = “row” and scope = “col”.
Multimedia:
- All audio content includes a transcript. The transcript includes all speech content and relevant descriptions of non-speech audio and speaker names/headings where necessary.
- Videos have captions of all speech content and relevant non-speech content that has been edited by a human for accuracy..
- All videos with contextual visuals (graphs, charts, etc.) are described audibly in the video.
Formulas:
- Equations written in plain text use proper symbols (i.e., −, ×, ÷). [1]
- For complex equations, one of the following is true:
- They were written using LaTeX or MathML and are rendered with MathJax (Pressbooks).
- They were written using Microsoft Word’s equation editor (MS Word).
- They are presented as images with alternative text descriptions.
- Written equations are properly interpreted by text-to-speech tools. [2]
Font size:
- Font size is 12 point or higher for body text in Word and PDF documents.
- Font size is 9 point for footnotes or endnotes in Word and PDF documents.
- Font size can be enlarged by 200 per cent in webbook or ebook formats without needing to scroll side to side.
Short codes:
Short codes are HTML in brackets with text like “caption” or “heading” (no quotation marks). They should remain in your response as they appear in the Pressbooks’ HTML. Pressbooks converts them into accessible HTML and adds HTML such as <figure> and <figcaption>.
Do not remove these short codes; leave them in your response as they are in the Pressbook HTML.
Note: Structural Edits Only
Keep every word of the text exactly as is, but only change the HTML tags (like <b> to <h3> or adding alt attributes.