M

MLOG

Türkçe

Engelliler dahil tüm kullanıcılar için kullanılabilirlik sağlayan, üzerine gelme ve odaklanma durumlarını kullanarak erişilebilir araç ipuçları uygulamak için kapsamlı bir rehber.

Araç İpucu Uygulaması: Üzerine Gelme ve Odaklanma ile Erişilebilir Bilgi

Araç ipuçları, bir kullanıcının fare imlecini bir öğenin üzerine getirdiğinde veya bir öğeye odaklandığında görünen küçük, bağlamsal yardım mesajlarıdır. Ek bilgi sağlayabilir, bir öğenin amacını netleştirebilir veya bir özelliğin nasıl kullanılacağına dair ipuçları sunabilirler. Ancak, araç ipuçları doğru şekilde uygulanmazsa kolayca erişilebilirlik kabuslarına dönüşebilir. Bu kılavuz, engelli kullanıcılar da dahil olmak üzere herkes tarafından kullanılabilir araç ipuçları oluşturmak için en iyi uygulamaları özetlemektedir.

Araç İpuçları İçin Erişilebilirlik Neden Önemlidir?

Erişilebilirlik sadece uyumlulukla ilgili değildir; herkes için daha iyi bir kullanıcı deneyimi yaratmakla ilgilidir. Araç ipuçları erişilebilir olmadığında, ekran okuyucular, klavye ile gezinme veya sesli komut gibi yardımcı teknolojilere dayanan kullanıcıları dışlayabilir. Şu senaryoları göz önünde bulundurun:

Erişilebilirlik en iyi uygulamalarını takip ederek, araç ipuçlarının herkes için kullanıcı deneyimini engellemek yerine geliştirmesini sağlayabiliriz.

Erişilebilir Araç İpuçları İçin Temel İlkeler

Aşağıdaki ilkeler, erişilebilir araç ipuçları oluşturmak için çok önemlidir:

  1. Alternatif erişim sağlayın: Araç ipuçlarının hem fareyle üzerine gelme hem de klavye odağı aracılığıyla erişilebilir olduğundan emin olun.
  2. ARIA niteliklerini kullanın: Araç ipuçlarını yardımcı teknolojilere doğru bir şekilde tanıtmak ve açıklamak için ARIA (Erişilebilir Zengin İnternet Uygulamaları) niteliklerini kullanın.
  3. Odağı yönetin: Bir araç ipucu görüntülendiğinde ve gizlendiğinde odağın nereye gideceğini kontrol edin.
  4. Yeterli kontrast sağlayın: Araç ipucu metni ile arka plan arasında yeterli renk kontrastı sağlayın.
  5. Yeterli süre tanıyın: Kullanıcılara araç ipucu içeriğini okumaları için yeterli zaman verin.
  6. Kapatılabilir yapın: Araç ipucunu kapatmak için net bir yol sağlayın.
  7. Aşırı kullanımdan kaçının: Araç ipuçlarını idareli ve yalnızca gerektiğinde kullanın.

Uygulama Teknikleri

1. Üzerine Gelme ve Odaklanma Kullanımı

Erişilebilir araç ipuçlarının en kritik yönü, hem fare hem de klavye kullanıcıları için erişilebilir olmalarını sağlamaktır. Bu, araç ipucunun hem üzerine gelindiğinde hem de öğe odak aldığında görünmesi gerektiği anlamına gelir.

HTML:

<a href="#" aria-describedby="tooltip-example">Örnek Bağlantı</a>
<div id="tooltip-example" role="tooltip" style="display: none;">Bu bir örnek araç ipucudur.</div>

CSS:

a:hover + div[role="tooltip"],
a:focus + div[role="tooltip"] {
  display: block;
  position: absolute;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 5px;
  z-index: 1000; /* Araç ipucunun en üstte olmasını sağlar */
}

Açıklama:

JavaScript (Gelişmiş Kontrol - İsteğe Bağlı):

CSS basit gösterme/gizleme işlemlerini halledebilirken, JavaScript özellikle araç ipuçları dinamik olarak oluşturulduğunda veya daha karmaşık davranışlara ihtiyaç duyulduğunda daha sağlam bir kontrol sağlar.

const link = document.querySelector('a[aria-describedby="tooltip-example"]');
const tooltip = document.getElementById('tooltip-example');

link.addEventListener('focus', () => {
  tooltip.style.display = 'block';
});

link.addEventListener('blur', () => {
  tooltip.style.display = 'none';
});

link.addEventListener('mouseover', () => {
  tooltip.style.display = 'block';
});

link.addEventListener('mouseout', () => {
  tooltip.style.display = 'none';
});

2. ARIA Niteliklerini Kullanma

ARIA nitelikleri, yardımcı teknolojilere anlamsal bilgi sağlamak için gereklidir. İşte anahtar niteliklerin bir dökümü:

Örnek:

<button aria-describedby="help-tooltip">Gönder</button>
<div id="help-tooltip" role="tooltip" aria-hidden="true">Formu göndermek için buraya tıklayın.</div>

JavaScript (aria-hidden için):

const button = document.querySelector('button[aria-describedby="help-tooltip"]');
const tooltip = document.getElementById('help-tooltip');

button.addEventListener('focus', () => {
  tooltip.setAttribute('aria-hidden', 'false');
  tooltip.style.display = 'block';
});

button.addEventListener('blur', () => {
  tooltip.setAttribute('aria-hidden', 'true');
  tooltip.style.display = 'none';
});

button.addEventListener('mouseover', () => {
  tooltip.setAttribute('aria-hidden', 'false');
  tooltip.style.display = 'block';
});

button.addEventListener('mouseout', () => {
  tooltip.setAttribute('aria-hidden', 'true');
  tooltip.style.display = 'none';
});

3. Odağı Yönetme

Bir araç ipucu göründüğünde, genellikle tetikleyici öğeden odağı *çalmamalıdır*. Odak, araç ipucunu tetikleyen öğede kalmalıdır. Bu, klavye kullanıcılarının beklenmedik kesintiler olmadan sayfada gezinmeye devam edebilmesini sağlar.

Ancak, özellikle araç ipucu etkileşimli öğeler (örneğin, bağlantılar, düğmeler) içeriyorsa, odağı araç ipucuna taşımak *isteyebileceğiniz* durumlar olabilir. Bu durumda, şunlardan emin olun:

Çoğu durumda, basitlik ve kullanılabilirlik için araç ipucunun kendisi içinde odak yönetiminden kaçınmak tercih edilir.

4. Yeterli Kontrast Sağlama

Renk kontrastı okunabilirlik için çok önemlidir. Araç ipuçlarınızdaki metin renginin arka plan rengine karşı yeterli kontrasta sahip olduğundan emin olun. Web İçeriği Erişilebilirlik Yönergeleri (WCAG), normal metin için en az 4.5:1 ve büyük metin (18pt veya 14pt kalın) için 3:1 kontrast oranı önermektedir.

Renk seçimlerinizin erişilebilirlik standartlarını karşıladığını doğrulamak için çevrimiçi kontrast denetleyicileri kullanın. Kontrast denetleyici örnekleri şunlardır:

Örnek (İyi Kontrast):

.tooltip {
  background-color: #000;
  color: #fff;
}

Örnek (Kötü Kontrast):

.tooltip {
  background-color: #fff;
  color: #eee;
}

5. Yeterli Süre Tanıma

Kullanıcıların araç ipucu içeriğini okumak için yeterli zamana ihtiyacı vardır. Çok çabuk kaybolan araç ipuçlarından kaçının. Sihirli bir sayı olmasa da, birkaç saniyelik minimum bir görüntüleme süresini hedefleyin. Ayrıca, kullanıcı tetikleyici öğenin üzerinde durduğu veya odaklandığı sürece araç ipucu görünür kalmalıdır. Diğer olaylar nedeniyle araç ipucunu kapatmanız gerekiyorsa, araç ipucunun kapanacağına dair bir gösterge sağlayın.

Araç ipucu içeriği uzunsa, kullanıcının araç ipucunu manuel olarak kapatabilmesi için bir yol sağlamayı düşünün (örneğin, bir kapatma düğmesi veya Escape tuşuna basmak).

6. Kapatılabilir Yapma

Araç ipuçları genellikle kullanıcı faresini uzaklaştırdığında veya odağı kaldırdığında otomatik olarak kaybolsa da, özellikle uzun araç ipuçları veya etkileşimli öğeler içeren araç ipuçları için bunları manuel olarak kapatmak için net bir yol sağlamak iyi bir uygulamadır.

Araç İpuçlarını Kapatma Yöntemleri:

Örnek (Kapatma Düğmesi):

<div id="my-tooltip" role="tooltip" aria-hidden="true">
  Bu benim araç ipucu içeriğim.
  <button onclick="hideTooltip()">Kapat</button>
</div>

Örnek (Escape Tuşu):

document.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') {
    hideTooltip(); // Gerçek araç ipucu gizleme fonksiyonunuzla değiştirin
  }
});

7. Aşırı Kullanımdan Kaçınma

Araç ipuçları idareli ve yalnızca gerçekten yararlı bilgiler sağladıklarında kullanılmalıdır. Araç ipuçlarının aşırı kullanımı arayüzü karmaşıklaştırabilir, kullanıcıların dikkatini dağıtabilir ve sinir bozucu bir deneyim yaratabilir.

Araç İpuçlarına Alternatifler:

Gelişmiş Hususlar

Dinamik İçerik

Araç ipucu içeriğiniz dinamik olarak oluşturuluyorsa (örneğin, bir API'den yükleniyorsa veya kullanıcı girdisine göre güncelleniyorsa), aria-describedby niteliğinin ve araç ipucu görünürlüğünün buna göre güncellendiğinden emin olun. Bu güncellemeleri yönetmek için JavaScript kullanın.

Konumlandırma

Araç ipuçlarınızın konumlandırılmasını dikkatlice düşünün. Önemli içeriği gizleyecek veya düzen kaymalarına neden olacak şekilde yerleştirmekten kaçının. Farklı ekran boyutlarına ve çözünürlüklerine dikkat edin ve araç ipuçlarının her zaman görüntü alanı içinde görünür olmasını sağlamak için CSS kullanın.

Mobil Cihazlar

Araç ipuçları geleneksel olarak, dokunmatik tabanlı cihazlarda bulunmayan üzerine gelme etkileşimlerine dayanır. Mobil cihazlar için, aşağıdakiler gibi alternatif etkileşim yöntemleri kullanmayı düşünün:

Araç İpuçlarınızı Test Etme

Tüm kullanıcılar için erişilebilir olduklarından emin olmak için araç ipuçlarınızı kapsamlı bir şekilde test edin. Manuel test ve otomatik erişilebilirlik test araçlarının bir kombinasyonunu kullanın.

Test Yöntemleri:

Uluslararasılaştırma (i18n) ve Yerelleştirme (l10n)

Küresel bir kitle için araç ipuçları geliştirirken, uluslararasılaştırma ve yerelleştirmeyi aklınızda bulundurun:

Sonuç

Erişilebilir araç ipuçları uygulamak, dikkatli bir planlama ve detaylara özen göstermeyi gerektirir. Bu kılavuzda özetlenen ilke ve teknikleri takip ederek, yetenekleri ne olursa olsun herkes tarafından kullanılabilir araç ipuçları oluşturabilirsiniz. Erişilebilirliğin devam eden bir süreç olduğunu unutmayın, bu nedenle tüm kullanıcılarınızın ihtiyaçlarını karşıladıklarından emin olmak için araç ipuçlarınızı test etmeye ve iyileştirmeye devam edin.

Kaynaklar