Erişilebilirlik ağacı, tarayıcının DOM'dan türettiği ve yardımcı teknolojilerin okuduğu paralel veri yapısıdır. Ekran okuyucular sayfayı görsel düzenden değil bu ağaçtan algılar. Ağaçtaki her düğüm isim, rol ve değer bilgisi taşır; semantik HTML ve ARIA nitelikleri bu bilgileri belirler. display:none veya aria-hidden ile gizlenen öğeler ağaçtan tamamen çıkarılır.
Tarayıcı bir sayfayı işlerken iki yapı üretir: gözle görülen düzeni belirleyen render ağacı ve yardımcı teknolojilere sunulan erişilebilirlik ağacı. İkincisi DOM'un sadeleştirilmiş bir izdüşümüdür: yalnızca görsel amaç taşıyan sarmalayıcı div'ler ağaca girmez, anlam taşıyan öğeler ise üç temel bilgiyle temsil edilir. İsim (öğenin nasıl duyurulacağı, örneğin buton etiketi), rol (öğenin ne olduğu, örneğin buton, bağlantı, başlık) ve değer (varsa güncel içeriği, örneğin bir kaydırıcının sayısı). Ekran okuyucu 'Gönder, buton' derken bu üçlüyü okur.
Ağacı şekillendiren birinci güç semantik HTML'dir: button öğesi rolünü, label ile bağlanmış bir form alanı ismini kendiliğinden alır. ARIA nitelikleri ikinci katmandır: aria-label ismi değiştirir, role niteliği rolü yeniden tanımlar, aria-expanded gibi durumlar düğüme eklenir. Yanlış ARIA'nın tehlikesi de buradadır: ağaca yazılan hatalı bilgi, ekran okuyucuya gerçekte olmayan bir arayüz tarif eder.
Gizleme davranışı iki yönlüdür: display:none ve visibility:hidden öğeyi hem görselden hem ağaçtan kaldırır; aria-hidden='true' ise öğe ekranda dururken yalnızca ağaçtan çıkarır. Tarayıcıların geliştirici araçları ağacı düğüm düğüm gösterir; bir bileşenin ekran okuyucuda nasıl duyurulacağını anlamanın en hızlı yolu budur.
Sık sorulan sorular
Erişilebilirlik ağacını nasıl görebilirim?
Modern tarayıcıların geliştirici araçlarında yerleşik bir görünüm vardır: Chrome'da Elements panelindeki Accessibility sekmesi seçili öğenin ağaçtaki düğümünü, hesaplanan ismini ve rolünü gösterir; tam ağaç görünümü de etkinleştirilebilir. Firefox'ta Accessibility paneli benzer bilgiyi sunar. Bir bileşenin ekran okuyucuda nasıl duyurulacağını tahmin etmek yerine ağaçtaki karşılığına bakmak her zaman daha güvenilirdir.
aria-hidden ile display:none arasındaki fark nedir?
display:none öğeyi hem görsel düzenden hem erişilebilirlik ağacından kaldırır: kimse göremez, ekran okuyucu da duyuramaz. aria-hidden='true' ise öğeyi yalnızca ağaçtan çıkarır: gören kullanıcı öğeyi ekranda görmeye devam eder ama yardımcı teknolojiler onu yok sayar. Bu yüzden aria-hidden yalnızca dekoratif veya tekrarlayan içerikte kullanılmalı; etkileşimli veya bilgi taşıyan öğelere asla uygulanmamalıdır.
Bu içerik bilgilendirme amaçlıdır ve hukuki görüş niteliği taşımaz.