Menüyü Aç ve Menüyü Kapat – Erişilebilir Açılır Kapanır Gezinme Arayüzüne Yönelik Pratik Bir Kılavuz

Açılır Menü düğmesiyle başlayın, bu düğme doğrudan görünür bir paneli kontrol etsin. Durumu yansıtacak şekilde aria-expanded ve paneli belirtecek şekilde aria-controls öğelerini ekleyin. Erişilebilirlik kaynağını yaşayan bir kılavuz olarak ele alın ve geçiş düğmesini, klavye kullanıcılarının tüm cihazlarda hızlı bir şekilde ulaşabilmesi için sayfa altbilgisinde yerleştirin. “Menü” gibi basit bir etiket kullanın ve eylemleri gizleyen dağınıklıktan kaçının; net yön bulmanın önemli olduğu yosemite benzeri bir arayüzde bile bu deseni uygulayabilirsiniz.

Panel açıldığında, odağı içeri kilitleyin ve doğrudan ilk odaklanılabilir öğeye taşıyın. Escape tuşu paneli kapatır ve odağı değiştiriciye geri döndürür. Değiştirici ve menü arasındaki düzeni sakin tutun ve net bir odak halkası ile yüksek kontrastlı bir seçenek sağlayın. Geçişleri minimumda tutarak ve panelin başlığın etrafındaki hareketini tahmin edilebilir kılarak tarama tarzı dağınıklıktan kaçının ve kullanıcı deneyimini sabit ve sakin tutmak için odağın panelin arkasına düşmemesine dikkat edin.

Panelin etrafını bir ... ile sarın nav açıklayıcı bir bölge aria-etiketi ve öğeleri basit bir liste olarak sunun. Her öğe klavyeyle erişilebilir bir düğme veya bağlantıdır ve kullanıcılar öğeler arasında Ok tuşlarıyla gezinebilir; ayrıca, Kapat denetimi görünür ve doğrudan erişilebilir olmalıdır ve panel bir tane gösterebilir aria-gizli Ekran okuyucuların gizli içeriği duyurmasını önlemek için kapalı durumunu belirtin; kodunuzu sade tutun ve tüm sayfalar için tek bir kaynak kullanarak rotalar ve cihazlar arasında en üst düzey tutarlılığı sağlayın.

Gerçek kullanıcı yardım teknolojileri ve yalnızca klavye kullanan kullanıcılarla test edin. Kalıbı benimserken açma/kapama süresi, başarı oranı ve trafik üzerindeki etkisi gibi metrikleri izleyin. Ağır yeniden akış veya takılmalardan kaçınmak için sorumlu bir şekilde uygulayın. Küçük, yeniden kullanılabilir bir kaynak kalıbı kullanın ve sayfalar arasındaki geçişleri birleştirmek için tasarım sisteminizde "visita" adlandırma kuralını benimseyin. Desen, açık veya koyu temalarla çalışmalı ve gürültülü sayfalarda bile sakinliği korumalıdır, katedral benzeri bir başlık tutmalı ve dikkat dağıtıcı hareketlerden, gölgelerden veya ani değişikliklerden kaçınmalıdır.

Adım adım ilerleyin: önce bir sayfayı denetleyin, ardından tek bir tasarım diliyle diğerlerine ölçeklendirin. Bir patikada ziyaretçilere rehberlik eden izciler gibi, geliştiricilere ve tasarımcılara her seviyedeki Açık/Kapalı durumlarını açıklayan paylaşılan bir kaynakla yol gösterin. Ünite etrafındaki farklı görünüm boyutları ve içerikler etrafında etkileşimi öngörülebilir tutun, böylece sitenizdeki kullanıcılar tutarlı bir deneyime sahip olur. Bu küçük ayarlamalar, kullanılabilirlik için en yüksek beklentilerinizi yükseltir ve Yosemite, katedral çapaları ve sakin, samimi etkileşimler için tasarım yaparken trafik, tipografi ve düzeni dengelemeye yardımcı olur. Sizin takım canlı bir stil kılavuzunda bu kalıpları sürdürmeli ve yüksek kontrastlı temalar ile ekran okuyuculara bağımlı olanlar da dahil olmak üzere gerçek kullanıcılarla rutin olarak test ederek davranışı iyileştirmelidir.

Erişilebilir Menü Geçişleri İçin Pratik Kalıplar

Öneri: Menüyü açıp kapatan düğme tek, net etiketli olmalı, aria-expanded ve aria-controls menü kapsayıcısını göstermeli; bu, hemen anlaşılır, ekran okuyucu dostu geri bildirim sağlar ve cihazlar arasında çalışır.

Menüyü, yerel bir `nav` öğesinin içine bir `aria-label` ile yerleştirin ve kullanıcıların hızlıca bulabilmesi için başlığın altına konumlandırın. Panel kapatıldığında `aria-hidden` ile işaretleyerek, açıldığında gizli durumunu kaldırarak bu kılavuza uyun, hem büyük hem de küçük ekranların tutarlı ve erişilebilir kalmasını sağlayın.

Klavye kullanımı için desen: etkinleştirmek için Enter ve Boşluk, kapatmak için Esc ve denetimler arasında gezinmek için Sekme tuşlarını destekleyin. Panel açıldığında, odak ilk odaklanılabilir öğeye; kapandığında, odak etkinleştirme düğmesine dönsün. Bu dört adımlı yaklaşım, kullanıcıların bağlamı kaybetmeden güvenle hareket etmelerine yardımcı olur.

Odak ve durum yönetimi: görünür bir odak halkası bulundurun, durum değişikliklerini bildirin ve sayfa akışındaki tuzaklardan kaçının. Kullanıcı panelin dışını tıklarsa veya pencereyi yeniden boyutlandırırsa, menüyü zarifçe kapatın ve odağı değiştiriciye geri döndürün, böylece kullanıcılar kafa karışıklığı olmadan bu noktadan devam edebilirler.

Görsel ve etkileşim ipuçları: geçiş üzerinde büyük bir hedef alan sağlayın, yüksek renk kontrastını koruyun ve simgelere ek olarak metin etiketi sunun. Uyumluluk açısından, panelin dört farklı yakınlaştırma düzeyinde okunabilir kalmasını sağlayın ve animasyonların azaltılmış hareket tercihlerine saygı duymasını sağlayın; burada en büyük netlik kazanır ve basit bir adım dizisi sonuçları öngörülebilir tutar.

Ekran okuyucularla kontrolleri çalıştırın, ahwaneechee ve visita tarzı senaryolarda test edin ve kullanıcının sayfayı herhangi bir yerden ziyaret edebildiğinden ve menüyü çalıştırabildiğinden emin olun. Pratik çıkarımlar ve dört somut metrik içeren bir gönderi oluşturun: açılma süresi, kapanma süresi, sekmelerin sayısı ve Escape ile kapanma başarı oranı; bu çıkarım, uygulamayı iyileştirmenize ve ekiple önerileri paylaşmanıza yardımcı olur, gerekirse kullanıcı testleri için zaman ayırın.

Özet: Bu yönergeleri net bir geçiş, sağlam odak yönetimi ve erişilebilir etiketleme ile uygulayın, o zaman cihaz veya yetenekten bağımsız olarak kullanılabilirlikte büyük iyileşmeler ve daha hızlı, daha güvenilir etkileşimler göreceksiniz.

Klavye Erişilebilir Açık ve Kapalı Tetikleyicileri

Gezinmeyi hızlandıran ve cihazlarda aylarca süren testlerde çalışan, kullanıcıları asla fareye bağımlı bırakmayan tek, net etiketli bir düğme kullanarak menüyü `aria-expanded` ve `aria-controls` ile açıp kapatın. Giriş veya Boşluk tuşuna basarak açıp kapatın ve Tetikleyici'ye odaklanmak için Escape tuşuna basın. Bu kalıp uygulanabilir, gezinme hızını artırır ve cihazlarda aylarca süren testler boyunca çalışır, kullanıcıları asla fareye bağımlı bırakmaz.

1. Tetikleyici öğe: Kararlı bir kimliğe sahip gerçek bir düğme kullanın ve menüye bir aria-controls referansı ekleyin. Etiket, eylemi ve durumu yansıtmalıdır; açıldığında etiket veya aria-label değiştirmeyi düşünün. Örnek işaretleme (kaçışlı):

   Menüyü Aç

2. Menü kapsayıcısı ve rolleri: Öğeleri bir navigasyon bölgesine sarmalayın ve menü olarak sunun. Kapalıyken menüyü gizleyin (gizli veya aria-gizli). Örnek işaretleme (kaçışlı):

3. Klavye davranışı: Tahmin edilebilir kontrolleri etkinleştir. Enter veya Boşluk tuşu menüyü açıp kapatır; Escape kapatır. Dikey bir liste kullanırsanız, Yukarı/Aşağı ok tuşları öğeler arasında odağı hareket ettirir; Home/End ilk veya son öğeye atlar. Menü açıkken odağı içeride tutmak için basit bir odak tuzağı uygulayın.

4. Odak yönetimi ve test: Açıldığında, menüdeki ilk odaklanılabilir öğeye odakla; kapatıldığında, odağı tetikleyiciye geri döndür. Gerçek koşullarda test et: Ağustos ayında arazi rotaları haritalarında, yoğun ortamlarda ve Amerika'daki cihazlarda. Çevrenin ve en yüksek noktaların açık olduğundan emin ol ve öğeleri anlamlı isimlerle etiketlemeyi asla unutma. Tuvalet gibi bir etiket varsa, kafa karışıklığını önlemek için net bir terimle değiştir; kontrolün amacını tüm kullanıcılarla paylaş.

Ek İpuçları: Her öğe için tanımlayıcı etiketler sağlayın (Macera, Haritalar, Patika Dışı, Rakım, Çevre). Curry benzeri jargondan kaçının, terimleri somut ve net tutun. Yanıt sürelerini sıcak ve istikrarlı tutun ve etkileşimin kablolar, donanım klavyeler ve dokunmatik cihazlarla çalıştığından emin olun. Bu yaklaşım, insanların kalabalık alanlarda veya zorlu ortamlarda bile güven kazanmalarına ve görevleri verimli bir şekilde tamamlamalarına yardımcı olur.

Menü Anahtarları İçin ARIA Rolleri, Durumları ve Özellikleri

Ana düğmeyi geçiş anahtarı olarak başlatın ve ARIA öznitelikleriyle bağlayın: aria-expanded=”false”, aria-controls=”menu1″ ve aria-haspopup=”menu”. Başlangıç durumunu kapalı tutun ve menüyü yalnızca kullanıcı düğmeyi etkinleştirdiğinde açın; ardından aria-expanded=”true” olarak ayarlayın, menüyü görüntüleyin ve odağı ilk öğeye taşıyın. Menüyü kapatırken aria-expanded'ı “false” olarak geri yükleyin ve odağı geçiş anahtarına döndürün.

Konteyner için role=”menu”, seçeneklerin her biri için role=”menuitem” atayın; menüyü aria-labelledby ile açılır öğeye bağlayın ve betiğin odağı programlı olarak taşıyabilmesi için her öğenin tabindex=”-1″ olduğundan emin olun.

Klavye denetimleri: Yukarı ve Aşağı ok tuşları odakları öğeler arasında taşır; Home ve End ilk veya son öğeye atlar; Escape menüyü kapatır; Tab sekmeyle dışarıya, sayfaya odak taşır.

Durum yönetimi: Kapalıyken menüde aria-hidden=”true”, açıkken aria-hidden=”false” olarak koru; aria-expanded'ın gerçek görünürlüğü yansıttığından emin ol, etiketi mevcut duruma göre gerektiği gibi güncelle ve zaman içinde tutarlı geri bildirim sağla.

Testler ve değerlendirmeler: cihazlar boyunca ekran okuyucularla test edin; açıldığında odağın ilk öğeye indiğini ve kapatıldığında geçişe döndüğünü doğrulayın; haritaları ve rota seçeneklerini içeren çoklu cihaz kurulumlarında kontrol edin; en büyük menülerin arayüzdeki değişiklikler altında erişilebilir ve sağlam kalmasını sağlayın.

Çok günlük bir planla gelen gezginler için, görülmesi gereken yerler, izinler ve rota seçenekleri listesini açan bir geçiş düğmesi kullanın. Etiketi `aria-labelledby` ile bağlayın, menüyü `role=”menu”` ile gösterin ve her seçeneğe `role=”menuitem”` atayın. Her öğe, sürüş veya bisiklet seçeneğini temsil edebilir ve ayrıntılı haritalara işaret edebilir. Bu kurulum, odak sırasını bozmadan fiyat veya kullanılabilirlik değişikliklerini destekler ve en büyük menülere genişler. Bu öğeler görülmesi gereken yürüyüşleri, keşfedilecek vadileri ve yüzme alanlarını kapsayabilir; kullanıcı karar veremezse basit filtreleme sunun. Açık durum güncellemeleri kullanıcının seçimlerini yansıtmalıdır, böylece yıllar boyunca tutarlı bir etkileşim gözlemleyebilirsiniz. Gezi planlaması, navigasyon öngörülebilir kaldığında daha sorunsuz hale gelir.

Geçişler Sırasında Odak Yönetimi Stratejileri

Öneri: Açılan panel içindeki ilk interaktif öğeye, geçişten sonraki bir kare içinde odaklanın. Eğer böyle bir öğe yoksa, odağı panel başlığına taşıyın ve aria-expanded özelliğini duruma göre güncelleyin. Bu yaklaşım, kullanıcıya öngörülebilir bir yol sunar ve klavyeyle gezinme veya ekran okuyucu gibi durumlarda yönünü bulması için imkan sağlar. Genel olarak, odak akışını doğrusal tutun ve ilgisiz kontrollere atlamaktan kaçının. Bu, kullanıcının değişiklikle güvenle yüzleşmesine yardımcı olur.

Bir panel açıldığında, kullanıcıların geçişin arkasındaki öğelere sekme tuşuyla gidememesi için odağı panelin içinde tutun. Geçişten önceki odaklı öğeyi (geçiş sonrası çıpa) kaydedin ve kapatıldığında geri yükleyin. Odağın panelin dışına düşmesinin önlenmesi, bilişsel yükü azaltır ve aktivite sırasındaki kafa karıştırıcı hareketleri önler. Görünür bir odak halkası olduğundan emin olun ve dinamik içerik için aria-live güncellemelerini düşünün.

Dahili kontroller için mantıksal bir sekme sırası tutun ve panel uzun içerik barındırıyorsa atlama seçenekleri sunun. Kullanıcı Kaçış'a basarsa, kapatın ve odağı geçiş sonrası öğeye geri döndürün. Gezginlerin doğru seçeneği hızlıca bulabilmeleri için paneldeki bağlantılar için net etiketler ekleyin. Medyayı duraklatma veya atlama seçenekleri ekleyin ve video odakları hapsetmemesi için video kontrollerini erişilebilir tutun.

Klavye, dokunma ve ekran okuyucular dahil olmak üzere çeşitli koşullarda çok sayıda kullanıcıyla test edin. Her geçişten sonra odağı yeniden kazanmanın ne kadar sürdüğünü ölçün ve geçişler sırasında odağın panel içinde kaldığını doğrulayın. Genel kullanılabilirlik ve yüksek kontrast modlarındaki veya yoğun düzenlerdeki sorunlar hakkında geri bildirim toplayın. Harika bir başlangıç noktası için, testleri öğleden sonra çalıştırın ve sonuçları erken yinelemelerle karşılaştırın.

Mariposa veya yüksek rakımlı rehber gibi bir gezi sitesi için pratik bir senaryo hayal edin. Panel, rotalara, yemek seçeneklerine ve gidiş-dönüş fikirlerine bağlantılar sunabilir. Kullanıcılar öğleden sonra ayılar veya yaban hayatı hakkında bir panele ulaştığında odağı sabit tutun. Panelde posterler veya videolar varsa, oynatma duraklatıldıktan sonra odağın anlamlı bir kontrole dönmesini sağlayın. Kapsamlı bağlam ve yolculuklarına devam etmek isteyen ilk kez ziyaretçiler için baştan sona net bir yüz ile tüm sistem uyumlu hissetmelidir.

Ekran Okuyucu Bildirimleri: Canlı Bölgeler ve Duyurular

Öneri: Dinamik kullanıcı arayüzü güncellemelerini bir canlı bölgeye yerleştirin ve aria-live değerlerini dikkatli seçin: acil olmayan değişiklikler için aria-live=”polite”, hemen duyurulması gereken değişiklikler için aria-live=”assertive”. Ek tıklama gerektirmeden ekran okuyucuların sorunsuz çalışması için geçiş düğmesinin bir menüyü açıp kapattığında bölgeyi güncellediğinden emin olun.

Gerçek: Odak uzaklaşsa bile canlı bölgeler güncellemeleri duyurur. Kısmi parçalar yerine tam mesajın okunmasını sağlamak için aria-atomic=”true” kullanın ve bölgenin dili ve rolünün ayarlandığını onaylayın (örneğin, role=”status” veya role=”region”).

Öneriler: mesajları kısa tutun (bir veya iki cümle) ve menü açıldı; menü kapandı gibi bağlamı, denetim adını ve yeni durumu dahil edin. Mümkün olduğunda, yinelenmeyi önlemek ve güncellemelerin doğru öğeyi hedeflediğinden emin olmak için canlı bölgenin kimliği olarak string53'ü yeniden kullanın. Yanlış anlaşılmaları ve kullanıcıları kafasını karıştıran açıklamaları önlemek için ilgili mesajları eşleştirin. Kullanılabilirliği genişletmek için diğer denetimleri ve senaryoları göz önünde bulundurun.

Uygulama ipuçları: canlı bölgeyi tetikleyici öğenin altına yerleştirin, tetikleyiciyi aria-controls ile eşleştirin ve aria-expanded'ı buna göre ayarlayın. Canlı bölgeyi her durum değişikliğinde güncelleyin: “Menü açıldı” ve “Menü kapandı”. Bu yaklaşım, karmaşık arayüzlerdeki okuyuculara yardımcı olur ve diğer denetimler için bir dizi güncelleme işlemini gerçekleştirebilir.

Test ve gerçek dünya kullanımı: NVDA, VoiceOver ve TalkBack ile doğrulayın. Çevrimdışı demoları çalıştırın, basit sayfalarda güncellemelerin nasıl okunduğunu gözlemleyin ve bekleme süresini azaltmak için zamanlamayı ayarlayın. Ek olarak, canlı bölgenin “Parkurları yüklendi” ve “Doğa yürüyüşü ipuçları güncellendi” duyurduğu bir fresno doğa yürüyüşü blog senaryosu oluşturun; kilit noktaları, ipuçları ve haritalar etrafındaki içeriğin nasıl duyurulduğunu gösterin. Herkesin kendini evinde hissetmesine yardımcı olmak için yeşil bir renk ipucu ve samimi bir dil kullanın, katlamanın altındaki içeriğin ilgili hale geldiğinde duyurulmasını sağlayın. Ekibinizin bu yaklaşımı benimsemesini umuyorum, bunu bloggerlar ve uygulamalar için pratik bir ipucu olarak düşünün.

Hızlı kontrol listesi: tüm dinamik panellerin hızlı bir denetimini yapın, string53'ün kararlı kimlik olarak kaldığından emin olun ve canlı bölge stratejinizi belgelendirin ve gelecekteki yinelemeler için ipuçlarını ekleyin.

Mobil Cihazlar İçin Dokunma, İşaretçi ve Küçük Hedef Hususları

Birincil menü geçişini, her bitişik hedef çevresinde en az 8 piksel boşluk olacak şekilde minimum 44×44 CSS piksel vuruş alanı yapın. Bu kural, kesme noktaları arasında geçerlidir, böylece tek elle kullanım, başparmak bahar gün batımı gezisi sırasında tioga görünümlü bir telefonda kenara ulaştığında güvenilir kalır.

Düğme öğesine dolgu uygulayarak dokunma alanlarını genişletin, simgeyi küçültmeyin. Görünen etiketin en az 16 piksel yazı tipi ve 1,4 satır yüksekliği ile okunaklı olduğundan emin olun. Biraz ekstra dolgu bile yardımcı olur ve bu yaklaşım, parmak veya tutuş kısıtlamaları olan kullanıcılar için daha iyi erişilebilirlik sağlarken bütçe dostudur. Bu küçük değişiklik tüm planlarda iyi çalışır ve daha tahmin edilebilir dokunuşları destekler.

Dokunma ve işaretçi için tasarım, net hedefler ve öngörülebilir davranış gerektirir. Hedefler arasında en az 8 piksel boşluk bırakın; kök düzeyindeki geçişler, kalabalık alanlardan uzakta kolayca erişilebilmeleri için içeriğin üst kısmına yakın yerleştirilmelidir. Açık bir dokunuşla panelleri daraltmak için açık bir durdurma eylemi ekleyin ve durumu yansıtmak için aria-expanded ve aria-controls özelliklerini kullanın. Yanlış dokunuşları önlemek ve yoğun kullanım sırasında yanlış dokunuşları durdurmak için etkileşimi tutarlı tutun; bu kararlılık, yoğun anlarda hızlı ve kasıtlı dokunuşlara güvenen kullanıcılar için oldukça önemlidir.

Erişilebilirlik öznitelikleri önemlidir: klavye kullanıcıları için görünür bir odak halkası sağlayın, simgelerin anlam taşıması için aria etiketleri ekleyin ve renk kontrastı yönergelerini (4.5:1) karşılayın. İşaretçi olaylarını uygulayarak hem dokunmayı hem de fareyi destekleyin ve simge tabanlı düğmeler için yedekli bir metin etiketi sağlayarak güneş ışığında veya parlak havada yanlış dokunuşları veya karışıklığı azaltın. Masaüstünden uzakta senaryolarda erişilebilirliği bozabilecek yanlışlıkla kapanmaları önlemek için durdurma hareketini tahmin edilebilir tutun.

Test ve doğrulama: Değişen ekran boyutları ve koşullarına sahip iPhone ve Android cihazlarda test edin. Dokunma başarı oranı, navigasyon derinliği dokunuşları ve ıskalama dokunuşlarını ölçün. Tipik kullanımda 'lik bir başarı oranı hedefleyin; gerekirse hedef alan boyutunu ayarlayın. Bu plan bütçe dostu ve ölçeklenebilirdir; aynı boyutlandırmayı uygulama genelinde uygulamak için CSS değişkenlerini yeniden kullanın, böylece yeniden inşa etmek yerine gerçek kullanıcılarla iyileştirme yapmak için zaman harcayabilirsiniz. Deneyimin muir, tuolumne, tioga, vernal gibi yerleri ve çok sayıda cihazda gün batımı manzaralarını kapsamasını sağlamak için daima yürüyüşçüler ve gezginler de dahil olmak üzere farklı ihtiyaç ve bağlamlara sahip kullanıcıları dahil edin.

Uygulama yaklaşımı: mobil navigasyona temel yerlere yapılan kısa bir gezi gibi davranın–muir, tuolumne, tioga, vernal ve gün batımı manzaraları. Tüm geçişler için tek ve tutarlı bir model kullanın ve bir alt menü açıldığında net bir geri veya kapatma eylemi sağlayın. Amaç, sabrı artırmak ve sürtünmeyi azaltmaktır, böylece kullanıcılar her zaman kontrolün kendilerinde olduğunu hisseder ve hiçbir ritmi kaçırmaz. Bu her zaman geçerli yaklaşım, erişilebilirlik için daha iyidir ve seyahat bağlamlarında daha fazla kullanıcıyı destekleyebilir, seyahatleri planlamanıza, manzaraların tadını çıkararak vakit geçirmenize ve devam eden kontroller için test düzeneğinizde string53'ü bir referans etiketi olarak saklamanıza yardımcı olur. Bu yaklaşım her zaman geçerli, bütçe dostu ve seyahate hazır kalır.