ChatGPT Can Be An Amazing Resource

Wow! ChatGPT is an amazing new open source AI you can use to help determine how to write accessible code--perfect for folks like me who have some coding knowledge but definitely need additional help. Here is a sample interaction--but I can't vouch for how correct the response is. (Hence, "can be" in my title....)

My Q: How do I code a button to be accessible to screen readers?

ChatGPT's answer:

To make a button accessible to screen readers, you can add a few attributes to the HTML <button> element. These attributes include aria-label, aria-labelledby, and aria-describedby. The aria-label attribute allows you to specify a short, descriptive label for the button that will be read by screen readers. For example:

<button aria-label="Submit">
  Submit
</button>

The aria-labelledby attribute allows you to specify an element on the page that contains the label for the button. This can be useful if the label for the button is not visible on the screen, but is present in the page's HTML. For example:

<div id="button-label">Submit</div><button aria-labelledby="button-label">
  Submit
</button>

Finally, the aria-describedby attribute allows you to specify an element on the page that contains a description of the button's function. This can be useful if the button's purpose is not immediately clear from its label. For example:

<div id="button-description">This button submits the form</div><button aria-label="Submit" aria-describedby="button-description">
  Submit
</button>

In addition to these attributes, you should also make sure that the button has a visible label that can be read by users who are not using screen readers. This can be accomplished by including the label text within the button element, or by using CSS to style the label so that it is visible on the screen.

Again, WOW!