Ana içeriğe geç

3.3.1 Hata Tanımlama

Girdi hataları algılandığında, hatalı alanlar kullanıcıya açık ve net bir şekilde belirtilmelidir.

SC Kodu: 3.3.1 Seviye: A
URL: https://www.w3.org/TR/WCAG22/#error-identification

Genel Tanım​

WCAG SC 3.3.1, bir giriş hatası otomatik olarak algılandığında, hatanın bulunduğu öğenin belirlenmesini ve hatanın kullanıcıya metin olarak açıklanmasını gerektirir. Bu, kullanıcıların hataları etkili bir şekilde anlamalarına ve düzeltmelerine yardımcı olur.

Faydalar​

  • Geliştirilmiş Kullanıcı Deneyimi: Açık ve anlaşılır hata mesajları, kullanıcıların hataları hızlı bir şekilde tespit edip düzeltmelerine yardımcı olarak genel deneyimlerini iyileştirir.
  • Erişilebilirlik: Engelli kullanıcıların, özellikle yardımcı teknolojileri kullananların, giriş hatalarını etkili bir şekilde anlayabilmelerini ve çözebilmelerini sağlar.
  • Azaltılmış Hayal Kırıklığı: Belirli hata mesajları, sorunların nasıl çözüleceğine dair net bir yol göstererek kullanıcıların hayal kırıklığını önler.

Ana Amaç​

Kullanıcıların hataları etkili bir şekilde tespit edip düzeltebilmelerini sağlamak için, giriş hatası tespit edildiğinde net hata mesajları veya alternatifler sunun. Hataları belirtmek için renk veya simge kullanmak kabul edilebilir, ancak metin tabanlı hata mesajları zorunludur.

Kullanıcılar, bir web sitesinde form gönderme gibi görevleri tamamlarken, yanlışlıkla geçersiz bir e-posta adresi veya sayısal bir alana metin girmek gibi hatalı veriler girebilirler.

Hata mesajlarının iletilme yöntemi, kullanıcı tercihlerini dikkate almalı ve görme engelliler veya ekran okuyucu gibi yardımcı teknolojiler kullananlar da dahil olmak üzere tüm kullanıcılar için erişilebilirliği sağlamalıdır.

Yazarlar, form gönderiminden önce veya kullanıcı giriş alanını terk ettikten hemen sonra hataları tespit etmek için istemci tarafı komut dosyası veya sunucu tarafı kod kullanabilirler.

Hata mesajlarının yerleşimi, giriş alanının yanında satır içi olarak, bir iletişim kutusunda, uyarı mesajı olarak, formun başında veya formun sonunda olmak üzere değişebilir. Bu başarı kriteri belirli bir görüntüleme yöntemini zorunlu kılmaz, ancak hataların kullanıcılara metin veya metin alternatifi olarak iletilmesini gerektirir.

Hata mesajlarının yerleştirilmesi, mesajların görüntülenme yöntemine bağlı olarak role="alert", role="alertdialog", aria-live, aria-atomic ve aria-describedby gibi ARIA özniteliklerinin dahil edilmesiyle, görme engelli kullanıcılar için erişilebilirliği sağlamalıdır.

Örneğin, bir hata mesajı için role="alertdialog" kullanıldığında, odak hemen iletişim kutusundaki ilk etkileşimli öğeye kaydırılmalı ve kullanıcı iletişim kutusundan çıkana kadar orada kalmalıdır. İletişim kutusu kapatıldığında, odak belgedeki en son odaklanılan öğeye geri dönmelidir.

En İyi Uygulamalar​

  • Metin Tabanlı Hatalar: Tüm hata mesajlarının metin olarak verildiğinden emin olun. Hatalar yalnızca renk veya simgelerle belirtiliyorsa, bunlara da metin eşlik etmelidir.
  • ARIA Niteliklerinin Kullanımı: Hata mesajının görüntülenme yöntemine bağlı olarak gerekli ARIA Niteliklerini kullanın. Mesajların görme engelli kullanıcılar tarafından anında algılanmasını ve anlaşılmasını sağlamak için role="alert", aria-live="assertive" ve aria-atomic kullanın. Mesajın görüntülenme yöntemi bir diyalog penceresi ise, diyalog mesajının aciliyetini vurgulamak ve doğru etkileşimi sağlamak için role="alertdialog" ve aria-modal="true" kullanın.
  • Formlarda Hata Mesajlarının En Uygun Yerleşimi ve İlişkisi: Formun üstünde, öncesinde veya altında konumlandırılan hata mesajları, ilgili giriş alanlarıyla doğrudan ilişkili olmalıdır. Her hata mesajını (örneğin, <a href="#email-address"> E-posta adresi gereklidir </a>) geçersiz giriş alanına yönlendiren bağlantı etiketleriyle sarmalamayı düşünün. Hata mesajı ile alan arasında bir ilişki kurmak için aria-describedby kullanın.
  • Odak Yönlendirmesi: Geçersiz form gönderiminden sonra, odağın ya ilk geçersiz alana ya da hata mesajları bloğuna kaydırıldığından emin olun. Ekran okuyucu kullanıcılarının hatalar konusunda uyarıldığından emin olun.

Örnekler ve Açıklamalar​

Örnek: Örnek Uygulama​

Bir web sayfası, kullanıcılar tarafından etkinleştirilebilen ve etkileşimde bulunulabilen görsel bir bağlantı içerir.

Nelerden Kaçınılmalı?

Web uygulamasına erişim için bir giriş formu mevcuttur. Kullanıcı formu boş veya yanlış giriş değerleriyle gönderirse, ilgili alan kırmızı bir çerçeveyle vurgulanacaktır.

HTML/CSS

<!DOCTYPE html >
<html lang = "en" >
  <head>
    <meta charset = "UTF-8" >
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
    <title> Yanlış Form Doğrulama Uygulaması </title>
    
    <style> 
    .invalid { 
      border : 1px solid red ; 
    }
    </style>​​
  </head>​​
  <body>​​
    <form name = "signup" id = "signup" >
      <div>
        <label for = "username" > Kullanıcı adı (zorunlu) </label> <br>
        <input type = "text" name = "username" id = "username" >
      </div>
      <div >
        <label for = " password" > Şifre (gerekli) </label> <br>
        <input type = "password" name = "password" id = "password" >
      </div>
      <div >
        <label for = " confirmPassword" >Şifreyi Onayla ( gerekli) </label> <br>
        <input type = "password" name = "confirmPassword" id = "confirmPassword" >
      </div>
      <div >
        <input type = "submit" name = "button" id = "button" value = "Gönder" >
      </div>
    </form>​​
     
    <script>
            document.addEventListener('DOMContentLoaded', function() {
                var form = document.getElementById('signup');
                form.addEventListener('submit', function(event) {
                      event.preventDefault(); // Form gönderimini engelle
              
                      // Mevcut hata stillerini kaldırın
                      var invalidFields = document.querySelectorAll('.invalid');
                      invalidFields.forEach(function(field) {
                        field.classList.remove('invalid');
                      });
              
                      // Her bir giriş alanının geçerliliğini kontrol edin.
                      var username = document.getElementById('username').value.trim();
                      var password = document.getElementById('password').value.trim();
                      var confirmPassword = document.getElementById('confirmPassword').value.trim();
                      var isValid = true;
              
                      if (username === '') {
                        document.getElementById('username').classList.add('invalid');
                        isValid = false;
                      }
                      if (password === '') {
                        document.getElementById('password').classList.add('invalid');
                        isValid = false;
                      }
                      if (confirmPassword === '') {
                        document.getElementById('confirmPassword').classList.add('invalid');
                        isValid = false;
                      }
                      if (password !== confirmPassword) {
                        document.getElementById('password').classList.add('invalid');
                        document.getElementById('confirmPassword').classList.add('invalid');
                        isValid = false;
                      }
              
                      // İsteğe bağlı olarak, buraya daha fazla doğrulama mantığı ekleyebilirsiniz.
              
                      // Hatalar varsa, form gönderimini engelleyin.
                      if (!isValid) {
                        return false;
                      }
              
                      // Herhangi bir hata yoksa, formu isteğe bağlı olarak gönderebilirsiniz.
                      // form.submit(); // Formu göndermek için bu satırın yorum satırını kaldırın.
            });
        });
    </script>

</body>​​

</html>​​

Açıklama: Bu yaklaşım, kullanıcıların hataları belirlemesi ve düzeltmesi için doğrudan ve erişilebilir bir yöntemden yoksundur. Hataları belirtmek için yalnızca renge güvenmek, görsel ipuçlarını algılayamayan kullanıcıların formun geri bildirimini anlamakta zorlanmasına neden olur. Bu yaklaşım, yardımcı teknolojilere güvenenler de dahil olmak üzere tüm kullanıcılara hataları iletmek için alternatif yöntemler sağlamadığından, hata belirleme için 3.3.1 başarı kriterini karşılamamaktadır.

Ne Yapılmalı?

Bir web uygulamasına erişmek için bir giriş formu mevcuttur. Kullanıcı formu boş veya yanlış giriş değerleriyle gönderirse, formun üst kısmında bir metin mesajı görünecektir. Bu mesaj, yardımcı teknolojilere güvenen kullanıcıların da hata mesajlarını algılayabilmesini sağlamak için ARIA özniteliklerini içerecektir.

HTML/CSS

<!DOCTYPE html >
<html lang = "en" >
  <head>
    <meta charset = "UTF-8" >
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
    <title> Belge </title>​​
  </head>​​
  <body>​​
    <form name = "signup" id = "signup" >
      <div id = "errors" role = "alert" aria-atomic = " true" > </div>
      <div >
        <label for = "username" > Kullanıcı adı (zorunlu) </label> <br>
        <input type = "text" name = "username" id = "username" aria-describedby = "username-error" >
      </div>
      <div >
        <label for = " password" > Şifre (gerekli) </label> <br>
        <input type = "password" name = "password" id = "password" aria-describedby = "password-error" >
      </div>
      <div >
        <label for = " confirmPassword" >Şifreyi Onayla ( gerekli) </label> <br>
        <input type = "password" name = "confirmPassword" id = "confirmPassword" aria-describedby = "confirmPassword-error" >
      </div>
      <div >
        <input type = "submit" name = "button" id = "button" value = "Gönder" >
      </div>
    </form>​​

    <script>
            document.addEventListener('DOMContentLoaded', function() {
                    var form = document.getElementById('signup');
                    form.addEventListener('submit', function(event) {
                      event.preventDefault(); // Form gönderimini engelle
              
                      var errorsElement = document.getElementById('errors');
                      errorsElement.innerHTML = ''; // Önceki hata mesajlarını temizle
              
                      // Her bir giriş alanının geçerliliğini kontrol edin.
                      var username = document.getElementById('username').value.trim();
                      var password = document.getElementById('password').value.trim();
                      var confirmPassword = document.getElementById('confirmPassword').value.trim();
              
                      var firstInvalidField = null; // İlk geçersiz alanı takip edin
                     
                      if (username === '') {
                        errorsElement.innerHTML += '<p id="username-error">Please enter a username.</p>';
                        if (!firstInvalidField) {
                          firstInvalidField = document.getElementById('username');
                        }
                      }
                      if (password === '') {
                        errorsElement.innerHTML += '<p id="password-error">Please enter a password.</p>';
                        if (!firstInvalidField) {
                          firstInvalidField = document.getElementById('password');
                        }
                      }
                      if (confirmPassword === '') {
                        errorsElement.innerHTML += '<p id="confirmPassword-error">Please confirm your password.</p>';
                        if (!firstInvalidField) {
                          firstInvalidField = document.getElementById('confirmPassword');
                        }
                      }
                      if (password !== confirmPassword) {
                        errorsElement.innerHTML += '<p id="confirmPassword-error">Passwords do not match.</p>';
                        if (!firstInvalidField) {
                          firstInvalidField = document.getElementById('password');
                        }
                      }
              
                      // İsteğe bağlı olarak, buraya daha fazla doğrulama mantığı ekleyebilirsiniz.
              
                      // Hatalar varsa, form gönderimini engelleyin ve ilk geçersiz alana odaklanın.
                      if (errorsElement.innerHTML !== '' && firstInvalidField) {
                        firstInvalidField.focus();
                        return false;
                      }
              
                      // Herhangi bir hata yoksa, formu isteğe bağlı olarak gönderebilirsiniz.
                      // form.submit(); // Formu göndermek için bu satırın yorum satırını kaldırın.
                    });
            });
    </script>
</body>​​
</html>​​

Açıklama: Metin tabanlı hata mesajları sağlayarak, kullanıcılar kendileri çıkarım yapmaya gerek kalmadan hangi belirli sorunların geçersiz olduğunu açıkça anlayabilirler. Bu hata mesajları, kaynak kodunda önceden tanımlanmış boş bir HTML paragrafına dinamik olarak eklenir. Her hata mesajı, kullanıcı geçersiz bir girişe odaklandığında hata mesajı ile ilgili giriş alanı arasında ilişki kurmak için aria öznitelikleri (aria-describedby) içerir. Ek olarak, JavaScript kodu, odağın en geçersiz giriş alanına kaymasını sağlayarak kullanılabilirliği artırır. Hata mesajlarını içeren paragraflar ayrıca role="alert" ve aria-atomic="true" özniteliklerine de sahiptir. Bu öznitelikler, sayfa yeniden yönlendirildiğinde veya güncellendiğinde hata mesajlarının duyurulmasını sağlayarak, yardımcı teknolojilere güvenen kullanıcılar tarafından anında algılanabilir hale getirir. Bu örnekte renkler kullanılmamış olsa da, metinsel bir mesaj eşlik ettiği sürece renk kullanımının teşvik edildiğini ve tüm kullanıcılar için erişilebilirliğin sağlandığını belirtmek önemlidir.