Accessibility issues

[arnaudlevy]

Hi everyone!
Thanks a lot for the wonderful job with Pagefind :)
We use it as the default search engine in Osuny, as you can see in the example website.
We benefited from an accessibility audit by Temesis, funded by Région Nouvelle-Aquitaine, in France.
The audit is against RGAA, which is french equivalent for WCAG.
It would be wonderful if we could make Pagefind fully RGAA compliant by default!

Issues

There are 3 issues, 1 blocking, 2 major.
I translate the issues and the fixes suggested by Temesis here.

• Blocking : No visible tag on search field 11.1
• Major : Presence of an ordered list with no content 9.3
• Major : Absence of restitution of the number of results 7.5

No visible tag on search field

Either add a title attribute with a proper value on the field (same as placeholder), or us the floating label technique.

Presence of an ordered list with no content

Remove the empty ol

Absence of restitution of the number of results

Implement the element <div class=”resultat_saisie” aria-live=”polite”></div> on page load, with no content inside

Integrate the content when the results appear

On page load:

<div class="resultat_saisie" aria-live="polite"></div>

When results come:

<div class="resultat_saisie" aria-live="polite"><p>10 results for example</p></div>

When no results:

<div class="resultat_saisie" aria-live="polite"><p>No results for dfgdfgdfg</p></div>

osunyorg/theme#678

[bglw]

Hi @arnaudlevy 👋

Thanks so much for sharing this! I'll make sure to action these points very soon.