Erişilebilir Menü ve Navigasyon Tasarımı İçin Teknik Rehber

Erişilebilir menü, ziyaretçinin site içinde yönünü koruyarak istediği içeriğe ulaşmasını sağlar. Fareyle çalışan bir genişleyen liste, klavyede aynı başarıyı her zaman göstermez. Ayrıca mobil menü farklı bir etkileşim modeli taşır. Bu nedenle ekip gezinmeyi bütün cihaz ve durumlarıyla planlamalıdır.

Kurumsal sitelerde menü, hizmet kapsamını ve şirketin bilgi düzenini temsil eder. Belirsiz adlar veya gereksiz alt seviyeler karar sürecini uzatır. Buna karşılık açık kategori adları ve tutarlı davranış, ziyaretçinin işini kolaylaştırır. Teknik kalite ile içerik mimarisi bu noktada birlikte çalışır.

Erişilebilir menü için doğru etkileşim modeli

Standart site gezinmesi çoğunlukla bağlantı listeleri ve genişleyen bölüm butonlarıyla yeterli bir yapı kurar. Her navigasyon alanına uygulama menüsü rolü vermek gerekmez. Çünkü ARIA menu modeli farklı klavye beklentileri getirir. Ekip ihtiyacı olmadan bu karmaşıklığı eklememelidir.

W3C navigasyon örneği, sıradan site gezinmesi için bu ayrımı açıklar. Ancak örnek kod üretim ortamında ayrıca test ister. Tema, eklenti ve özel JavaScript aynı davranışı etkiler.

Ana kategori hem sayfaya gidiyor hem alt listeyi açıyorsa iki amacı ayırın. Örneğin kategori adı bağlantı olsun; yanındaki buton alt bölümü yönetsin. Ayrıca butona hangi bölümü açtığını anlatan bir ad verin. Böylece kullanıcı ilk etkinleştirmede ne olacağını anlar.

Klavye akışını ve durum bilgisini tanımlayın

Önce Tab ve Shift+Tab ile doğal gezinme sırasını kurun. Buton Enter ve Space ile çalışmalıdır. Ardından açık panelin kapatma davranışını belirleyin. Özellikle Escape desteği, kullanıcının bağlamını korumasına yardım eder.

Genişleyen bölüm butonunda aria-expanded gerçek durumu izlemelidir. Ayrıca aria-controls ilgili paneli işaret eder. Ancak bu nitelikler tek başına paneli açıp kapatmaz. Geliştirici görünürlük ve olay yönetimini ayrıca kurar.

Durum	Kullanıcı eylemi	Beklenen davranış
Kapalı bölüm	Açma butonunu etkinleştirme	Panel görünür; durum bilgisi değişir.
Açık bölüm	Tab ile ilerleme	Kullanıcı bağlantılara mantıklı sırayla ulaşır.
Panelden çıkış	Kapatma işlemi	Odak gizli içerikte kalmaz.
Etkin sayfa	Gezinme listesini inceleme	Kullanıcı mevcut sayfayı ayırt eder.
Mobil düzen	Ekran genişliğini değiştirme	Menü durumu ve odak tutarlı kalır.

Bu tablo temel bir sözleşme sunar. Bununla birlikte modal mobil menü ile basit genişleyen liste aynı davranışı taşımaz. Tasarım ekibi önce hangi modeli seçtiğini açıklamalıdır. Geliştirici de odak yönetimini bu modele göre kurmalıdır.

Erişilebilir menü için mobil ve büyütme kontrolleri

Mobil menü yalnız küçük ekran görüntüsünden ibaret değildir. Kullanıcı metni büyütünce masaüstünde de benzer dar düzen oluşur. Bu nedenle ekran genişliği ve metin büyütme senaryolarını birlikte test edin. Özellikle uzun kategori adlarının taşmasını inceleyin.

Menü ekranı kaplayan modal bir katmansa arka plan etkileşimini sınırlandırın. Ancak sıradan bir genişleyen listeye gereksiz odak tuzağı eklemeyin. Kullanıcı sayfanın diğer alanlarına doğal biçimde geçebilmelidir. Davranışın tasarım amacıyla eşleşmesi önemlidir.

Ayrıca dokunmatik kullanıcıya yalnız hover üzerinden bilgi sunmayın. Alt listeyi açan denetim dokunma ve klavyeyle de çalışmalıdır. Birinci dokunmanın açma mı gezinme mi yapacağını açıkça belirleyin. Böylece aynı öğe tahmin gerektiren iki davranış taşımaz.

Bilgi mimarisi ve bağlantı metinleri

Kategori adları kullanıcı dilini yansıtmalıdır. Örneğin şirket içi departman adları ziyaretçiye her zaman anlam ifade etmez. Bunun yerine hizmeti veya kullanıcı görevini açıklayan ifadeler seçin. Ayrıca aynı hedefe farklı isimlerle giden gereksiz bağlantıları azaltın.

Birden fazla navigasyon bölgesi varsa adlarını ayırt edin. Ana menü, müşteri hesabı ve altbilgi farklı görevler taşır. Bunun yanında mevcut sayfa için uygun aria-current değeri kullanın. Görsel vurgu ile programatik bilgi birbirini desteklesin.

İçeriğe atlama bağlantısını da planın parçası yapın. Bu bağlantı klavye kullanıcısının tekrar eden gezinmeyi aşmasına yardım eder. Ancak hedefin konumu ve odak davranışı gerçek sayfada test ister. Yalnız bağlantının kaynakta bulunması yeterli değildir.

Erişilebilir menü için hata kaydı ve tekrar test

Bir hata kaydında ekran genişliğini, başlangıç durumunu ve tuş sırasını belirtin. Örneğin menü kapanınca odak gizli bağlantıda kalıyorsa bunu açıkça yazın. Ayrıca beklenen geri dönüş hedefini ekleyin. Böylece ekip düzeltme için somut bir hedef belirler.

Ortak menü güncellemesi bütün siteyi etkiler. Bu nedenle yalnız ana sayfayı kontrol etmeyin. Uzun başlıklı hizmet sayfası, giriş yapan kullanıcı ve farklı dil sürümünü de inceleyin. Yeni içerik eski yerleşim varsayımlarını bozar.

Son kontrolde fare, klavye ve ekran okuyucu akışını karşılaştırın. Her yöntem aynı hedeflere ulaşmalıdır. Bununla birlikte etkileşim adımlarının birebir aynı olması gerekmez. Önemli olan kullanıcının bağımsız ve açık biçimde ilerlemesidir.

Hizmet menüsünde örnek hata ve düzeltme

Bir kullanıcı hizmet kategorisini açtıktan sonra alt bağlantıda odak tutsun. Ekran genişliği değişince masaüstü menüsü yerini mobil düzene bıraksın. Eğer uygulama eski paneli gizleyip odağı orada bırakırsa kullanıcı konumunu kaybeder. Bu nedenle kırılma noktası değişimini de bileşen durumuna ekleyin.

Geliştirici önce etkin öğeyi ve yeni düzenin görünür denetimlerini kontrol eder. Ardından gerekli durumda odağı uygun menü butonuna taşır. Ancak her pencere boyutu değişiminde rastgele odak sıçraması yaratmaz. Karar yalnız mevcut odak artık geçerli değilse devreye girmelidir.

Test uzmanı aynı senaryoyu giriş yapan ve misafir hesapla tekrarlar. Çünkü hesap menüsü ilave bağlantılar taşır. Ayrıca uzun dil çevirileri buton ve panel boyutlarını değiştirir. Böylece test yalnız tek kullanıcı ve tek dil varsayımına bağlı kalmaz.

Kabul kaydı üç bilgiyi açıkça göstermelidir: başlangıç odağı, durum değişimi ve son odak hedefi. Bunun yanında ekran okuyucunun güncel menü durumunu nasıl duyurduğunu kaydedin. Bu kayıt, sonraki tasarım güncellemelerinde aynı hatanın geri dönmesini önlemeye yardımcı olur.

Sık sorulan sorular

Her menü ok tuşlarıyla çalışmalı mı?

Hayır. Klavye davranışı etkileşim modeline bağlıdır. Standart bağlantı gezinmesi ile uygulama menüsü farklı beklentiler taşır.

Hamburger simgesi tek başına yeterli mi?

Simgeye açık bir erişilebilir ad ve gerçek buton davranışı ekleyin. Ayrıca açık veya kapalı durumu kullanıcıya iletin.

Kurumsal site nereden başlamalı?

Önce ana görevleri ve gezinme ağacını netleştirin. Ardından ortak menü bileşenini test edin. Teknik kapsamı görüşmek için NEXTDİJİ ile iletişime geçin.