aria-expanded özniteliği, interaktif bir öğenin şu anda genişletilmiş veya daraltılmış daraltılabilir bir kapsayıcıyı kontrol edip etmediğini belirtmek için kullanılan bir WAI-ARIA özelliğidir. Bu özniteliği bir menüyü, akordeonu veya gizli paneli tetikleyen düğmeler veya bağlantılar gibi öğelere uygulayarak, yardımcı teknoloji kullanıcılarına etkileşimde bulundukları içeriğin durumu hakkında bilgi vermiş olursunuz. Doğru kullanım, ekran okuyucuların bir bölümün açık veya kapalı olduğunu duyurmasını sağlayarak kullanıcıların web sitenizde güvenle gezinmesine olanak tanır.
Modern web tasarımında aria-expanded amacısı nedir?
W3C WAI-ARIA standartlarına göre aria-expanded, interaktif bir öğenin şu anda genişletilmiş veya daraltılmış daraltılabilir bir kapsayıcısını kontrol edip etmediğini gösterir. Bir kullanıcı gizli bir navigasyon menüsünü açıp kapatan bir düğmeye tıkladığında, ekran okuyucunun o menünün şu anda görünür mü yoksa gizli mi olduğunu bilmesi gerekir. Bu öznitelik olmadan tarayıcı, açma/kapama durumu hakkında programlı bir sinyal sağlamaz ve yardımcı teknoloji kullanıcılarının eylemlerinin istenen bölümü başarıyla açıp açmadığını tahmin etmesine neden olur. Kullanıcı kontrolcü ile her etkileşime girdiğinde bu durum JavaScript tarafından dinamik olarak değiştirilmelidir.
aria-expanded doğru şekilde nasıl uygulanır
Uygulama hem statik biçimlendirme hem de dinamik güncellemeler gerektirir. İçerik varsayılan olarak gizliyse genellikle ‘false’ olarak ayarlayarak bileşenin başlangıç durumunu HTML’nizde tanımlarsınız. Kullanıcı tetikleyiciye tıkladığında, içerik görünür hale geldikçe betiğiniz öznitelik değerini ‘true’ olarak güncellemelidir. Bu, e-ticaret ürün sayfalarında bulunan akordeon bileşenleri, mobil menü geçişleri ve açılır filtreler için yaygın bir desendir. Tetikleyici öğenin odaklanılabilir olmasını ve durum değişikliğinin anında gerçekleşmesini her zaman sağlayın.
aria-expanded özniteliğini diğer özniteliklere kıyasla ne zaman kullanmalısınız?
aria-expanded ile diğer durumlar arasında karar vermek, öğenin neyi kontrol ettiğini anlamayı gerektirir. aria-expanded özniteliğini özellikle öğe bir kapsayıcının görünürlüğünü değiştiren bir kontrolcü olduğunda kullanın. Ayrı bir bölgenin görünürlüğünü kontrol etmeyen öğeler için bunu kullanmayın. Örneğin, yeni bir sayfa açan basit bir düğme bu özniteliği kullanmamalıdır. Bunun yerine, aynı sayfa bağlamında belge nesne modelini değiştiren arayüz kalıpları için kullanın.
| Öznitelik | Birincil Kullanım Senaryosu | Hedef Öğe |
|---|---|---|
| aria-expanded | Daraltılabilir bölümler | Düğmeler/Bağlantılar |
| aria-hidden | İçeriği gizleme | Kapsayıcılar/Divler |
| aria-haspopup | Menü tetikleyicileri | Düğmeler/Divler |
Alien Road iş akışlarımızda aria-expanded özniteliğini nasıl uygular
Alien Road olarak, ilk tel kafes aşamasından itibaren erişilebilirliği tasarım-inşa sürecimize entegre ediyoruz. Bir müşteri için özel bir akordeon veya navigasyon oluşturduğumuzda, durum değişikliği gereksinimlerini proje özellikleri dosyalarımızda belgelendiririz. Geliştirme aşamasında mühendislerimiz, bir arayüz öğesinin tıklama olayını aynı öğenin aria-expanded değer güncellemesiyle eşleyen JavaScript fonksiyonları yazar. Durumun doğru şekilde duyurulduğunu doğrulamak için ekran okuyucular kullanarak manuel kontroller gerçekleştiririz. Bu, site müşterilerimiz için canlıya geçmeden önce her interaktif bileşenin temel erişilebilirlik standartlarını karşılamasını sağlar.
aria-expanded kullanırken yapılan yaygın hatalar
Sık görülen bir hata, kullanıcı arayüzle etkileşime girdiğinde özniteliği güncellemeyi unutmaktır. Düğme ‘expanded=true’ diyor ancak içerik görsel olarak gizliyse, kullanıcı deneyimi kafa karıştırıcı hale gelir. Başka bir hata da, herhangi bir genişlemeyi tetiklemeyen statik öğelere özniteliği uygulamaktır. Betiğinizin, kullanıcı aktif alanın dışına tıkladığında açık bir menünün kapatılması gibi uç durumları ele aldığından emin olun. Bu, durumun sayfanın görsel temsiliyle senkronizasyon dışına çıkmasını önler.
- Her zaman doğru boolean değerlerini kullanın: ‘true’ veya ‘false’.
- JavaScript’inizin özniteliği kapsayıcıda değil, tetikleyici öğede güncellediğinden emin olun.
- Kontrol öğesinin bir düğme etiketi gibi yerel olarak odaklanılabilir olduğunu doğrulayın.
- Durum değişikliği duyurusunu onaylamak için uygulamanızı bir ekran okuyucu ile test edin.
Kontrolcünün durumu neden önemlidir?
Kontrolcünün durumu, kullanıcıya etkileşimlerinin sonucu hakkında bağlam sağlar. Bir kullanıcı bir menüyü açmak için bir tuşa basarsa, aria-expanded özniteliği onlara eylemin başarılı olduğunu ve artık keşfedilecek yeni bir içerik bölümü olduğunu bildirir. Olmadan, kullanıcı sayfanın yanıt vermediğini veya bozuk olduğunu varsayabilir. Özniteliği doğru tutarak, tüm ziyaretçilerin geçişin görsel onayına ihtiyaç duymadan içeriğinizde gezinmesine olanak tanıyan güvenilir bir deneyim yaratırsınız.
Hangi arayüz kalıpları aria-expanded gerektirir?
Çeşitli arayüz kalıpları, erişilebilirliği korumak için bu özniteliğe güvenir. Akordeonlar, birden fazla başlığın kendi gövde içeriklerinin görünürlüğünü kontrol ettiği en yaygın örnektir. Navigasyon çubuklarındaki açılır menüler de alt menülerin varlığını belirtmek için sıklıkla bunu kullanır. Ek olarak, e-ticaret sitelerindeki filtre panelleri genellikle arama kriterlerinin görünürlüğünü yönetmek için bunu kullanır. Yönettiğimiz tipik bir hesapta, bu kalıpları kullanıcıların aramalarını daraltması gereken ürün listeleme sayfalarında görüyoruz.
- Akordeonlar: İçerik bloklarının görünürlüğünü açıp kapatın.
- Navigasyon Menüleri: Alt menülerin görünür olup olmadığını belirtin.
- Filtreler: Kenar çubuğu arama kriterlerinin görüntülenmesini yönetin.
- Modal İletişim Kutuları: Tetikleyicinin genişleme durumunu yönetin.
Bu hafta nereden başlanmalı
Web sitenizde en sık kullanılan interaktif öğelerinizi denetleyerek başlayın. Diğer içeriğin görünürlüğünü değiştiren tüm düğmeleri veya bağlantıları tanımlayın. Bu öğelerin şu anda aria-expanded özniteliğinin doğru şekilde atanıp atanmadığını ve dinamik olarak güncellenip güncellenmediğini kontrol edin. Bu özniteliklerden yoksun öğeler bulursanız, bunları uygun şekilde yönetmek için betiklerinizi güncelleyin. Daha büyük siteler için, kullanıcı navigasyonunda ve genel site erişilebilirliğinde en yüksek etkiye sahip oldukları için önce ana navigasyona ve herhangi bir filtre veya akordeon bileşenine odaklanın.
Sık Sorulan Sorular
Bir bağlantıda aria-expanded kullanmalı mıyım?
Evet, bir bağlantıda aria-expanded kullanabilirsiniz, ancak eylem tamamen bir arayüz durum değişimi ise bir düğme öğesi kullanılması genellikle tercih edilir. Bağlantılar genellikle yeni bir URL’ye navigasyon için amaçlanmıştır. Bir açma/kapama eylemi için bir bağlantı kullanmanız gerekiyorsa, tamamen erişilebilir olduğundan ve aria-expanded özniteliğinin ilişkili kapsayıcının mevcut durumunu doğru şekilde yansıttığından emin olun.
aria-expanded içeriğin gizlenmesini otomatik olarak yönetir mi?
Hayır, aria-expanded öğenin gerçek görünürlüğünü kontrol etmez. Sadece durumu yardımcı teknolojiye iletir. İçeriği ekrandan fiziksel olarak gizlemek için hala display: none veya visibility: hidden gibi CSS kullanmalısınız. Öznitelik basitçe, ekran okuyuculara güvenen kullanıcılar için bu kapsayıcının mevcut durumunu tanımlamak üzere bir etiket görevi görür.
Genişletilmiş durum yoksa hangi değeri kullanmalıyım?
Bir öğe daraltılabilir bir bölgeyi kontrol etmiyorsa, aria-expanded özniteliğini hiç kullanmamalısınız. Yalnızca görünür ve gizli durumlar arasında değiştirilebilen içerikler için tetikleyici görevi gören öğelere uygulayın. Özniteliği daraltılamayan öğelere dahil etmek, aslında var olmayan bir işlevselliği ima ederek ekran okuyucu kullanıcıları için kafa karışıklığına neden olabilir.
aria-expanded uygulamasını nasıl test edebilirim?
Uygulamanızı test etmek için NVDA veya VoiceOver gibi bir ekran okuyucu kullanın. Tetikleyici öğeye gidin ve ekran okuyucunun durumu nasıl duyurduğunu gözlemleyin. Tetikleyiciyi etkinleştirdiğinizde, ekran okuyucu bölümün artık genişletildiğini belirtmek için durumunu güncellemelidir. Duyuru değişmezse, JavaScript’iniz etkileşim sırasında öznitelik değerini doğru şekilde güncelleyemiyor demektir.
Okumaya devam edin: Web Tasarımı ve Geliştirme · Web Tasarımı