Suppose I set a custom validity message for a field using setCustomValidity() to describe why a form field is not valid. Would this content be available to users using assistive technology? If yes, how would it typically be available to users?
For example,
my_element.setCustomValidity("This email address already exists")
If I wanted to ensure people with screen readers would see this message, should I avoid using setCustomValidity() and instead rely on aria-invalid and aria-describedby?
<input name="email" aria-invalid="true" aria-described="error">
<p id="error">This email address already exists</p>
It will work depending of the screenreader and browser you're using.
For instance, with NVDA and Firefox, it correctly announces the error message, while with Chrome it only announces an error.
The best option is to continue using setCustomValidity() and as long as the error is not announced correctly by all screenreader-browser combinations, using one of the techniques available in Success Criterion 3.3.1 - Error Identification
For instance, Using ARIA role of alert for Error Feedback in Forms
<input name="email" aria-invalid="true" aria-describedby="alert_email" />
<p role="alert" id="alert_email">This email address already exists</p>
NOTE: The ARIA describedby attribute may be provided as a helpful addition to provide a reference to the error if the user desires the error message to be conveyed again, but is not strictly necessary for successful application of this technique, and is incidental to the application of this technique