• Hi, I am working on accessibility improvements to a site after having it reviewed by a screen reader user as part of an accessibility audit and they had some feedback about the accessibility of error messages in the contact forms on the site. I have since done some testing myself using the VoiceOver assistant on MacOS and I have been able to experience it directly.

    Modify screen-reader-response div to show all if its content to screen readers
    Whilst there is accessibility support in CF7 and a screen-reader-response div element is generated with a list of the errors there is a shortcoming in that it’s only the main paragraph of text that is highlighted with the various role="status", aria-live="polite" and aria-atomic="true" attributes, e.g:

    <p role="status" aria-live="polite" aria-atomic="true">One or more fields have an error. Please check and try again.</p>

    But the screen-reader-response div with this error message actually contains an unordered list containing all of the elements where errors occur and links to them (as long as the item has an ID attribute), and this list of errors is something the accessibility audit on my site highlighted as something they’d like to have and it turns out CF7 does already generate one. The problem is this list is not accessible to screen readers as it is only the paragraph that is announced to screen readers rather than all content within the screen-reader-response div, so what I think is needed is for the screen-reader-response div to have all of the role="status" aria-live="polite" aria-atomic="true" attributes.

    I have two questions related to this, my first question is whether this change is the best / correct solution to the issues here and if so is there a way the output of this div could be changed?

    Why the separate screen-reader-response div to show errors?
    My second question relates to the use of a separate screen-reader-response div for these error messages in the first place. The reason I am questioning this is that it would actually be useful for non-screen reader users to also get a list of error messages with links to the form field locations as well, I had actually been considering whether I could implement this functionality but as I see this already happens for screen readers users it makes me wonder why the need for two separate elements for error messages? Would it be possible to just have one error message panel to be shown which uses all of the accessible aria attributes but is also seen by visual users who then get the benefit to the list of errors with links to the form fields?

    Include name of field in the list of errors
    Another accessibility benefit would be to bring either the text label or ID / name of the form field into the list of error messages, as you can end up with a list of repeated entries like this:

    One or more fields have an error. Please check and try again.
    
    The field is required.
    The field is required.
    The field is required.
    The field is required.
    The field is required.
    The field is required.

    Thanks!

  • The topic ‘Modify `screen-reader-response` div to show all if its content to screen readers’ is closed to new replies.