Açık Menü Kapat Menüsü – Erişilebilir, Duyarlı Navigasyon UX'i Rehberi

Sabit bir konumda duran ve klavyeden erişilebilen Aç/Kapat etiketli bir düğmeyle başlayın. Sayfayı kaydırmadan ulaşabileceğiniz, ister masada ister hareket halinde olun, bir kontrol hedefliyorsunuz. Kullanıcının durum hakkında tahmin yürütmesini engellemek için etiketi "Menüyü Aç" ve "Menüyü Kapat" arasında geçiş yapacak şekilde ayarlayın ve klavye kullanıcıları için odak halkasını görünür tutun. Düğme, sayfanın tüm bölümlerinde görülebilecek şekilde içeriğin üzerinde yer almalı, böylece kullanıcılar metin satırları arasında arama yapmadan ona ulaşabilir. Düzenler arasında yerel hissettirmesi için kontrolü tutarlı bir x/y köşesinde konumlandırma seçeneğiniz bulunur.

Klavye öncelikli tasarım: Giriş veya Uzay menüyü açıp kapatır, Kaçış kapatır ve Ok Tuşlar öğeler arasında hareket eder. Kullan aria-genişletildi ve aria-controls Durumu ve ilişkileri ortaya çıkarmak için, ancak neyin neyi tetiklediğini kullanıcıların anlayabilmesi için davranışı anlatın. Menü açılırsa, kapatana veya tetikleyiciye geri dönene kadar odağı içine alın; bu, girişin gürültülü olduğu ve yaygın olarak birden fazla kişi tarafından kullanılan alanlar, araçlar ve diğer paylaşılan cihazlarda gezinmeyi güvenilir tutar.

Duyarlı davranış önemlidir: mobil öncelikli başlayın ve tutarlı bir desenle daha büyük ekranlara uyum sağlayın. 768 piksel altındaki ekranlar için düğmeye sabitlenmiş kompakt bir açılır menü veya taşınabilir bir panel düşünün; bu genişliğin üzerindeyse üst bilgide satır içi bir listeye geçin. İçerik satırlarını okunabilir tutun ve kullanıcıların koleksiyondaki yerini bilmesi için üst kısma yakın küçük bir işaretçi seti yerleştirin. Gün doğumundaki doğu işaretlerini düşünün; çizgiler üst kısma yakın durur ve uçurum ufkun üzerinde oturur, bir yürüyüşçünün zirveyi not ettiği bir sırt gibi yönlenmeye yardımcı olur.

Ölçüm ve yineleme: Gerekli varlıklar 400 ms'de hazır olacak şekilde, orta seviye bir cihazda ilk yüklemeyi 1,5 saniyenin altında hedefleyerek, menüyü açma ve klavye veya ekran okuyucularla ana hedefe ulaşma için en az görev başarı oranını hedefleyin. Renk kontrastı (metin 4,5:1) için WCAG AA'yı eşleştirin ve odak göstergelerinin arka plana karşı 3:1 kontrast sağladığından emin olun. Üstte içeriğe atlama bağlantısı ve kısa, mantıksal bir bölüm koleksiyonu ekleyin; geri bildirimleri her ay gözden geçirin ve buna göre ayarlama yapın. Yürüyüşçüler, işe gidip gelenler ve daha az el becerisine sahip kullanıcılar için iş akışını iyileştirebildiniz mi veya özellikle küçük ekranlarda ürün satırlarında gezinirken sürtünme fark ettiniz mi? Ayarların yerinde ayaklar için sürtünmeyi azaltıp azaltmadığını zaten takip ediyor muydunuz?

Odak göstergeleri görünür olan klavye öncelikli açma/kapama denetimleri

Yerli gibi başla düğme anahtar ve yansıtma durumu olarak aria-genişletildi ve aria-controls. etkinleştir Giriş veya Uzay açmak ve kullanmak için Kaçış Kapatmak için. Bu yaklaşım, üzerine gelmeye dayanmadan klavye kullanıcılarını tatmin eder.

Açıldığında, panelin içindeki ilk etkileşimli öğeye odaklan. Eğer yoksa, kullanıcıların hızlıca kapatabilmesi için odağı geçişe geri döndür. Kaçış.

Her odaklanılabilir kontrol için net bir şekilde görünen bir odak göstergesi sağlayın. Tarayıcının varsayılan odak halkasını veya tüm arka planlara karşı görünür kalan yüksek kontrastlı bir ana hattı tercih edin. Odaklanılabilir öğelerdeki odak ipuçlarını kaldırmaktan kaçının; klavye ile gezindiğinizde görünür kalmalıdırlar.

Paneli tetikleyicisine bağlayın aria-controls ve etiketi şununla bağla aria-labelledby. Kapatıldığında, uygula aria-gizli böylece yardımcı teknolojinin atlayabilmesi için panele; açıldığında bu özelliği kaldırın veya false olarak ayarlayın. Bu, okuma sırasını tahmin edilebilir tutar ve ekran okuyucu geri bildirimini iyileştirir. Mümkünse, kısa, rahatsız etmeyen bir güncellemeyle durum değişikliklerini duyurun aria-live.

Tuş takımıyla test: Geçişe Tab ile gidin, basın Giriş veya Uzay, o zaman kullan Kaçış kapatmak için. Açıkken odağın panelin içinde kalmasını sağlayın ve kapandıktan sonra geçişe geri döner. Mobilde, görüntü alanını yeniden boyutlandırarak ve odağın hızlı ve mantıksal bir şekilde gezinilebildiğinden emin olarak kontrol edin.

Gecikmeleri önlemek için betikleme işlemini sade tutun; hızlı bir geçiş anahtarı güveni pekiştirir. Yüksek kontrastlı bağlamlar için, odak halkasının belirgin kalması amacıyla renkleri ayarlayın. Panelin görünümünün akıcı hissettirmesi ancak klavyeye güvenen kullanıcılar için duyarlı kalması amacıyla kısa bir geçiş efekti ekleyin.

ARIA etiketleri ve geçiş durumunu duyurmak için canlı bölgeler

Görünür, klavyeyle kullanılabilen bir anahtar düğmesiyle başlayın, eylemi açıklayan bir aria-label içersin ve açma/kapama durumunu yansıtacak şekilde aria-expanded ayarlanmış olsun. Menü bölgesiyle aria-controls ile bağlayın. Menüye yakın, aria-live=”polite” ve aria-atomic=”true” içeren bir canlı bölge ekleyin ve değişiklikleri duyurmak için metnini güncelleyin, örneğin “Ana navigasyon açıldı” veya “Ana navigasyon kapandı”. Bu deseni seyahat odaklı bir web sitesinde uyguladığımız zamanlarda, Shenandoah ve Limberlost bölgelerindeki kullanıcılardan geri bildirimler tutarlı bir şekilde netti: durum belirgindi ve sonsuz kafa karışıklığını önlüyordu. İstediği şey öngörülebilir davranıştır; bu kurulum, vadilere veya yollar boyunca gelen okuyucuların simgelerden çıkarım yapmak zorunda kalmadan menünün kullanılabilir olup olmadığını anlamalarına yardımcı olur. not: gerçek yardımcı teknolojilerle test edin ve gereksiz tekrarı önlemek için kelimeleri ayarlayın.

Duyuruları doğal tutmak için, kullanıcı öğeler arasında sekmeyaparken içeriği çoğaltmaktan kaçının; canlı bölge yalnızca durum değişikliklerinde güncellenmeli, her odaklanma olayında değil. Durumu iletmek için asla renklere veya harekete güvenmeyin; canlı bölge erişilebilir geri bildirim sağlar. Tecrübeli testçilere göre bu, okunabilirlik ve hız açısından en iyilerden biri. Kullanıcılar klavyeyle geziniyorsa, durumdan emindirler; içerik uzunsa, mesajları kısa tutun. Menü adı ve bağlamı içerecek şekilde mesajı özelleştirebilirsiniz, örneğin ana menü için “Ana navigasyon açıldı” ve ikincil alan için “Alt menü açıldı” gibi, böylece kullanıcılar ek çaba harcamadan kendilerini yönlendirebilirler. Uzun listelere sahip yoğun sayfaların ihtiyaçlarını göz önünde bulundurun; metin tek nefeste gelecek şekilde ve ekran okuyucu kullanıcıları için yorgunluğa neden olmayacak şekilde olmalıdır. Diğerleri, “Shenandoah yollarındaki balıkçılar menü durumunu görüyor” gibi kısa bir bağlam eklemenin yardımcı olduğunu bulmuştur.”

Uygulama detayları

Geçiş düğmesine, bölgeyi referans alması için aria-controls ayarını yapın. Bölge, role=”region” ve içeriği tanımlayan bir aria-label'a sahip olmalıdır, örneğin, “Ana navigasyon”. Bölgeye aria-live=”polite” ve aria- கொண்டிருக்கும் true” ekleyin. Geçiş değiştiğinde canlı bölge metnini güncelleyin: ”açık“ veya ”kapalı“ ve isteğe bağlı olarak bölümün adını gösterin. Durumu yansıtmak için düğmede aria-expanded=”true”/”false” kullanın; ayrıca kontrol bir geçiş görevi görüyorsa aria-pressed”i de uygulayabilirsiniz. Güncellemenin tıklama veya tuşa basma ile eşzamanlı olarak gerçekleştiğinden ve duyuruyu tetiklemek için CSS geçişlerine dayanmadığından emin olun. Bir alt bölümü duyurmanız gerekiyorsa, aria-live=”polite” ve kısa bir etiketle ikinci bir canlı bölge düşünün. Bu desen düzenler arasında çalışır ve yardımcı teknolojiye güvenen kullanıcılara önemli sinyallerin ulaşmasını sağlamaya yardımcı olur. Bu yaklaşımın benimsenmesi doğaldır ve web siteniz büyüdükçe iyi ölçeklenir.

Test ve doğrulama

Klavye navigasyonu ve VoiceOver ile NVDA gibi ekran okuyucularla test edin. Canlı bölgenin tam durum değişikliğini duyurduğundan ve uzun, yoğun sayfalarda bile hızlıca geldiğinden emin olun. Dokunmatik geçişlerin durum güncellemesini güvenilir bir şekilde tetiklediğinden emin olmak için mobil cihazlarda kontrol edin. Kelimeler kesin değilse, tekrardan kaçınarak “açıldı” ve “kapandı” gibi kısa ifadeler kullanmak için metni revize edin. Kenar durumlarla karşılaştığınızda gerektiği gibi ayarlayın ve sonuçları belgeleyin. En yüksek memnuniyet, uzun anlatımlardan değil, doğru anda gelen tutarlı, özlü mesajlardan gelir. Takımdaki diğer kişiler, bu yaklaşımın destek taleplerini azalttığını ve insanların güvenle içerik içinde ilerlemelerine yardımcı olduğunu fark eder.

Menü düzeni için satış akışlarına uygun duyarlı kesme noktaları

Öneri: 768 pikselde bir kesme noktası uygulayarak, arama aşamasından onay aşamasına kadar rezervasyon adımlarını yansıtan erişilebilir bir taşınabilir menüye geçiş yapın.

Bu geleneksel yaklaşım, kullanıcıların gereksiz kaydırma yapmadan rezervasyon akışına odaklanmalarını sağlar ve etiketler kısa tutulup eylemler görünür kaldığında erişilebilirlik kılavuzları tarafından onaylanmaya devam eder.

1. Kesme noktalarını ve durumları tanımlayın: 0–767px mobil, 768–1023px tablet, 1024px+ masaüstü. Mobil cihazlarda, rezervasyon akışının ön kısmını en üste alarak dikey bir listeye daraltın; hızlı dokunuşlar için dokunma hedeflerini büyük ve etiketlerin uzunluğunu kısa tutun.
2. Sıralamayı rezervasyon adımlarıyla uyumlu hale getirin: Arama ve bölgesel filtreler, site ve kamp seçeneklerinden önce gelir, ardından tarihler, misafirler, ekstralar ve son inceleme/rezervasyon gelir. Her kırılma noktasında, kullanıcının nihai eyleme en fazla üç dokunuşla ulaşabilmesini sağlayın ve ulaşılan her adımla tamamlama amacına yaklaşın.
3. Görsel ağırlığı dengede tutun: küçük ekranlarda ağır ikonları sınırlayın; zihinsel yükü azaltırken rezervasyon akışında ilerleme hissini korumak için metin etiketlerini ve daha ince bir üstbilgiyi tercih edin.

• Model: Mobil cihazlarda temiz bir ön alan sağlarken rezervasyon akışı için kullanılan, arkada bir arka planı olan kapı dışı panel. Bu, hizmeti erişilebilir tutar ve üst çubuğun kalabalıklaşmasını önler.
• Desen: İşlev ve bölgeye göre gruplandırma: bölgesel siteler, popüler destinasyonlar ve kamp seçenekleri (çayır ve vahşi doğa yakınındaki siteler dahil) kullanıcıların akışı terk etmeden daha hızlı filtreleme yapmasına yardımcı olmak için.
• Tema: Kullanıcıyı bunaltmadan seçimlere rehberlik etmek için doğa odaklı gezilerle uyumlu tematik ipuçları (doğa, daha sıcak iklimler, şelaleler ve yakındaki patikalar).
• Desen: Etiket uzunluğu kontrolü: birincil eylemleri 2–3 kelimeyle sınırlayın, böylece düğmeler rahat bir genişlikte kalır ve kullanıcılar ekranın kenarına ulaşmaz.

Pratik ipuçları: Tecnologia de segurança de rede, incluindo sitios regionales de hawksbill e acampamento perto de cachoeiras, com cenários de reserva reais. Eles devem aparecer em um layout de cartão compacto em telas menores e se expandir para uma grade em telas maiores, garantindo que o usuário possa atender às suas necessidades sem etapas extras. Dentro de cada ponto de interrupção, mantenha o fluxo extremamente previsível e acessível, para que os usuários se sintam confiantes ao passar da pesquisa para a confirmação final.

Mobil cihazlar için dokunma hedefleri, dokunma alanları ve hareket ayarları

Dokunma hedeflerini en az 48x48 CSS piksel olarak ayarlayın, 8 piksel boşlukla ve alt kısma yakın yerleştirerek başparmakların uzanmadan erişmesini sağlayın. Bu, çoğu cihazda en iyi güvenilirlik için önerilen temel seviyedir ve yoğun dönemlerde sağlam kalır.

Denetimler yuvarlak şekiller kullandığında simgelerin etrafındaki dokunma alanlarını biraz daha büyütün ve dokunuşların güvenilir bir şekilde algılanması için ekran kenarlarını kapsayın. Bir oteli, konukevlerini ve kulübeleri temsil eden harita pinleri için daha büyük bir dokunma alanı sunun ve en yoğun kullanımda etkileşimleri sorunsuz tutun; vurgu ve servis durumlarındaki boyutları ayarlamak için bir ısı işareti kullanın.

Hareketler: Navigasyon için basit dokunmaları ve yatay kaydırmaları tercih edin; küçük cihazlarda çok parmaklı hareketlerden kaçının; belirgin bir geri kontrolü ve görünür odak durumlarını sağlayın. Kullanıcı bir aylık bir yolculuktan sonra gelirse, bir dokunma sonrasında net bir onay gösterin ve aktivasyonu belirtmek için gül rengi bir odak halkası gösterin.

Sınırlı ekran alanı altında düzen öngörülebilir kalır: birincil kontrolleri alt bantta yerleştirin ve tek bir satırda beş veya daha az eylem bulundurun. Otel, lodge ve kabin bölümlerinde tutarlı bir dokunma alanı bırakır. Daha az yoğun dönemler için, yanlış dokunmaları azaltmak amacıyla hedefleri hafifçe büyütün; yoğun sezonlar için, piknik planlaması ve kabinler ile lodge'larda hızlı kontroller sırasında hataları önlemek amacıyla boyutları sabit tutun.

Menüleri açıp kapatırken odağı kaydırmadan yönetme

Menü açıldığında odağı menü içine al ve ilk öğeye yerleştir; odak, arkasındaki boşlukta değil, etkileşimli ilk öğede olur. Tetikleyicinin aria-expanded özniteliğini güncelle ve görünür bir odak halkası sağla. Kapatırken, öngörülebilir bir noktaya varmak için odağı başlatan kontrole geri döndür. Bir reklam dikkati dağıtırsa, odağı ona kaydırma; menü kapanana kadar aktif bölge olarak menüyü tut. İlk gelen kontrollere, sürprizleri azaltmak için her seferinde aynı akışı uygula. Bunu yapmak disiplin gerektirir ve gösterişle ilgili değildir; deneyimli bir geliştirici, yan menülerde ve katmanlarda çalışan basit bir odak tuzağı uygulayabilir. Menü aktif olmadığı sürece odak dolaşmamalıdır.

Pratik adımlar

En iyi uygulamaları arayan rehberler, sapmayı erken fark etmeyi öğrenecekler. Dönebilen tabindex kullanın: bir öğeyi tabindex=”0″ olarak ayarlayın ve diğerlerini -1 olarak ayarlayın; Ok tuşları odağı hareket ettirir ve Sekme/Shift+Sekme menü içinde döngüye girer. Bu yaklaşım, girişin, öğelerin ve eylemlerin kullanıcının beklediği dar bir alanda kalmasını sağlar. Düzen eğriler veya gökyüzü panelleri içerebilse de, odak çapası kenar menüsünün içinde kalır, dolanmaz. Akışı şimdi planlamak, sapmanın sıklıkla gerçekleştiği kilometre taşını fark etmenize yardımcı olur, böylece mantığı daha sonra sıkılaştırabilirsiniz. Test sırasında sorunlar fark edilirse, buna göre ayarlayın.

Açıldığında ilk öğeye, kapandığında tetikleyiciye geri dönün. İlk gelen senaryolar için son odak hedefini saklayın ve menü kapandıktan hemen sonra geri yükleyin. Kullanıcı Escape tuşuna basarsa, menüyü kapatın ve odağı geri verin. Yoğun sayfalar akışı bozabilir; cihazlarda test edin ve sekmeler kaydırılıp odaklanılabilir öğeler değiştiğinde tuzağın hala çalıştığından emin olun. Evcil hayvanlar gibi, odak da beklenen öğenin üzerinde oturmalı; orada tutun ve taşınırsa geri yönlendirin. Planlama, testlerde bir kilometre taşı belirlemenize yardımcı olur, böylece doğru alışkanlıkları öğrettiğinizi bilirsiniz ve bir şeyler ters giderse, etkileşimi deneyimli bir ekip arkadaşıyla gözden geçirin; bir dahaki sefere kontrolleri nerede sıkılaştıracağınızı ve sapmayı tespit etmeyi nasıl geliştireceğinizi öğreneceksiniz.

Implementation notes

Tetikleyiciyi, aria-controls ile panele bağlayın ve durumu aria-expanded ile yansıtın. Tüm etkileşimli öğeleri panelin içinde odaklanılabilir durumda tutun ve menü kapanana kadar dışarıdaki içeriği yok sayın. Bir odaklanma tuzağı veya dolaşan tabindex stratejisi kullanın ve kapanması için Escape tuşunu dinleyin. Panel kapandığında, kullanıcının sayfada tanıdık bir noktaya ulaşabilmesi için odağı başlatan kontrole geri döndürün.