WCAG 3.3.5: Yardım

Bu Kuralın Anlamı

\n

WCAG Başarı Ölçütü 3.3.5 Help (Seviye AAA) şöyle der: “Bağlama duyarlı yardım mevcuttur.” Bu, bir web sayfası veya uygulama kullanıcılardan bilgi girmelerini istediği her yerde, ne beklendiğini netleştirmek için uygun yardım sağlanması gerektiği anlamına gelir. Yardım bağlamsal olmalıdır — yani, kullanıcının o anda etkileşimde bulunduğu alan, görev veya süreçle doğrudan ilişkili olmalı, gezinme içinde bir yerde gömülü genel bir yardım sayfası olmamalıdır.

\n

Bu ölçüt, girdi gerektiren her türlü kullanıcı arayüzü bileşeni için geçerlidir: metin alanları, açılır menüler, tarih seçiciler, dosya yükleme kontrolleri, onay kutuları, radyo düğmeleri ve çok adımlı formlar. Bağlama duyarlı yardım; satır içi talimatlar, açıklayıcı etiketler, yer tutucu yönlendirmeleri, araç ipuçları (tooltips), açıklamaları açan yardım simgeleri, ilgili yardım makalelerine bağlantılar veya hatta canlı sohbet desteği gibi birçok biçim alabilir — yeter ki yardım, yardıma ihtiyaç duyan girdinin yakınında erişilebilir olsun.

\n

Her bir kullanıcıyı kafa karışıklığına sürükleyebilecek girdi için aşağıdakilerden en az biri mevcut olduğunda bir başarı elde edilir: beklenen girdiyi tam olarak açıklayan açıkça yazılmış bir etiket; alanın hemen yanında yer alan ek açıklayıcı metin (yalnızca yazarken kaybolan bir yer tutucu değil); daha fazla açıklama sağlayan görünür bir yardım bağlantısı veya açılabilir araç ipucu; ya da mevcut bağlama özgü rehberlik sunan, kolayca erişilebilir bir yardım mekanizması (örneğin soru işareti simgesi). Yardımın tüm alanlarda aynı olması gerekmez — temel gereklilik, kullanıcının ne girmesi gerektiği konusunda tereddüt yaşayabileceği her yerde, yardımın gerçekten mevcut ve erişilebilir olmasıdır.

\n

Bir başarısızlık, alanlar ne beklendiğine dair hiçbir açıklama sunmadığında, yardım yalnızca gönderimden sonra ve bir hata oluştuğunda mevcut olduğunda, araç ipuçları veya yardım metni klavye ya da ekran okuyucu kullanıcıları için erişilebilir olmadığında veya yardım bağlantıları belirli girdiye ilişkin içerik yerine genel bir SSS sayfasına yönlendirdiğinde ortaya çıkar. Özellikle, yalnızca sonradan gösterilen hata mesajlarına güvenmek bu ölçütü karşılamaz — yardım, yalnızca bir hata yapıldıktan sonra değil, girdi öncesinde veya sırasında mevcut olmalıdır.

\n

WCAG 3.3.5 tek ve katı bir uygulama yöntemi tanımlamaz. Bağlama duyarlı yardımın birçok geçerli yolla uygulanabileceğini kabul eder ve geliştiricilere esneklik tanır, ancak niyet nettir: kullanıcılar bir form alanının ne beklediği konusunda asla tahmin yürütmek zorunda kalmamalıdır. Bu ölçüt için resmi bir istisna yoktur — kullanıcı girdisinin istendiği her yerde evrensel olarak geçerlidir.

\n\n

Neden Önemlidir

\n

Formlar, herhangi bir dijital arayüzün en zorlu bölümleri arasındadır. Bilişsel engelleri olan kullanıcılar — disleksi, dikkat eksikliği bozuklukları, zihinsel engeller veya hafıza bozuklukları dahil — için belirsiz form alanları aşılması imkânsız bir engel olabilir. Açık ve bağlamsal yardım olmadan bu kullanıcılar görevleri tekrar tekrar tamamlayamayabilir, ciddi hayal kırıklığı yaşayabilir veya süreci tamamen yarıda bırakabilir. Dünya Sağlık Örgütü’ne göre, dünya genelinde yaklaşık her 6 kişiden 1’i önemli bir engellilik biçimiyle yaşamaktadır ve bilişsel bozukluklar bu nüfusun önemli bir bölümünü temsil etmektedir.

\n

Dijital okuryazarlığı düşük olan veya web arayüzleriyle sınırlı deneyime sahip kullanıcılar da bağlama duyarlı yardımdan büyük ölçüde fayda görür. Bir kamu e-hizmet portalını ilk kez kullanan bir kişi, çevrimiçi sağlık yardımı başvurusu yapan yaşlı bir kişi veya vergi formu dolduran küçük işletme sahibi; vergi kimlik numarası için hangi formatın beklendiğini, belge yüklemeleri için hangi dosya türlerinin kabul edildiğini veya benzer isimli iki alan arasındaki farkın ne olduğunu bilmeyebilir. Bağlam içi rehberlik olmadan bu kullanıcılar hatalara ve neyi yanlış yaptıklarını bilememenin yarattığı kaygıya açık hale gelir.

\n

Somut bir senaryo düşünün: bilişsel engeli olan bir kullanıcı, bir belediye ulaşım idaresinin web portalı üzerinden sübvanse edilmiş bir seyahat kartına başvuruyor. Form, hiçbir açıklama olmadan “Referans Numarası” istiyor. Kullanıcının elinde ulusal kimliği, ulaşım kartı ve önceki bir başvuru onayı gibi birden fazla belge var ve her birinde farklı sayısal tanımlayıcılar bulunuyor. Hangi belge veya formatın beklendiğini belirten bağlama duyarlı yardım olmadan, kullanıcı muhtemelen yanlış numarayı girecek, bir doğrulama hatası tetikleyecek ve muhtemelen vazgeçecektir. Oysa basit bir yardım simgesi veya satır içi açıklama — “Ulaşım kartınızın sağ üst köşesinde yer alan 10 haneli numarayı girin” — ilk denemede başarılı bir etkileşim sağlayabilirdi.

\n

Kör veya az gören kullanıcılar için de bağlama duyarlı yardım önemlidir. Ekran okuyucular, ilişkili yardım metnini, aria-describedby açıklamalarını veya bağlantılı yardım içeriğini — yalnızca bunlar doğru şekilde uygulanmışsa — okuyabilir. Yardım yalnızca görsel olarak (renk göstergesi veya erişilebilir metni olmayan bir simge olarak) iletildiğinde, ekran okuyucu kullanıcıları dışlanır. Yardımın hem mevcut hem de erişilebilir olmasını sağlamak, engel grupları arasında kapsayıcılığı güçlendirir.

\n

Erişilebilirliğin ötesinde, bağlama duyarlı yardım genel kullanılabilirliği ve dönüşüm oranlarını artırır. Açık form rehberliğine sahip web siteleri daha düşük terk oranları, daha az destek talebi ve daha yüksek form tamamlama oranları yaşar. Özellikle e-ticaret siteleri için, ödeme tamamlama oranındaki her yüzde puanlık iyileşme doğrudan gelir etkisi yaratır. Arama motorları da net, yapılandırılmış içeriğe sahip sayfaları ödüllendirir ve iyi etiketlenmiş, iyi açıklanmış formlar sayfa kalite sinyallerine olumlu katkıda bulunur.

\n\n

İlgili Axe-core Kuralları

\n

WCAG 3.3.5, uyumluluğun yardım içeriğinin kalitesine, alaka düzeyine ve bağlamsal uygunluğuna bağlı olması nedeniyle manuel test gerektirir — bunlar otomatik araçların değerlendiremeyeceği faktörlerdir. Otomatik bir tarayıcı, bir etiketin var olduğunu veya bir aria-describedby özniteliğinin gerçek bir öğeye işaret ettiğini doğrulayabilir, ancak bu etiketin veya açıklamanın içeriğinin belirli bir girdi için gerçekten faydalı, doğru veya yeterli olup olmadığını belirleyemez.

\n

\n
• Manuel İnceleme — Bağlama Duyarlı Yardımın Varlığı: Otomatik araçlar, yardım metninin gerçekten kullanıcının belirli bir alanla ilgili muhtemel sorularını ele alıp almadığını değerlendiremez. Bir araç, bir <label> öğesinin varlığını tespit edebilir, ancak “Numaranızı girin” ifadesinin, belirli bir formatta KDV kayıt numarası bekleyen bir alan için yeterince açıklayıcı olup olmadığını yargılayamaz. Manuel test uzmanları, kafa karışıklığına yol açabilecek her girdi için, bu kafa karışıklığını anlamlı şekilde azaltan bir rehberlik eşlik edip etmediğini değerlendirmelidir.
\n
• Manuel İnceleme — Yardımın Erişilebilirliği: Yardım görsel olarak mevcut olsa bile, otomatik araçlar bu yardımın yardımcı teknolojilere erişilemediği durumları her zaman işaretlemeyebilir. Örneğin, yalnızca fareyle üzerine gelindiğinde tetiklenen, klavye ile erişilebilir eşdeğeri olmayan bir araç ipucu, birçok otomatik kontrolden geçer ancak gerçek kullanıcılar için başarısız olur. Test uzmanları, tüm yardım mekanizmalarının — araç ipuçları, genişletilebilir bölümler, yardım bağlantıları — klavye ile erişilebilir ve çalıştırılabilir olduğunu ve ekran okuyucular tarafından doğru şekilde duyurulduğunu doğrulamalıdır.
\n
• Manuel İnceleme — Yardımın Konumu ve Yakınlığı: Otomatik taramalar, yardım metninin ilgili alana anlamlı şekilde ilişkilendirilebilecek kadar yakın yerleştirilip yerleştirilmediğini değerlendiremez. Sayfanın en altında yer alan bir yardım paragrafı veya erişmek için birden fazla etkileşim gerektiren bir modal içindeki yardım, teknik olarak mevcut olabilir ancak bağlama duyarlı yardımın ruhuna aykırıdır. Manuel inceleme, yardımın ihtiyaç anında mevcut olduğunu doğrulamalıdır.
\n
• Manuel İnceleme — Form Karmaşıklığı Boyunca Tamlık: Karmaşık, çok adımlı formlar ek zorluklar getirir. Otomatik araçlar, bireysel alanları yalıtılmış şekilde kontrol eder ancak çok adımlı bir sihirbaz boyunca sağlanan toplam yardımın, kullanıcıyı karmaşık bir süreçte yönlendirmek için yeterli olup olmadığını değerlendiremez. Formu bir bütün olarak deneyimlerken ortaya çıkan rehberlik boşluklarını belirlemek için manuel senaryo yürütmeleri gereklidir.
\n

\n\n

Nasıl Test Edilir

\n

\n
1. Temel olarak otomatik bir erişilebilirlik taraması çalıştırın. Formu içeren sayfada axe DevTools’u (tarayıcı uzantısı veya CLI), Chrome DevTools içindeki Lighthouse’u veya IBM Equal Access Checker’ı kullanın. Bu araçlar doğrudan 3.3.5 ihlallerini işaretlemese de, eksik etiketler (label öğesinin bir girdiye iliştirilmemesi), eksik aria-describedby hedefleri veya erişilemeyen araç ipucu uygulamaları gibi ilgili sorunları ortaya çıkaracaktır. Önce bu temel sorunları çözmek, bağlama duyarlı yardım eklendiğinde teknik olarak da erişilebilir olmasını sağlar.
\n
2. Her form alanını yardım mevcudiyeti açısından manuel olarak denetleyin. Her girdi alanı için şunları sorun: (a) Etiket tek başına, format gereksinimleri dahil olmak üzere hangi girdinin gerektiğini tam olarak açıklıyor mu? (b) Alanın yanında görünür ek yardım metni var mı? (c) Daha fazla rehberlik sağlayan bir yardım simgesi, araç ipucu veya genişletilebilir bölüm var mı? (d) İlgili yardım içeriğine bir bağlantı var mı? Tüm bu sorulara yanıt hayır ise ve alan herhangi bir belirsizlik içeriyorsa, bu 3.3.5’in bir ihlalidir.
\n
3. Tüm yardım mekanizmalarının klavye erişilebilirliğini test edin. Formda yalnızca klavye kullanarak (fare olmadan) sekme ile ilerleyin. Her araç ipucunun, yardım simgesinin, genişletilebilir açıklamanın veya yardım bağlantısının klavye ile erişilebilir ve etkinleştirilebilir olduğunu doğrulayın. Araç ipuçları, yalnızca fareyle üzerine gelindiğinde değil, odak alındığında da görünmelidir. Yardım düğmeleri Enter veya Space ile tetiklenebilmelidir. Yalnızca fareyle erişilebilen herhangi bir yardım mekanizması bu testi geçemez.
\n
4. NVDA + Firefox ile test edin. Sekme tuşuyla her form alanına gidin. NVDA’nın her alan için ne duyurduğunu dinleyin — etiketi duyuruyor mu? İlişkili açıklamayı (aria-describedby aracılığıyla) duyuruyor mu? Herhangi bir yardım simgesini veya araç ipucunu etkinleştirin ve içeriğinin duyurulduğunu doğrulayın. Bağlantılı yardım içeriğine ulaşmaya çalışın ve bunun mevcut alanla ilişkili olduğunu doğrulayın.
\n
5. VoiceOver + Safari (macOS veya iOS) ile test edin. VoiceOver kullanarak formda gezinin. macOS’te alanlar arasında geçiş yapmak için Sekme tuşunu kullanın ve her alan için tam duyuruyu dinleyin. iOS’ta kaydırma hareketiyle gezin. Girdilerle ilişkili tüm yardım içeriğinin sesli olarak okunduğunu ve yardım tetikleyicilerinin (düğmeler, bağlantılar) VoiceOver tarafından erişilebilir ve doğru şekilde etiketlenmiş olduğunu doğrulayın.
\n
6. JAWS + Chrome ile test edin. JAWS form modunu kullanın (bir form öğesindeyken Enter ile etkinleştirin). Alanlar arasında Sekme ile geçiş yapın ve JAWS’ın ilişkili talimatları ve açıklamaları okuduğunu doğrulayın. Standart etiket ilişkilerinin dışında yerleştirilmiş yardım içeriğinin de erişilebilir olduğundan emin olmak için JAWS sanal imlecini kullanın.
\n
7. Bilişsel bir senaryo yürütmesi gerçekleştirin. Formu bilmeyen bir kişiden (veya bir süre ara verdikten sonra formu kendiniz yeniden inceleyerek bunu simüle edin) herhangi bir dış rehberlik olmadan formu tamamlamasını isteyin. Beklentilerin belirsizliği nedeniyle tereddüt ettikleri, soru sordukları veya hata yaptıkları her noktayı not edin. Bu noktaların her biri, 3.3.5 kapsamında iyileştirilmiş bağlama duyarlı yardım için adaydır.
\n

\n\n

Nasıl Düzeltilir

\n

Açıklaması Olmayan Belirsiz Metin Alanı — Hatalı

\n

<!-- No help provided for an ambiguous field expecting a specific format -->\n<label for='tc-kimlik'>TC Kimlik No</label>\n<input type='text' id='tc-kimlik' name='tc-kimlik'>

\n

Satır İçi Yardımlı Belirsiz Metin Alanı — Doğru

\n

<!-- Inline description associated via aria-describedby gives format guidance before the user types -->\n<label for='tc-kimlik'>TC Kimlik No</label>\n<input\n  type='text'\n  id='tc-kimlik'\n  name='tc-kimlik'\n  aria-describedby='tc-kimlik-help'\n  autocomplete='off'\n  maxlength='11'\n>\n<p id='tc-kimlik-help'>\n  Nüfus cüzdanınızda yer alan 11 haneli TC Kimlik Numaranızı giriniz.\n  (Enter your 11-digit Turkish National ID number as shown on your ID card.)\n</p>

\n\n

Klavye Kullanıcıları İçin Erişilemeyen Yardım Simgesi Araç İpucu — Hatalı

\n

<!-- Tooltip only shown on mouseover; keyboard users and screen reader users cannot access it -->\n<label for='iban'>IBAN <span class='help-icon' title='What is IBAN?'>?</span></label>\n<input type='text' id='iban' name='iban'>

\n

Tüm Kullanıcılar İçin Erişilebilir Yardım Simgesi Araç İpucu — Doğru

\n

<!-- Button with aria-expanded controls a help panel; accessible via keyboard and screen readers -->\n<label for='iban'>IBAN</label>\n<button\n  type='button'\n  aria-expanded='false'\n  aria-controls='iban-help'\n  class='help-toggle'\n  aria-label='Help: What is an IBAN?'\n>\n  ?\n</button>\n<input type='text' id='iban' name='iban' aria-describedby='iban-help'>\n<div id='iban-help' hidden>\n  <p>\n    IBAN (International Bank Account Number) is a 26-character code starting\n    with "TR" used to identify your Turkish bank account. You can find it\n    in your bank's mobile app under Account Details.\n  </p>\n</div>\n<!-- JavaScript toggles aria-expanded and the hidden attribute on button click/keypress -->

\n\n

Adım Düzeyinde Rehberlik Olmayan Karmaşık Çok Adımlı Form — Hatalı

\n

<!-- Step 2 of a 4-step application with no explanation of what documents are needed -->\n<h2>Step 2: Upload Documents</h2>\n<label for='doc-upload'>Upload File</label>\n<input type='file' id='doc-upload' name='doc-upload'>

\n

Bağlamsal Adım Yardımı Olan Karmaşık Çok Adımlı Form — Doğru

\n\n

(İçerik belirteç sınırı nedeniyle kesildi — lütfen bu makaleyi yeniden deneyin.)