Öneri: Kısa ve öz modal panellerle başlayın; odak tahmin edilebilir şekilde hareket etsin; klavye kontrolü doğrulansın. Çizgili kontroller panel kenarları boyunca uzanarak kullanıcıların hızlıca tarama yapmasını sağlar. Açık durum geçişleri yumuşak kalarak hareketleri nazik tutmalıdır. İmleç içerikten şaşkınlık yaratmadan geçmelidir. Net istemler kafa karışıklığı hissini azaltır.
\nEtiketleme stratejisi: Her kontrolün ekran okuyucular için net bir etiketi olduğundan emin olun, böylece kulaklar hızlıca geri bildirim alabilir; duyulabilir ipuçları kullanıcıların ilerlemeyi ölçmesini sağlar. Kıskanç kontrastlar okunabilirliği bozar. Animasyonlar, dikkatin yerleşmesine izin vererek kullanıcı girdisiyle eş zamanlı olarak çalışmamalıdır; hassasiyeti olanlar için azaltılmış hareketi tercih edin. Aksi durumlar için bir yedek yol sağlayın.
\nUygulama notları: hafif, paylaşılabilir bir durumu koruyun; Odak noktasını Tab tuşuyla yüzeyde hareket ettirin; görevden alınana kadar odağı hapsedin; kullanıcılara başladıkları yere geri dönmeleri için açıkken önceki odağı geri yükleyin. Aynı odak kuralları tüm modlarda geçerlidir. Yavaş ağları varsayın; aşamalı yükleme için yapılandırın.
\nKullanıcı ihtiyaçları: ihtiyaçları, hedefleri, tercihleri, görevleri haritalayın; sağlıklı etkileşime saygı duyan hafif bir yüzey tutun. Okuyuculardan gelen geri bildirimler, hızlı istemlere ihtiyaç olduğunu gösteriyor. Kalıpları ortaya çıkarmak için bir bloga notlar gönderin; ister okuyucularla konuşun, ister sürtünmeyi azaltmak için somut adımlar sunun. Okuyucularla konuşmak, hızlı düzeltmeler için notlar verir.
\nKalite kontrol listesi: klavye navigasyonunu doğrulayın; ekran okuyucu etiketlerini sağlayın; renk kontrastını kontrol edin; hareket tercihlerine saygı gösterin; internette test edin; çevrimdışı modları test edin; kapatma süresini, hata oranını, kullanıcı mutluluğunu ölçün; açıklık, dinginlik, duyarlılık arasında hoş bir denge sağlayın. Güvenilirlik için, zarif bir bozulma sağlamak için etkileşimler sırasında internet kaybını simüle edin.
\nİletişim Penceresi UX'i için Pratik Çerçeve
\nKlavye odağını yakalayan odaklanmış bir modal yüzeyle başlayın; ulaşılabilir birincil eylemleri ortaya çıkarır; net bir çıkış sağlayın; rıza durumunu kaydedin. Böyle bir desen yardımcıdır, hızlı yineleme için özel bir yaklaşımdır; aydan aya yayınlar için temel olarak benimseyin.
\n2) Klavye öncelikli yapı Tahmin edilebilir bir sekme sırası oluşturun; ilk odaklanılabilir kontrolü yerleştirin; görevden alındığında odağın tetikleyici öğeye geri dönmesini sağlayın; kulaklar için içeriğe atlama seçenekleri sağlayın; yardımcı teknolojilere güvenen kullanıcılar için duyuruları net tutun; deneyimi her zaman kararlı tutun.
\n3) Etiketleme; odak göstergeleri Kısa, eylem odaklı etiketler kullanın; belirsiz terimlerden kaçının; kalıcı bir kapatma öğesi gösterin; içerik değişirse etiketi güncelleyin; belirsizliği azaltmak için dil tutarlılığını koruyun; belirsiz davranışlara dikkat edin.
\n4) Rıza durumu iptali Bir kullanıcı rızasını geri çekerse yüzeyi kapatın; odağı tetikleyiciye geri yükleyin; tarafsız, kısa bir mesaj gösterin; çok eşlilik gibi rıza sinyallerinin değiştiği durumları barındırın; hesap verebilirlik için değişiklikleri bir terim günlüğüne kaydedin.
\n5) Geri bildirim döngüleri; ölçüm Bir aylık döngüde metrikleri izleyin; sorunlar hakkında çok sayıda veri toplayın; kullanıcılardan soru sinyallerini yakalayın; kullanıcı yolculuğunu haritalayın; belirsizliği azaltın; davranışları buna göre ayarlayın; kendinizi açıkça ifade etmek için bir yol sağlayın.
\n6) Belirsizlik yönetimi; net davranışlar Bir senaryo bir belirsizliği tetiklediğinde, kısa, somut bir açıklama sunun; bir veya iki somut seçenek sunun; ürün incelemeleri için soruyu günlüğe kaydedin; içgörüleri hızlı bir şekilde gerçekleştirin; yinelenen acı verici sonuçlara karşı harekete geçin; gelecekteki güncellemeler için bir referans haline gelin.
\n7) Belirteçler; depolama; ilerleme Etiketler için tek bir gerçek kaynağı kullanın; son durumu minimal bir yerel depoda saklayın; terim eşlemesinin kararlı kalmasını sağlayın; gerekirse başka bir terim eşlemesini güncelleyin; azaltılmış hareket gibi kullanıcı tercihlerine saygı gösterin.
\n8) Uyumluluk; yönetişim Yasal hususlarla uyumlu hale gelin; gizlilik ilkeleri; aylık incelemeler yapın; sonuçları ürün hedeflerine eşleyin; sonuçları paydaşlarla paylaşın; acı noktalarını azaltmak için bir yapı oluşturun.
\nOdak Yönetimi: klavye navigasyonu ve odak yakalama
\nModal benzeri panellerin içinde katı bir odak yakalama sağlayın: açıldığında, odağı birincil eylem düğmesine ayarlayın; yakalama, kullanıcı Escape veya ayrı bir kapatma kontrolü aracılığıyla çıkana kadar odağı kapsayıcının içinde tutmalıdır; bu, çok fazla tahmin edilebilirlikle birlikte, başıboş odak kaymasını kesinlikle azaltır.
\nTuş işleme ayrıntıları: Tab, odaklanabilir kontroller arasında döngüler; son öğedeyse Tab, ilk öğeye gider; ilk öğedeyse Shift+Tab son öğeye gider; Escape yakalamadan çıkar; Home ilk öğeye gider; End son öğeye gider; yalnızca DOM sırasına güvenmekten kaçınarak hafif bir keydown dinleyicisiyle uygulayın. Bu ilginç sonuçlar verir.
\nARIA ipuçları: modal gibi davranan kapsayıcılar için aria-modal="true" bildirin; başlığı referans almak için aria-labelledby sağlayın; odak yakalamanın hava geçirmez kalmasını sağlayın; bunun, belirsizliğin ortaya çıkabileceği flört senaryolarında veya randevularda iyi kullanıcı yolculuklarının peşinde koşan astelle ekipleri için sağlam bir temel olduğunu unutmayın.
\nKod, panel kapandığında odağın paneli tetikleyen öğeye geri dönmesini sağlamalıdır (odak geçmişini alma). Paneli açan öğe önceki odağını biliyorsa, geri yükleme otomatik olarak gerçekleşir, bu da kullanıcılar ve arayüzler arasındaki sağlıklı ilişkiler için çok önemlidir. Yakalama kararlı olana kadar yalnızca klavye navigasyonuyla test edin; ayrıca şüpheli odak atlamaları veya gevşek odak halkaları gibi sorunları ortaya çıkarmak için ekran okuyucu kullanıcılarıyla test edin.
\nsağlam bir temel elde etmek kolay değil; çok şey söyleyen astelle, iyi bir ritim öneriyor; flört bağlamları veya randevular belirsizliği ortaya çıkarır; daha sorunsuz navigasyon sağlamak için geliştirmek, denemek; seçenekler, geri bildirim evrimi tetikleyene kadar görünür, ton olarak hoştur; oldukça fazla nüans, ayarlanacak çok şey; ekip, şüpheli bir döngüyü önlemek için bir tuzağı ne zaman gevşeteceğini tekrar biliyor; bu desen tamamen sağlıklı ilişkilere doğru gelişecektir.
\nEtiketleme ve Açıklamalar: erişilebilir adlar, açıklamalar ve ARIA öznitelikleri
\nÖneri: Her kontrol için net bir erişilebilir ad sağlayın; görünür bir etiket kullanarak oluşturun; gerekirse aria-labelledby aracılığıyla referanslayın; aria-describedby ile kısa bir açıklama sağlayın; yardımcı teknoloji için bütünlüğü korumak için adlandırmayı kararlı tutun.
\nEtiketleme yaparken, çevrimiçi bağlamlarda da anlamlı kalan kelimelere güvenin; yer tutucu ipuçlarına güvenmekten kaçının; etiketler kontrollere yakın kalmalı, kısa ama açıklayıcı olmalıdır; belirsizlikten kaçının; görünür kelimeler kullanıcılar tarafından görülmeli; benzer şekilde yardımcı cihazlar; düzgün bir şekilde etiketlenmiş kontroller, formlar sırasında rahatsızlığı azaltır; en iyi sonuçlar, yeni kullanıcılar da dahil olmak üzere herkesin beklentilerini karşıladığınızda ortaya çıkar.
\nAdları, açıklamaları, durumu iletmek için ARIA özniteliklerini kullanın; aria-labelledby bir kontrolü bir veya daha fazla görünür veya açıklayıcı öğeye bağlar; aria-describedby ekstra bağlam sunar; doğrulama için aria-invalid hataları iletir; isteğe bağlı alanlar için aria-required gerekli durumu işaretler; ekran okuyucularla test etmek, tutarlı bir şekilde bilgi yüzeylerini sağlamaya yardımcı olur.
\nDaha zor durumlar için pratik ipuçları: Bir kontrolün görünür bir etiketi yoksa, DOM'da açıklayıcı bir etiket yerleştirin ve aria-labelledby aracılığıyla referanslayın; dinamik değişiklikler için aria-live aracılığıyla güncellemeleri duyurun; çok adımlı yolculuklar için, süreci rayından çıkarabilecek kafa karışıklığını önlemek için etiketleri kararlı tutun; bu, çevrimiçinde herkese destek vermeyi, belirsizliğin neden olduğu rahatsız edici anlardan kaçınmayı içerir; kendinize soru işareti bırakmayan etiketler vermez miydiniz, böylece kullanıcıların uzun oturumlara katlanması gerekmez; iyi bir yaklaşım, kapsamın ötesinde nasıl ilerleyeceğinizi bilmedikçe, başka bir işletme için başarıyla karşılanır; kesin ifadeler ve kararlı referanslarla ekstra adımlardan geçmek önlenebilir hale gelir.
\nModal ve Modal Olmayan İletişim Kutuları: her bir deseni ne zaman kullanmalı
\nÖneri: modal istemler rıza veya kritik eylemler için ayrılmalıdır; engellemeyen ipuçları akışın hareket halinde kalmasını sağlar; bu denge daha net kararlar verir; metrikler arasında görev tamamlama oranı, kesinti sıklığı, memnuniyet puanı bulunur.
\n- \n
- Engelleyici istemler (modal desen)\n
- \n
- Seçme nedenleri: devam etmeden önce rıza gereklidir; çerez onayı uygundur; yıkıcı eylemler onay gerektirir; yüksek risk, geri dönüşü olmayan değişiklikler; bir karar verilene kadar odak hapsedilir; işaretler arasında zorunlu bir seçim bulunur; sonuçlar arasında kullanıcılardan net bir taahhüt bulunur; tamamlanma süresi uzayabilir; güvenlik için harika; aşırı kullanılırsa akış için kabus; istemleri kısa tutun; aşırı uzun bloklardan kaçının; aşırı uzun bir istem berbat derecede sinir bozucu olabilir. \n
- Uygulama ipuçları: metni kısa tutun; iki açıkça etiketlenmiş düğme kullanın; hızlı bir çıkış sağlayın; klavye desteği sağlayın; örnek: çerez onayı; reddedilirse, bir alternatif yol sunun; dönüşümleri, hemen çıkma oranını, görev tamamlamayı izleyin. \n
\n - Engellemeyen istemler (modal olmayan)\n
- \n
- Seçme nedenleri: akış içindeki bilgiler; bağlam korunur; satır içi doğrulama netliğe yardımcı olur; işaretler arasında ilerleme çubukları, durum başlıkları, araç ipuçları bulunur; hemen rıza gerekli değildir; kullanıcılar yolculuklarına devam edebilir; ağır kesintilerden kaçının; tam tersi, aciliyet ortaya çıkarsa modala geçin; notlar: Bir kullanıcı destek gönderilerinde bir soru sorarsa, satır içi ipuçları hızlı bir yanıt vererek sürtünmeyi azaltır. \n
- Uygulama ipuçları: görselleri hafif tutun; klavye navigasyonunu sağlayın; net bir görevden alma sağlayın; ilgili ayrıntıları yakında tutun; ekran okuyucuları destekleyin; daha fazla bilgiye hızlı erişime izin verin; bazı kılavuzlarda, eımlar kontrollere yakın hızlı eylemler olarak görünür; kullanıcı daha derin açıklamalar ararsa modala geçin. \n
- Ek hususlar: işlem sonrası kurtarma için tasarlayın; modal olmayan bildirimlerin kullanıcı odağına saygı göstermesini sağlayın; etkileşim sinyalleri aracılığıyla kullanıcı ilgisini izleyin; bu istemlerin akışı bozmaktan ne sıklıkla kaçındığını ölçün; yolculuğu rayından çıkarmadan aynı hedefe ulaşmak için net bir yol sağlayın. \n
\n
Hareket, Azaltılmış Hareket Tercihleri ve Görsel İpuçları
\nÖneri: İşletim Sistemi düzeyindeki azaltılmış hareket bayraklarına saygı gösterin; temel değişiklikler için statik bir durum sağlayın; tamamen hareketten vazgeçmek için ayarlar panelinde hızlı bir geçersiz kılma sağlayın.
\nTeknik yaklaşım: CSS medya sorgusu prefers-reduced-motion'a güvenin; eşleştiğinde çevirileri, döndürmeleri devre dışı bırakın; geçişleri sıfıra ayarlayın; kalan zamanlamayı 100 ms'de sınırlayın; dekoratif hareketi sembolik ipuçlarıyla değiştirin; düzen kaymalarını önlemek için içeriği yerinde tutun. Bu yaklaşım çabaya değer; çünkü internet kullanımı sırasında bilişsel yükü azaltır.
\nGörsel ipuçları: renk varyasyonlarına, parlaklığa, tipografiye, simgelere güvenin; durum değişiklikleri için hareketten kaçının; ilerleme için statik çubuklar veya yüzde metni sunun; hareket devam ederse süreyi 100 ms'nin altında sınırlayın; animasyonları atlama seçeneği sağlayın. İpuçları, güzel estetiğin peşinde koşmak yerine güven kazanmalıdır; saatlerce kullanım sırasında net kalan sinyallere yatırım yapın.
\nİçerik stratejisi: iskelet ekranları statik kalır; getirme sırasında titreme olmadan yer tutucular gösterin; statik ilerleme metni veya belirlenmiş bir çubuk kullanın; jank'ı önlemek için düzenin kararlı kalmasını sağlayın; bu modda hareket en aza indirildiğinden, kullanıcı odağını bozan düzen kaymalarından kaçının.
\nPerformans planı: operasyonel varlıklara güncellemeler zamanlayın; internetteki yük saatlerini azaltmak için varlıkları önbelleğe alın; cihazlar arasında bütünlüğü koruyun; bütçeye uygun planlar uygulayın; ince ayarlamalar için yer bırakın; hareket felsefesi başkalarından gelen eleştirilere açık olmalıdır; çünkü kullanıcı beklentileri gösteriş yerine netliği tercih edecek şekilde değişmiştir; bu, harekete pratik bir yaklaşımla uyumlu görünüyor.
\nUygulama Desenleri: ARIA Rolleri, Durumları ve Yaşam Döngüsü Kancaları
\nTek bir gerçek kaynağıyla başlayın: her kontrolün rolünü aria-* öznitelikleri aracılığıyla bildirin; görünürlüğü, devre dışı durumunu veya değeri yansıtmak için bir veya iki durum seçin. Örneğin, geçiş yapılabilir yüzeylere aria-expanded uygulayın; hedef bölgeyi referanslayan aria-controls ile eşleştirin. Bu deseni uyguladıktan sonra, ekran okuyucu kullanarak yardımcı teknolojiyle doğrulayın; odağı etkinleştirmeden önce duyurulan durum değişikliğini bekleyin. Bir site bileşenleri yeniden kullanıyorsa, kullanıcılar için yıldan yıla tutarlı kalmak için aynı yaklaşımı sayfalar arasında uygulayın; siteler arasında tahmin edilebilir davranışlar oluşturarak kararlılık bulacaksınız. Bu yaklaşım, özelliklerle deney yapan kullanıcılar için etkileşimleri hoş tutarken belirli cihazlarda, tarihlerde, yerlerde (elle etiketleri, bla yer tutucuları dahil) aynı netliği sağlar. Sınırlar daha net kalır; yorgun desenlerin yerini, kullanıcıları ileriye taşıyan kısa akışlar alır. düşünce
\nDüğme, onay kutusu, uyarı, araç ipucu gibi rolleri kullanın; gruplar için adlandırmayı oluşturmak için aria-labelledby uygulayın; erişilebilirlik ağacından kritik olmayan parçaları kaldırmak için aria-hidden'ı koruyun; odaklanılabilir öğeler, uygun tabIndex değerleri ve sezgisel odak sırası aracılığıyla klavye çalışabilirliği sağlayın. Bu yaklaşım, havalı sitelerde tahmin edilebilir navigasyon sağlar; sayfalar arasında rollerle deneme yapmak, hangi cihazların, yardımcı teknolojinin en iyi şekilde çalıştığını ortaya çıkarır. Gücünüz, her etkileşimli yüzeyin dokunma, ekran okuyucular veya klavyeler aracılığıyla erişilebilir kaldığında gösterilir; bu, yorgunluğu azaltır ve kullanıcıların yorgun siteler için sınırlamaların ötesinde, akışta daha uzun süre kalmasına yardımcı olur.
\nGeçiş kontrolleri için aria-pressed, katlanabilirler için aria-expanded, etkinliği belirtmek için aria-disabled, üç durumlu öğeler için aria-checked gibi durumlara güvenin; her eylemden hemen sonra DOM'daki değişiklikleri yansıtın; güncellemelerin durum değişikliklerinden sonra gerçekleşmesini sağlayın, daha önce değil. Bu tutarlılığa yardımcı olur; aynı zamanda tarihlere, etiketlere veya ilerlemeyi izlemek için durum sinyallerine güvenen kullanıcılar için yorgunluğu azaltır; gerçek kullanıcılarla kısa randevular dahil.
\nYaşam döngüsü kancaları, odağın ne zaman hareket ettirileceğini yönetir; aria özniteliklerini güncelleyin; bir odak yakalamayı yönetin. Bağlama sırasında, yüzeyin içindeki ilk odaklanabilir öğeye odağı ayarlayın; gösterdikten sonra, aria-hidden'ı buna göre ayarlayın; yok edildikten sonra, odağı tetikleyiciye geri yükleyin; dinleyicileri geçitlemek için bir boolean isVisible değeri kullanın; modern kitaplıklarla oluşturuyorsanız onMount, onUpdate, onDestroy'a kancalar yerleştirin; yalın kod kullanıyorsanız gösterme/gizleme olaylarına bağlayın. Bu yorgunluğu azaltmaya yardımcı olur; dokunmatik cihazlar, odağın azaltılmış hareketinden yararlanır; sınırların içinde kalmanın, daha sakin deneyimleri aile sitelerindeki dağınıklıktan daha uzun süren akışlara dönüştürdüğünü göreceksiniz.
\ndüşünce: Geri bildirimi sıkı ve mesajları kısa tutan yalın bir felsefe sürdürün.
\n| Rol | ARIA öznitelikleri | Yaşam döngüsü ipuçları | Notlar |
|---|---|---|---|
| Geçiş Düğmesi | aria-expanded, aria-pressed, aria-controls | etkinleştirmeden sonra odak | klavye ile çalıştırılabilir, etiket eylemi açıklamalıdır |
| Kapatılabilir Yüzey | aria-hidden, aria-labelledby | gösterme/gizleme olayları | gerektiğinde aria-live aracılığıyla durumu duyurun |
| Liste Öğesi | aria-selected, aria-disabled | seçim değişiklikleri | sıralamayı ve netliği koruyun |
| Araç İpucu Benzeri Yardımcı | aria-describedby, role="tooltip" | üzerine gelme/odak görüntüleme | kısa, zamana bağlı mesajlaşma |