Modal ve modal olmayan pencereler için erişilebilirliğe odaklanan, küresel olarak kapsayıcı kullanıcı deneyimleri sağlayan kapsamlı bir diyalog yönetimi kılavuzu.
Diyalog Yönetimi: Modal ve Modal Olmayan Pencerelerde Erişilebilirliği Sağlama
Kullanıcı arayüzü (UI) tasarımında diyaloglar, kullanıcılarla etkileşim kurmada, bilgi sağlamada veya girdi istemede önemli bir rol oynar. Bu diyaloglar, her biri benzersiz erişilebilirlik hususları sunan modal veya modal olmayan pencereler olarak ortaya çıkabilir. Bu kılavuz, Web İçeriği Erişilebilirlik Yönergeleri (WCAG) gibi yerleşik standartlara bağlı kalarak ve Erişilebilir Zengin İnternet Uygulamaları (ARIA) özelliklerinin kullanımını sağlayarak, yeteneklerinden bağımsız olarak tüm kullanıcılar için erişilebilirlik sağlamaya odaklanarak diyalog yönetiminin karmaşıklıklarını inceler.
Modal ve Modal Olmayan Diyalogları Anlamak
Erişilebilirlik hususlarına dalmadan önce, modal ve modal olmayan diyaloglarla ne demek istediğimizi tanımlamak önemlidir:
- Modal Diyaloglar: Modal pencere olarak da bilinen modal bir diyalog, ana pencereyi devre dışı bırakan ancak modal pencereyi alt pencere olarak görünür tutan bir mod oluşturan bir UI öğesidir. Kullanıcılar modal diyalog ile etkileşim kurmalı ve genellikle ana uygulama penceresine dönmeden önce onu kapatmalıdır (örneğin, bir onay düğmesine veya "X" simgesine tıklayarak). Yaygın örnekler arasında uyarı kutuları, onay istemleri ve ayarlar panelleri bulunur.
- Modal Olmayan Diyaloglar: Aksine, modal olmayan bir diyalog, kullanıcıların hem diyalogla hem de ana uygulama penceresiyle aynı anda etkileşim kurmasına olanak tanır. Diyalog, uygulamanın diğer bölümlerine erişimi engellemeden açık kalır. Örnekler arasında grafik düzenleme yazılımındaki araç paletleri veya mesajlaşma uygulamalarındaki sohbet pencereleri bulunur.
Diyaloglar İçin Erişilebilirlik Hususları
Erişilebilirlik, UI tasarımında çok önemlidir. Diyalogların erişilebilir olmasını sağlamak, engelli olanlar da dahil olmak üzere tüm kullanıcıların bunları etkili bir şekilde kullanabileceği anlamına gelir. Bu, aşağıdakiler de dahil olmak üzere çeşitli hususları ele almayı içerir:
- Klavye Navigasyonu: Klavye navigasyonuna güvenen kullanıcılar, diyaloglara kolayca gidebilmeli, diyaloglar içinde hareket edebilmeli ve diyaloglardan çıkabilmelidir.
- Ekran Okuyucu Uyumluluğu: Ekran okuyucular, diyalogun amacını ve içeriğini ve içindeki herhangi bir etkileşimli öğeyi doğru bir şekilde duyurmalıdır.
- Odak Yönetimi: Uygun odak yönetimi, bir diyalog açıldığında, diyalog içinde hareket ettiğinde ve diyalog kapandığında klavye odağının uygun şekilde yerleştirilmesini sağlar ve diyalogu tetikleyen öğeye geri döner.
- Görsel Netlik: Diyaloglar, metin ve arka plan renkleri arasında yeterli kontrasta sahip olmalı ve görsel düzen net ve anlaşılması kolay olmalıdır.
- Dokunma Hedef Boyutu: Dokunmaya dayalı arayüzler için, diyaloglardaki etkileşimli öğelerin yeterli büyüklükte dokunma hedefleri olmalıdır.
- Bilişsel Erişilebilirlik: Diyaloglardaki dil ve içerik, bilişsel yükü en aza indirerek açık, öz ve anlaşılması kolay olmalıdır.
Diyalog Erişilebilirliği İçin ARIA Özellikleri
ARIA (Erişilebilir Zengin İnternet Uygulamaları) özellikleri, ekran okuyucular gibi yardımcı teknolojilere semantik bilgiler sağlayarak UI öğelerini daha doğru bir şekilde yorumlamalarını ve sunmalarını sağlar. Diyalog erişilebilirliği için temel ARIA özellikleri şunları içerir:
- `role="dialog"` veya `role="alertdialog"`: Bu özellik, öğeyi bir diyalog olarak tanımlar. `alertdialog`, önemli veya acil bilgileri ileten diyaloglar için kullanılmalıdır.
- `aria-labelledby="[Başlığın ID'si]"`: Bu özellik, diyaloğu amacını açıklayan bir başlık öğesiyle ilişkilendirir.
- `aria-describedby="[Açıklamanın ID'si]"`: Bu özellik, diyaloğu ek bağlam veya talimatlar sağlayan açıklayıcı bir öğeyle ilişkilendirir.
- `aria-modal="true"`: Bu özellik, diyalogun modal olduğunu ve diyalog dışındaki öğelerle etkileşimi önlediğini gösterir. Yardımcı teknolojilere modal davranışı iletmek için kritik öneme sahiptir.
- `tabindex="0"`: Diyalog içindeki bir öğeye `tabindex="0"` ayarlamak, klavye navigasyonu yoluyla odak almasına olanak tanır.
Modal Diyalog Erişilebilirliği: En İyi Uygulamalar
Modal diyaloglar, engelleyici doğaları nedeniyle benzersiz erişilebilirlik zorlukları sunar. Modal diyalog erişilebilirliği sağlamak için bazı en iyi uygulamalar şunlardır:
1. Uygun ARIA Özellikleri
Daha önce belirtildiği gibi, `role="dialog"` (veya acil mesajlar için `role="alertdialog"`), `aria-labelledby`, `aria-describedby` ve `aria-modal="true"` kullanmak, diyaloğu ve amacını yardımcı teknolojilere tanımlamak için çok önemlidir.
Örnek:
<div role="dialog" aria-labelledby="confirmation-heading" aria-modal="true">
<h2 id="confirmation-heading">Silmeyi Onayla</h2>
<p>Bu öğeyi silmek istediğinizden emin misiniz? Bu işlem geri alınamaz.</p>
<button>Onayla</button>
<button>İptal</button>
</div>
2. Odak Yönetimi
Modal bir diyalog açıldığında, klavye odağı hemen diyalogdaki ilk etkileşimli öğeye (örneğin, ilk düğme veya giriş alanı) taşınmalıdır. Diyalog kapandığında, odak diyaloğu tetikleyen öğeye geri dönmelidir.
Uygulama Hususları:
- JavaScript: Diyalog açıldığında ve kapandığında odağı uygun öğeye programlı olarak ayarlamak için JavaScript kullanın.
- Odak Kapanı: Klavye odağının açıkken diyalog içinde kalmasını sağlamak için odak kapanı uygulayın. Bu, kullanıcıların yanlışlıkla diyalogdan çıkmasını ve yerlerini kaybetmesini önler. Bu, genellikle sekme tuşu basmalarını dinlemek ve gerekirse odağı diyalogun başına veya sonuna geri döndürmek için JavaScript kullanılarak elde edilir.
Örnek (Kavramsal JavaScript):
function openModal(modalId) {
const modal = document.getElementById(modalId);
modal.style.display = "block";
const firstFocusableElement = modal.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
firstFocusableElement.focus();
}
function closeModal(modalId, triggeringElementId) {
const modal = document.getElementById(modalId);
modal.style.display = "none";
const triggeringElement = document.getElementById(triggeringElementId);
triggeringElement.focus();
}
3. Klavye Erişilebilirliği
Diyalog içindeki tüm etkileşimli öğelere klavye kullanılarak erişilebildiğinden ve etkinleştirilebildiğinden emin olun. Bu, düğmeleri, bağlantıları, form alanlarını ve herhangi bir özel kontrolü içerir.
Hususlar:
- Sekme Sırası: Sekme sırası mantıksal ve sezgisel olmalıdır. Genel olarak, sekme sırası diyalogun görsel düzenini izlemelidir.
- Klavye Kısayolları: Diyalog içindeki yaygın eylemler için klavye kısayolları sağlayın (örneğin, diyaloğu kapatmak için Escape tuşunu veya bir eylemi onaylamak için Enter tuşunu kullanmak).
4. Görsel Tasarım
Modal diyaloğun görsel tasarımı, ana uygulama penceresinden ayrı olduğunu açıkça belirtmelidir. Bu, zıt bir arka plan rengi, farklı bir kenarlık veya bir gölge efekti kullanılarak elde edilebilir. Okunabilirlik için metin ve arka plan arasında yeterli renk kontrastı sağlayın.
5. Semantik HTML
Mümkün olduğunca semantik HTML öğeleri kullanın. Örneğin, düğmeler için <button> öğelerini, form girişlerini etiketlemek için <label> öğelerini ve başlıklar için <h2> veya <h3> öğelerini kullanın.
6. Uluslararasılaştırma ve Yerelleştirme
Diyalogları tasarlarken ve uygularken farklı kültürel kökenlerden gelen kullanıcıların ihtiyaçlarını göz önünde bulundurun. Bu, diyalog içeriğinin yerelleştirilmiş sürümlerini sağlamayı ve diyalog düzeninin farklı metin yönlerine (örneğin, sağdan sola diller) uygun şekilde uyarlanmasını sağlamayı içerir.
Örnek: Bir kullanıcının hesabını silmesini isteyen bir onay diyaloğu, her hedef dil için doğru ve kültürel olarak uygun bir şekilde çevrilmelidir. Düzenin sağdan sola diller için de ayarlanması gerekebilir.
Modal Olmayan Diyalog Erişilebilirliği: En İyi Uygulamalar
Modal olmayan diyaloglar, modal diyaloglardan daha az rahatsız edici olsa da, erişilebilirliğe dikkatli bir şekilde odaklanmayı gerektirir. İşte bazı en iyi uygulamalar:
1. Net Görsel Ayrım
Kafa karışıklığını önlemek için modal olmayan diyaloğun ana uygulama penceresinden görsel olarak farklı olduğundan emin olun. Bu, bir kenarlık, bir arka plan rengi veya ince bir gölge kullanılarak elde edilebilir.
2. Odak Yönetimi
Modal olmayan diyaloglar ana pencereyle etkileşimi engellemese de, uygun odak yönetimi hala çok önemlidir. Diyalog açıldığında, odak diyalogdaki ilk etkileşimli öğeye taşınmalıdır. Kullanıcılar, klavye navigasyonunu kullanarak diyalog ve ana pencere arasında kolayca geçiş yapabilmelidir.
3. ARIA Özellikleri
Yardımcı teknolojilere diyalog hakkında semantik bilgi sağlamak için `role="dialog"`, `aria-labelledby` ve `aria-describedby` kullanın. Modal olmayan diyalogları modal olanlardan ayırt etmek için `aria-modal="false"` veya `aria-modal`'i atlamak önemlidir.
Örnek:
<div role="dialog" aria-labelledby="font-settings-heading">
<h2 id="font-settings-heading">Yazı Tipi Ayarları</h2>
<label for="font-size">Yazı Tipi Boyutu:</label>
<input type="number" id="font-size" value="12">
<button>Uygula</button>
</div>
4. Klavye Erişilebilirliği
Diyalog içindeki tüm etkileşimli öğelere klavye kullanılarak erişilebildiğinden ve etkinleştirilebildiğinden emin olun. Sekme sırası mantıksal ve sezgisel olmalı ve kullanıcıların diyalog ve ana pencere arasında kolayca gezinmesine olanak tanımalıdır.
5. Çakışmadan Kaçının
Modal olmayan diyalogları, ana uygulama penceresindeki önemli içeriği gizleyecek şekilde konumlandırmaktan kaçının. Diyalog, net ve erişilebilir bir konuma yerleştirilmelidir.
6. Farkındalık ve İletişim
Modal olmayan bir diyalog açıldığında, özellikle arka planda açılırsa ve hemen belirgin olmayabilirse, yeni bir diyalogun göründüğünü görsel olarak veya işitsel olarak (ARIA canlı bölgelerini kullanarak) kullanıcıya bildirmek yararlıdır.
Pratik Örnekler ve Kod Parçacıkları
Bu kavramları göstermek için bazı pratik örnekleri ve kod parçacıklarını inceleyelim.
Örnek 1: Modal Onay Diyaloğu
<button id="delete-button" onclick="openModal('delete-confirmation-modal', 'delete-button')">Öğeyi Sil</button>
<div id="delete-confirmation-modal" role="dialog" aria-labelledby="delete-heading" aria-modal="true" style="display:none;">
<h2 id="delete-heading">Silmeyi Onayla</h2>
<p>Bu öğeyi silmek istediğinizden emin misiniz? Bu işlem geri alınamaz.</p>
<button onclick="//Öğeyi silme mantığı; closeModal('delete-confirmation-modal', 'delete-button')">Onayla</button>
<button onclick="closeModal('delete-confirmation-modal', 'delete-button')">İptal</button>
</div>
Örnek 2: Modal Olmayan Yazı Tipi Ayarları Diyaloğu
<button id="font-settings-button" onclick="openModal('font-settings-dialog', 'font-settings-button')">Yazı Tipi Ayarları</button>
<div id="font-settings-dialog" role="dialog" aria-labelledby="font-settings-heading" style="display:none;">
<h2 id="font-settings-heading">Yazı Tipi Ayarları</h2>
<label for="font-size">Yazı Tipi Boyutu:</label>
<input type="number" id="font-size" value="12"><br>
<label for="font-family">Yazı Tipi Ailesi:</label>
<select id="font-family">
<option value="Arial">Arial</option>
<option value="Verdana">Verdana</option>
<option value="Times New Roman">Times New Roman</option>
</select><br>
<button onclick="//Yazı tipi ayarları mantığını uygula">Uygula</button>
</div>
Test Etme ve Doğrulama
Diyalogların erişilebilirliğini sağlamak için kapsamlı testler çok önemlidir. Bu şunları içerir:
- Manuel Test: Diyaloglarda gezinmek ve etkileşim kurmak için bir klavye ve ekran okuyucu kullanın.
- Otomatik Test: Olası erişilebilirlik sorunlarını belirlemek için erişilebilirlik test araçları kullanın. Axe DevTools, WAVE ve Lighthouse gibi araçlar, erişilebilirlik kontrollerini otomatikleştirmeye yardımcı olabilir.
- Kullanıcı Testi: Diyalogların kullanılabilirliği ve erişilebilirliği hakkında geri bildirim toplamak için engelli bireylerle kullanıcı testi yapın.
WCAG Uyumluluğu
Erişilebilir diyaloglar oluşturmak için Web İçeriği Erişilebilirlik Yönergelerine (WCAG) uymak çok önemlidir. İlgili WCAG başarı kriterleri şunlardır:
- 1.1.1 Metin Olmayan İçerik: Metin olmayan içerik için metin alternatifleri sağlayın (örneğin, resimler, simgeler).
- 1.3.1 Bilgi ve İlişkiler: Bilgi ve ilişkilerin işaretleme veya veri özellikleri aracılığıyla iletilmesini sağlayın.
- 1.4.3 Kontrast (Minimum): Metin ve arka plan renkleri arasında yeterli kontrast sağlayın.
- 2.1.1 Klavye: Tüm işlevleri bir klavyeden kullanılabilir hale getirin.
- 2.4.3 Odak Sırası: Odak sırasının mantıksal ve sezgisel olmasını sağlayın.
- 2.4.7 Odak Görünür: Odak göstergesinin her zaman görünür olduğundan emin olun.
- 3.2.1 Odakta: Bileşenlerin beklenmedik bir şekilde odak almadığından emin olun.
- 4.1.2 Ad, Rol, Değer: Tüm UI bileşenlerinin adının, rolünün ve değerinin yardımcı teknolojiler tarafından programlı olarak belirlenebilmesini sağlayın.
Küresel Hususlar
Küresel bir kitle için diyaloglar tasarlarken şunları göz önünde bulundurun:
- Yerelleştirme: Tüm metin içeriğini uygun dillere çevirin.
- Uluslararasılaştırma: Diyalog düzeninin farklı metin yönlerine ve kültürel kurallara uygun şekilde uyarlanmasını sağlayın. Tarih ve saat biçimleri, para birimi sembolleri ve adres biçimleri kültürler arasında önemli ölçüde farklılık gösterir.
- Kültürel Hassasiyet: Belirli kültürlerde saldırgan veya uygunsuz olabilecek resimler veya semboller kullanmaktan kaçının.
Örnek: Japonya'da kullanılan bir diyalog, Amerika Birleşik Devletleri'nde kullanılan bir diyalogdan farklı olarak dikey metin düzenlemelerine ve farklı tarih biçimlerine uyum sağlaması gerekebilir.
Sonuç
Modal ve modal olmayan erişilebilir diyaloglar oluşturmak, kapsayıcı UI tasarımının önemli bir yönüdür. Bu kılavuzda özetlenen en iyi uygulamaları izleyerek, WCAG yönergelerine uyarak ve ARIA özelliklerini etkili bir şekilde kullanarak, geliştiriciler, yeteneklerinden bağımsız olarak tüm kullanıcıların diyaloglarla sorunsuz ve etkili bir şekilde etkileşim kurabilmelerini sağlayabilir. Erişilebilirliğin sadece uyumlulukla ilgili olmadığını unutmayın; herkes için daha kapsayıcı ve adil bir kullanıcı deneyimi yaratmakla ilgilidir. Engelli kullanıcılardan sürekli olarak test yapmak ve geri bildirim toplamak, erişilebilirlik sorunlarını belirlemek ve ele almak ve genel kullanıcı deneyimini iyileştirmek için çok önemlidir. Erişilebilirliğe öncelik vererek, yalnızca işlevsel ve görsel olarak çekici değil, aynı zamanda dünya çapındaki tüm kullanıcılar için kullanılabilir ve keyifli olan diyaloglar oluşturabilirsiniz.