Gezinme · Search

Arama

Site içi arama alanı ve düğmesi. İsteğe bağlı öneri listesi: kullanıcı yazarken gruplu sonuçlar açılır.

CSS: kararlı
JavaScript: öneri listesi
React: kararlı
Vue: kararlı

Örnekler

Temel Canlı örnek

HTML kodunu göster

<form class="kiris-arama" role="search" action="#" method="get">
  <label class="kiris-etiket kiris-gorsel-gizli" for="ara">Sitede ara</label>
  <input class="kiris-girdi kiris-arama__girdi" id="ara" name="q" type="search" placeholder="Sitede ara" autocomplete="off">
  <button class="kiris-button kiris-arama__dugme" type="submit">Ara</button>
</form>

Öneri listesi ile Canlı örnek

HTML kodunu göster

<div class="kiris-arama-onerileri" data-kiris="arama" data-kaynak-id="oneri-verisi">
  <form class="kiris-arama" role="search" action="#" method="get">
    <label class="kiris-etiket kiris-gorsel-gizli" for="ara3">Hizmet, kurum veya belediye ara</label>
    <input class="kiris-girdi kiris-arama__girdi" id="ara3" name="q" type="search" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-controls="ara3-liste" autocomplete="off" placeholder="Örnek: ikamet">
    <button class="kiris-button kiris-arama__dugme" type="submit">Ara</button>
  </form>
  <div class="kiris-arama-onerileri__liste" id="ara3-liste" role="listbox" aria-label="Öneriler" hidden></div>
  <p class="kiris-gorsel-gizli" data-kiris-durum aria-live="polite"></p>
  <script type="application/json" id="oneri-verisi">{"gruplar": [{"ad": "Hizmetler", "ogeler": [{"ad": "İkametgâh Belgesi Sorgulama", "ek": "Nüfus ve Vatandaşlık İşleri Genel Müdürlüğü", "href": "#"}, {"ad": "Adli Sicil Kaydı Sorgulama", "ek": "Adalet Bakanlığı", "href": "#"}, {"ad": "Vergi Borcu Sorgulama ve Ödeme", "ek": "Gelir İdaresi Başkanlığı", "href": "#"}, {"ad": "SGK Tescil ve Hizmet Dökümü", "ek": "Sosyal Güvenlik Kurumu", "href": "#"}]}, {"ad": "Kurumlar", "ogeler": [{"ad": "Nüfus ve Vatandaşlık İşleri Genel Müdürlüğü", "href": "#"}, {"ad": "Adalet Bakanlığı", "href": "#"}]}, {"ad": "Belediyeler", "ogeler": [{"ad": "Ankara Büyükşehir Belediyesi", "href": "#"}, {"ad": "İzmir Büyükşehir Belediyesi", "href": "#"}]}]}</script>
</div>

Başlık çubuğunda Canlı örnek

HTML kodunu göster

<form class="kiris-arama kiris-arama--koyu" role="search" action="#" method="get">
  <label class="kiris-etiket kiris-gorsel-gizli" for="ara2">Hizmet ara</label>
  <input class="kiris-girdi kiris-arama__girdi" id="ara2" name="q" type="search" placeholder="Hizmet ara" autocomplete="off">
  <button class="kiris-button kiris-arama__dugme" type="submit">Ara</button>
</form>

Ne zaman kullanılır

Sayfa sayısı 30 üstündeki her sitede kullanın.
Bir formun içindeki listeyi süzmek için aranabilir liste kullanın, arama değil.
Öneri listesini data-kiris="arama" açar. Kaynak bir sunucu adresi (data-kaynak) veya sayfadaki bir JSON betiğidir (data-kaynak-id). İki karakterden sonra, 200 ms bekleyip sorar.
Öneriler gruplanır: hizmetler, kurumlar, belediyeler. Her gruptan en çok beş satır. Son satır tam aramaya gider.

Erişilebilirlik

<form role="search"> ile ekran okuyucu bölgeyi bulur.
Etiket görsel olarak gizlidir ama vardır. Yer tutucu etiket yerine geçmez.
Düğme metni "Ara" olur. Yalnız büyüteç simgesi yeterli değildir.
Öneri listesi ARIA 1.2 combobox kalıbıdır: role="listbox", gruplar role="group", satırlar role="option". Ok tuşları gezer, Escape kapatır, dışarı tıklama kapatır.
Canlı bölge öneri sayısını söyler: "12 öneri, 3 grupta". Eşleşen parça <mark> ile kalındır, yalnız renkle gösterilmez.
Betik yüklenmezse veya sunucu geç kalırsa form düz arama olarak çalışır. Enter her zaman formu gönderir.

Karşılanan WCAG 2.2 ölçütleri 1.3.1 2.4.6 4.1.2

Kaynak

Benzer bir bileşen şu ülkelerin tasarım sistemlerinde de var: US, FR, JP, DK, DE, NO.

Bu bileşenin kodu depoda:

Kayıt defteri tanımı, adı, özeti, kullanım kuralı ve örnekleri
CSS katmanları, kiris-search ile başlayan sınıflar
Davranış betiği, data-kiris="arama" başlatıcısı