Skip to main content

afrigov is an open-source project. It is not a government website and is not affiliated with any government.

Previewing neutral core Change

afrigov Accessible government design system

Site search results

The page a search box sends people to: what they searched, how many results, the results, and help when there are none.

Results

3 results for water quality

  1. Check the water quality in your district

    Services › Water quality

    Every public supply is tested each quarter. Find your district to see the latest water quality results and the date of the next test.

  2. Water quality certificate

    Services › Water quality › Certificates

    A supply that passes inspection is given a certificate, valid for twelve months and displayed at the works.

  3. Annual report on drinking water, 2025

    Publications · PDF, 2.1 MB

    How the agency's supplies performed against the national water quality standard, district by district.

Show HTML
<form class="ag-search ag-search--lg" role="search" action="#results" method="get">
  <label class="ag-search__label ag-visually-hidden" for="results-q">Search this site</label>
  <div class="ag-search__row">
    <input class="ag-search__input" type="search" id="results-q" name="q" value="water quality" />
    <button class="ag-search__button" type="submit">
      <span class="ag-search__icon" aria-hidden="true"></span>Search
    </button>
  </div>
</form>
<p class="ag-results__count" role="status">3 results for <strong>water quality</strong></p>
<ol class="ag-results">
  <li class="ag-result">
    <h2 class="ag-result__title"><a href="#results">Check the water quality in your district</a></h2>
    <p class="ag-result__where">Services › Water quality</p>
    <p class="ag-result__text">
      Every public supply is tested each quarter. Find your district to see the latest <mark>water quality</mark>
      results and the date of the next test.
    </p>
  </li>
  <li class="ag-result">
    <h2 class="ag-result__title"><a href="#results">Water quality certificate</a></h2>
    <p class="ag-result__where">Services › Water quality › Certificates</p>
    <p class="ag-result__text">
      A supply that passes inspection is given a certificate, valid for twelve months and displayed at the works.
    </p>
  </li>
  <li class="ag-result">
    <h2 class="ag-result__title"><a href="#results">Annual report on drinking water, 2025</a></h2>
    <p class="ag-result__where">Publications · PDF, 2.1 MB</p>
    <p class="ag-result__text">
      How the agency's supplies performed against the national <mark>water quality</mark> standard, district by
      district.
    </p>
  </li>
</ol>
<nav aria-label="Results pages">
  <ul class="ag-pagination ag-mb-0">
    <li><a class="ag-pagination__link" href="#results" aria-current="page">1</a></li>
    <li><a class="ag-pagination__link" href="#results">2</a></li>
    <li><a class="ag-pagination__link" href="#results" rel="next">Next</a></li>
  </ul>
</nav>

No results

No results for borehole lisence

Try another way

Show HTML
<form class="ag-search ag-search--lg" role="search" action="#no-results" method="get">
  <label class="ag-search__label ag-visually-hidden" for="no-results-q">Search this site</label>
  <div class="ag-search__row">
    <input class="ag-search__input" type="search" id="no-results-q" name="q" value="borehole lisence" />
    <button class="ag-search__button" type="submit">
      <span class="ag-search__icon" aria-hidden="true"></span>Search
    </button>
  </div>
</form>
<p class="ag-results__count" role="status">No results for <strong>borehole lisence</strong></p>
<div class="ag-empty ag-mb-0">
  <h2 class="ag-empty__title">Try another way</h2>
  <ul>
    <li>Check the spelling, or use fewer words: <a href="#no-results">borehole licence</a>.</li>
    <li>Start from the <a href="#no-results">list of services</a>.</li>
    <li><a href="#no-results">Ask us</a>, and we will point you to the right page.</li>
  </ul>
</div>

How it works

  • Say what was searched and how many results. The count line has role="status", so a screen reader announces it when the results change without the page reloading.
  • One heading per result, linking to the page. The headings let a screen reader user move from result to result.
  • Where it sits on the site, under the title, so two results with similar titles can be told apart. For a document, its type and size.
  • The searched words are bold on a pale tint with mark, which screen readers can announce. Never colour alone.
  • Ten results a page, then pagination.
  • No results is a page that helps, using the empty state: a spelling suggestion where the search engine gives one, a way in through the services, and a person to ask.