search

NorskHelsenett / finnkode

Prototype til nytt design til finnkode.no
1 stars 0 forks source link

ARIA for search #19

Closed sjbrodwall closed 5 years ago

sjbrodwall commented 5 years ago

The style doesn’t change because focus remains on the search button after searching. In order to enable good keyboard navigation interaction and screen reader support, you have to do some focus control and set up some ARIA properties.

Update the markup to include aria-live=”polite” on div.hits. When the user searches and this text updates with the new number of hits, screen reader users will be informed of this information automatically. This container (div.hits) must exist in the original DOM, it can’t be generated by JS after the page has loaded. <div class="hits" aria-live="polite">197 resultater for "underleppe" i alle kodeverk</div>

Add id=”search-container” and tabindex=”-1” to div.layout-container on the search page.
<div class="layout-container" id="search-container" tabindex="-1">

After the user has performed a search or filtered the results, move programmatic focus to div#search-container.

Add a skip-link as the first child of div.filters in the search refiners block: <a class="skip-link" href="#search-results">Hopp over filterne til resultatene</a>

Change div.search-results to div#search-results, and add tabindex=”-1”: <div id="search-results" tabindex="-1">

sjbrodwall commented 5 years ago

http://carecom.finnkode.tilgjengeligforalle.no/site/search-global-results.html i prototypen. Ser at jeg er nødt til å tilpasse for forkskjellige nettlesere.