M.AIM.AISoloLabsUI Sözlüğü · İçerik ve yerleşim

← UI Sözlüğü

Ayraç divider

bilinen diğer adları divider · separator · ayırıcı çizgi · <hr>

Böyle diyorsan: "bölümler arasındaki ince çizgi" · "araya çizgi çekmek" → bunun adı ayraç.

İçerik bölümlerini ayıran ince çizgi; ortasında etiket taşıyabilir.

Ayraç, içerik bölümlerini birbirinden ayıran ince çizgidir — ve bu sözlükteki en çok GEREKSİZ kullanılan parçadır. Sebebi şu: ayrımı asıl yapan şey çizgi değil BOŞLUKTUR. İki bölüm arasında yeterli boşluk varsa çizgiye gerek kalmaz; boşluk yetersizse çizgi eklemek sorunu çözmez, yalnız gürültüyü artırır. Doğru kullanıldığı yer, boşluğun yetmediği yoğun alanlardır: liste satırları arası, menü grupları arası, tablo benzeri düzenler. Teknik tarafta önemli bir ayrım vardır: <hr> anlamsal bir konu değişikliğini işaretler ve ekran okuyucuya duyurulur; yalnız görsel bir çizgi çekiyorsan bunu CSS kenarlığıyla yapmak ve ekran okuyucuyu meşgul etmemek daha doğrudur.

Kapsam: Bu madde bölüm ayıran çizgiyi kapsar. Bölümün ne olduğunu SÖYLEYEN şey ayraç değil başlıktır; ayraçla ayrılan bölümler adlandırılmalıysa doğru araç <h2>/<h3> etiketleridir.

CANLI ÖRNEK — kullan, numaralara tıkla, parçayı tanı
Bildirimler
Güvenlik
Aşama aşama gezmek için okları ya da numaraları kullan.
YAPIM PROMPTU — AJANINA YAPIŞTIR
Ayarlar sayfasını bölümle: bölümler arasına etiketli ayraç ('— Bildirimler —') yerine önce şunu değerlendir — bunlar bölüm başlığıysa h2/h3 kullan; salt görsel kesme gerekense hr + tutarlı dikey boşluk (üst 24 / alt 16 gibi tek ritim); her öğe arasına DEĞİL yalnız anlam gruplarının arasına koy.
DEBUG PROMPTU — HUYSUZLANIRSA

Yapıştır, sonuna belirtiyi ekle — ajana klasik hata kalıplarını önden verir.

Ayraçlarım huysuz; klasikleri sırayla ele: (1) her form elemanının arasına çizgi çekilmiş — sayfa parmaklık gibi (gruplama yerine gürültü); (2) kimi yerde hr kimi yerde border-top div — kalınlık/renk tutarsız; (3) etiketli ayraçlar aslında bölüm başlığıymış ama h etiketi olmadığı için belge anahatları (outline) boş; (4) dikey boşluklar her ayraçta farklı — ritim yok; (5) dikey ayraç mobilde alt alta düşünce anlamsız kalmış. Belirti şu:
ANATOMİ — HER PARÇANIN ADI VAR (tıkla ya da üzerine gel → örnekte yansın)
  • 1Çizgi<hr> / border

    Görsel kesme; anlamsal ayrım gerekiyorsa hr (role=separator), salt süsse border yeter.

  • 2Etiketortadaki başlık

    'Bildirimler' gibi; ama dikkat — etiketli ayraç aslında bir BÖLÜM BAŞLIĞI olabilir, o zaman h etiketi doğrusudur.

  • 3Boşluk ritmimargin

    Ayracın gücü çizgiden çok çevresindeki nefes boşluğundan gelir; ritim tüm sayfada tutarlı olmalı.

  • 4Alternatifiboşluk/başlık

    Her ayrımın çizgiye ihtiyacı yok: çoğu zaman doğru boşluk + başlık, çizgisiz daha temizdir.

DURUMLAR — HANGİ HÂLDE NE OLUR
  • ASade çizgi<hr> ya da border

    Yalın ayrım. Anlamsal bir konu değişikliği varsa <hr>, yalnız görsel bir bölme yapıyorsan CSS kenarlığı doğrudur.

  • BEtiketliortada metin

    Çizginin ortasında yazı ('veya', 'Bugün'). Bu artık salt ayraç değildir; taşıdığı metin bir başlık gibi çalışır ve öyle işaretlenmelidir.

  • CDikeyaria-orientation

    Yan yana öğeleri ayırır. Dikey ayraçlar dar ekranda anlamını kaybeder; mobilde yatay düzene geçtiğinde kaldırılmalıdır.

  • DGereksizboşluk yeterliyken

    En sık karşılaşılan hâl. Boşluk zaten ayırıyorsa çizgi eklemek görsel gürültüdür; kaldırınca hiçbir şey kaybolmuyorsa gereksizdi.

KODDAKİ ADLARI
HTML<hr> = role=separatoranlamsal kesme
HTMLbaşlıksa h2/h3ayraç değil başlık
CSStutarlı margin ritmiasıl iş boşlukta
ERİŞİLEBİLİRLİK & SIK HATA
  • Salt dekoratif çizgileri ekran okuyucudan gizle. Her görsel bölmeyi <hr> yapmak, okuyucuda sürekli 'ayırıcı' duyurusuna yol açar.
  • Bölümleri adlandırmak istiyorsan ayraç değil BAŞLIK kullan; ekran okuyucu kullanıcısı sayfayı başlıklarla tarar, çizgilerle değil.
  • Ayraç rengi de kontrast kuralına tabidir: neredeyse görünmez bir çizgi çiziyorsan zaten kaldırabilirsin, çünkü görevini yapmıyor demektir.
  • Dikey ayraçları dar ekranda kaldır; yön değiştiren yerleşimde dikey çizgi anlamsız kalır.
SIK KARIŞTIRILANLAR

Akordeondan farkı. Ayraç bölümleri GÖRSEL olarak ayırır ama hepsi görünür kalır; akordeon bölümleri gizleyip açar. Uzun bir sayfada ayraçlarla ayrılmış on bölüm hâlâ on bölümlük kaydırma demektir — asıl mesele ayırmak değil, kullanıcının aradığını bulmasıysa çözüm ayraç değil katlama ya da başlık yapısıdır.

Akordeon sayfasına git →

Karttan farkı. Ayraç bir ÇİZGİdir, kart bir YÜZEYdir. İkisi de gruplama yapar ama kart çevrelediği şeyi bir bütün hâline getirir ve tıklanabilir olabilir; ayraç yalnız sınır çizer. Çok sayıda ayraç kullanıp sayfayı dilimlemek yerine, gerçekten bir arada duran şeyleri kartla toplamak çoğu zaman daha okunur bir sonuç verir.

Kart sayfasına git →

KAYNAKLAR
İLGİLİ PARÇALAR

Akordeon accordionKart cardAlt bilgi footerKenar menü sidebar

AYNI AİLEDE · İÇERIK VE YERLEŞIM