Search mechanism inaccessibility with screen reader

[krishnabodawala]

Description

Search engine provided on the website doesn't follow stander mechanism, a container pops up while typing in the search field, which a screen reader user is unaware of, because there is no programmatically determined way provided to the search result container to be announce by screen readers

To resolve this issue, firstly, provide text instruction how to find the search result. Secondly, create an empty container designated as live region, and inject the search result content using JavaScript into it.

Note

The relevant WCAG success criteria is 1.3.1, and 3.3.2

Reference Accessibility Audit #245

Background

Test performed by Krishna Bodawala Accessibility Consultant Iota

[smythp]

Good catch on this one.

[smythp]

@krishnabodawala, can you try this preview with JAWS?

https://deploy-preview-255--docssigstore.netlify.app/

I added some instructions to the element and as you type you hear the results. Seems to work OK with NVDA. With VO on iOS it's not as good a solution, but it's easier to find the results using VO with a touchscreen and would be less of an issue, I think.

[krishnabodawala]

yes, it works perfectly well, but the instruction you added, sounds very long and descriptive, probably not necessary. Your instruction should be short and informative I.E. "Press tab to navigate to search results"

[smythp]

@krishnabodawala, can you test this one? I shortened the label and added a search role to the form field.

https://deploy-preview-255--docssigstore.netlify.app/