Başlık hiyerarşisi.
Başlık hiyerarşisi, bir sayfadaki h1–h6 öğelerinin belge yapısını doğru yansıtacak biçimde sıralanmasıdır ve ekran okuyucu kullanıcısının içindekiler tablosu odur.
Başlıklar, gören bir kullanıcı için tipografik bir sinyaldir: büyük ve kalın olan şey bölüm başlangıcıdır. Ekran okuyucu kullanıcısı için ise başlıklar bir gezinme aracıdır — tek tuşla başlıktan başlığa atlayabilir ve sayfanın yapısını dinleyerek çıkarabilir. Bu yüzden başlık düzeyi bir görsel karar değil, yapısal bir karardır.
Sorun genelde şuradan çıkar: bir başlığın görsel olarak küçük durması istenir ve düzeyi düşürülür. Bölüm başlığı olması gereken bir metin h4 yapılır çünkü h2 fazla büyük görünmektedir. Görsel sonuç istenendir; yapısal sonuç bozuk bir belge ağacıdır.
Kurallar
Başlık hiyerarşisinin kuralları azdır ve hepsi test edilebilir. Karmaşık olan kurallar değil, mevcut bir sitede onlara uymaktır.
- Bir sayfada bir h1 — sayfanın ne hakkında olduğunu söyler. Genelde sayfanın ana başlığıdır.
- Düzey atlanmaz — h2'den sonra h4 gelmez. Aşağı inerken her seferinde bir basamak.
- Yukarı çıkarken atlanabilir — h4'ten sonra h2 gelebilir; yeni bir üst bölüm başlamıştır.
- Görsel boyut düzeyden bağımsızdır — h3 istediğiniz kadar küçük görünebilir, düzeyi CSS ile ayarlanır.
- Başlık gerçekten başlık olmalı — kalın yazılmış bir paragraf başlık değildir; başlık öğesi kullanılmayan bölüm, ekran okuyucuda bölüm değildir.
- Boş başlık olmaz — ikon taşıyan ama metni olmayan başlık, gezinme listesinde boş bir satır üretir.
İkinci kural en sık kırılanıdır ve neredeyse her zaman görsel gerekçelerle kırılır. Çözüm basittir: düzeyi doğru seç, boyutu CSS ile ayarla. Bir h2'nin 18 piksel olmasında hiçbir sakınca yoktur; bir h4'ün h2 yerine kullanılmasında vardır.
Ekran okuyucuda ne oluyor
Kuralların neden önemli olduğunu anlamak için, bozuk bir hiyerarşinin dinleme deneyiminde ne ürettiğini görmek gerekir. Ekran okuyucu kullanıcısı bir sayfaya girdiğinde sık kullandığı ilk hareket, başlık listesini açmaktır — sayfanın içindekiler tablosunu.
Hiyerarşi doğruysa o liste sayfanın yapısını gösterir: ana başlık, altında bölümler, onların altında alt bölümler. Kullanıcı ilgilendiği bölüme doğrudan atlar. Hiyerarşi bozuksa liste anlamsızlaşır — girintiler yanlış yerlerde, bazı bölümler alt bölüm gibi görünür, bazı alt bölümler ana bölüm gibi.
Daha kötüsü, başlık öğesi hiç kullanılmayan bölümlerdir. Kalın ve büyük yazılmış ama paragraf olarak işaretlenmiş bir metin, gören kullanıcı için başlıktır, ekran okuyucu için değildir. O bölüm gezinme listesinde hiç görünmez ve kullanıcı oraya doğrudan atlayamaz — sayfanın o kısmı, dinleyerek gezen biri için pratikte kaybolur.
Kalın yazılmış bir paragraf, ekran okuyucu için başlık değildir; sayfanın o bölümü listede hiç yoktur.
h1 tartışması
«Bir sayfada kaç h1 olmalı» sorusu uzun süredir tartışılıyor ve iki cevap dolaşımda: HTML5 bölümleme algoritmasına göre her bölüm kendi h1'ine sahip olabilir, ya da klasik yaklaşıma göre sayfada tek h1 olmalıdır.
Pratik cevap nettir: tek h1 kullanın. HTML5'in bölümleme algoritması hiçbir tarayıcı ve hiçbir ekran okuyucu tarafından gerçekten uygulanmadı; spesifikasyondan da çıkarıldı. Birden fazla h1 kullanan bir sayfa, yardımcı teknolojide düz bir liste üretir ve hiyerarşi kaybolur.
Bu sitede kural kodla korunuyor: ölçüm aracı 171 sayfanın her birinde h1 sayısını ve hiyerarşi atlamalarını sayıyor. Son ölçümde h1 sayısı ≠ 1 olan sayfa yok ve hiyerarşi atlaması yok — ikisi de sıfır. Kural bir stil rehberinde değil, bir testte yaşıyor.
Nasıl denetlenir
Başlık hiyerarşisini denetlemek, erişilebilirlik denetiminin en kolay ve en hızlı geri dönüş veren kısmıdır. Üç yöntem var ve üçü de birkaç dakika sürer.
- Tarayıcı eklentisiyle ana hat çıkar — sayfadaki başlıkları düzeyleriyle listeleyen eklentiler, atlamaları anında gösterir.
- Kısa bir betikle tara — başlıkları kaynak sırasıyla toplayıp ardışık düzey farkı 1'den büyük olanları raporlamak birkaç satırlık iştir ve tüm siteyi tarar.
- Ekran okuyucunun başlık listesini aç — gerçek doğrulama budur. Liste sayfayı anlatıyor mu, yoksa karışık mı?
İkinci yöntem, otomatikleştirilebildiği için en kalıcı olanıdır. Bir kez elle düzeltilen hiyerarşi, sonraki içerik girişleriyle yeniden bozulur — özellikle içerik editörlerinin başlık düzeyini kendileri seçebildiği sistemlerde. Tarama her dağıtımda koşuyorsa bozulma anında görünür.
Son bir not: başlık hiyerarşisi erişilebilirlikle sınırlı bir kazanç değildir. Arama motorları da belge yapısını başlıklardan çıkarır ve yanıt motorları, bir sayfadan pasaj alıntılarken başlık altındaki bölümleri birim olarak alır. Doğru hiyerarşi, aynı anda üç okuyucuya birden hizmet eder: insana, tarayıcıya ve modele.
İçerik sistemlerinde bozulma
Başlık hiyerarşisinin en sık bozulduğu yer kodun kendisi değil, içerik giriş arayüzüdür. Zengin metin editörlerinin çoğu içerik editörüne başlık düzeyini serbestçe seçtirir ve seçim görsel önizlemeye bakılarak yapılır — «bu çok büyük duruyor, bir küçültelim». Sonuç, teknik ekibin hiç dokunmadığı bir sayfada bozuk bir belge ağacıdır.
Kalıcı çözüm, seçimi kısıtlamaktır. İçerik alanı sayfanın h1'ini zaten sağlıyorsa, editörde h1 seçeneği hiç sunulmamalıdır. Aynı şekilde, mevcut en derin düzeyden iki basamak aşağı atlamak arayüzde engellenebilir. Editöre daha az seçenek vermek, burada bir kısıtlama değil bir kolaylıktır — çünkü doğru seçim zaten tek bir seçenektir.
Kısıtlamanın mümkün olmadığı durumlarda ikinci savunma hattı ölçümdür. Yayımlanmış sayfalarda hiyerarşiyi tarayan ve atlama bulduğunda uyaran bir kontrol, sorunu editöre geri bildirir. Bu sitede o kontrol ölçüm aracının içinde yaşıyor ve 171 sayfanın tamamını her koşumda tarıyor.
Görsel boyut ile düzeyi ayırmak
Başlık hiyerarşisi tartışmasının kalbinde pratik bir gerilim var: tasarımcı görsel bir ölçek ister, geliştirici yapısal bir düzey ister, ve ikisi HTML'de aynı öğeyle ifade edilir. Gerilim, ölçeği düzeyden ayırarak çözülür.
Yöntem şudur: başlık öğeleri yalnızca YAPIYI belirler ve varsayılan bir görünüm taşımaz. Görsel boyut ayrı bir sınıfla verilir. Böylece bir h2 istenirse büyük, istenirse küçük görünebilir ve tasarımcı düzeyi değiştirmek zorunda kalmaz. Bu ayrım tasarım sistemlerinde standart bir kalıptır ve hiyerarşi sorunlarının büyük kısmını kaynağında çözer.
Bu sitede tipografi ölçeği token seviyesinde tanımlı ve başlık düzeyinden bağımsız uygulanıyor. Sahne başlıkları kendi ölçeklerini taşıyor, gövde başlıkları kendi ölçeğini — ama ikisinin de HTML düzeyi belge yapısına göre seçiliyor, göründükleri boyuta göre değil.
Düzey yapıyı anlatır, boyut görünümü. İkisi aynı şey değildir ve aynı yerden gelmemelidir.