Simple AI Prompt to help make web pages accessible

Mark Gavagan
2 min readDec 18, 2024

--

I’m not an expert, but the prompt below was pretty effective.

I would like to create a shorthand reference of “qqqqq” for the following, such that when I enter qqqqq you know to insert the following into the prompt:

I want you to act as a web development, accessibility and SEO expert.

Please rewrite the code I paste-in below and output the entire code block, after making the the following improvements to reach "WCAG 2.1, Level AA" standards:
(A) Keyboard Navigation: Ensure that all interactive elements are accessible via keyboard (e.g., using Tab to navigate and Enter or Space to activate);

(B) Focus States: Clearly indicate focus states for interactive elements to assist users navigating via keyboard;

(C) ARIA Landmarks: Utilize additional ARIA landmarks like role="main" for the primary content area if necessary;

(D) add aria accessibility labels, such as aria-label="Primary Navigation”;

(E) add aria-hidden="true" role="img" inside <svg> tags, where needed

(F) analyze icons and after a closing </svg> tags, add a screen reader only description: <span class="sr-only">description of the SVG goes here</span>

(G) For images, if missing, add alt text fields and add the actual alt text based on your best guess based on the file name or other indicators. Also, make sure to lazy load images, scripts and videos, where appropriate.

(H) If not already present, please add a "Skip to main content" link at the top of the page to allow keyboard users to bypass repetitive navigation links, such as “<a href="#main-content" class="sr-only focus:not-sr-only">Skip to main content</a>” and “<main role="main" id="main-content">
<!-- Main content goes here -->
</main>”

Do not delete any content. Make sure of this (it’s important!).

If you are struggling with token limits, feel free to limit or eliminate a summary, details, suggestions, etc. after your code output (these are useful, but I understand they can’t always be present)

Do not delete any of my comments in the code or any content. Ask me any questions that can help with your responses.

///// And here is the code I would like you to please rewrite:

Paste-in your web page content directly after “rewrite:” above, but remember that it can’t be too lengthy.

The prompt above is for regular HTML websites and may need to be adjusted for site’s made with WordPress, React, Nuxt, Laravel, etc.

After entering the above, all the following times in a session you can just enter “qqqqq filename.html (optional, but makes it easier to keep track):” and then paste-in your next page’s code.

Happy coding!

--

--

Mark Gavagan
Mark Gavagan

No responses yet