M

MLOG

Türkçe

Daha iyi bir kullanıcı deneyimi için ARIA rolleri, klavye gezintisi, en iyi uygulamalar ve tarayıcılar arası uyumluluğu kapsayan ağaç görünümü erişilebilirliğine yönelik kapsamlı bir kılavuz.

Ağaç Görünümü: Hiyerarşik Veri Gezintisi Erişilebilirliği

Ağaç görünümleri, hiyerarşik verileri görüntülemek için temel kullanıcı arayüzü bileşenleridir. Kullanıcıların dosya sistemleri, organizasyon şemaları veya web sitesi menüleri gibi karmaşık yapıları sezgisel bir şekilde gezinmelerine olanak tanır. Ancak, kötü uygulanmış bir ağaç görünümü, özellikle ekran okuyucular ve klavye gezintisi gibi yardımcı teknolojilere bağımlı olan engelli kullanıcılar için önemli erişilebilirlik engelleri oluşturabilir. Bu makale, herkes için olumlu bir kullanıcı deneyimi sağlayarak erişilebilir ağaç görünümleri tasarlamak ve uygulamak için kapsamlı bir kılavuz sunmaktadır.

Ağaç Görünümü Yapısını Anlamak

Bir ağaç görünümü, verileri hiyerarşik, genişletilebilir/daraltılabilir bir formatta sunar. Ağaçtaki her düğümün alt düğümleri olabilir, bu da dallar ve alt dallar oluşturur. En üstteki düğüme kök düğüm denir. Erişilebilirlik hususlarına dalmadan önce temel yapıyı anlamak kritik öneme sahiptir.

İşte yaygın ağaç görünümü öğelerinin bir dökümü:

ARIA Rollerinin ve Niteliklerinin Önemi

Erişilebilir Zengin İnternet Uygulamaları (ARIA), HTML elemanlarına anlamsal anlam katan ve onları yardımcı teknolojiler tarafından anlaşılır kılan bir nitelikler paketidir. Ağaç görünümleri oluştururken, ARIA rolleri ve nitelikleri, ağacın yapısını ve davranışını ekran okuyuculara iletmek için çok önemlidir.

Temel ARIA Rolleri:

Anahtar ARIA Nitelikleri:

Örnek ARIA Uygulaması:

İşte ARIA nitelikleriyle bir ağaç görünümünün nasıl yapılandırılacağına dair temel bir örnek:

<ul role="tree" aria-label="Dosya Sistemi"> <li role="treeitem" aria-expanded="true" aria-selected="false" tabindex="0"> <span>Kök Klasör</span> <ul role="group"> <li role="treeitem" aria-expanded="false" aria-selected="false" tabindex="-1"> <span>Klasör 1</span> <ul role="group"> <li role="treeitem" aria-selected="false" tabindex="-1"><span>Dosya 1.txt</span></li> <li role="treeitem" aria-selected="false" tabindex="-1"><span>Dosya 2.txt</span></li> </ul> </li> <li role="treeitem" aria-selected="false" tabindex="-1"><span>Klasör 2</span></li> </ul> </li> </ul>

Klavye ile Gezinti

Klavye ile gezinme, fare kullanamayan kullanıcılar için çok önemlidir. İyi tasarlanmış bir ağaç görünümü, yalnızca klavye kullanılarak tamamen gezilebilir olmalıdır. İşte standart klavye etkileşimleri:

Klavye Gezintisi için JavaScript Uygulaması:

Klavye olaylarını yönetmek ve odağı buna göre güncellemek için JavaScript'e ihtiyacınız olacak. İşte basitleştirilmiş bir örnek:

const tree = document.querySelector('[role="tree"]'); const treeitems = document.querySelectorAll('[role="treeitem"]'); tree.addEventListener('keydown', (event) => { const focusedElement = document.activeElement; let nextElement; switch (event.key) { case 'ArrowUp': event.preventDefault(); // Sayfanın kaymasını engelle // Önceki ağaç öğesini bulma mantığı (DOM'da gezinmeyi gerektirir) // ... nextElement = findPreviousTreeitem(focusedElement); break; case 'ArrowDown': event.preventDefault(); // Sonraki ağaç öğesini bulma mantığı // ... nextElement = findNextTreeitem(focusedElement); break; case 'ArrowLeft': event.preventDefault(); if (focusedElement.getAttribute('aria-expanded') === 'true') { // Düğümü daralt focusedElement.setAttribute('aria-expanded', 'false'); } else { // Odağı ebeveyne taşı nextElement = findParentTreeitem(focusedElement); } break; case 'ArrowRight': event.preventDefault(); if (focusedElement.getAttribute('aria-expanded') === 'false') { // Düğümü genişlet focusedElement.setAttribute('aria-expanded', 'true'); } else { // Odağı ilk çocuğa taşı nextElement = findFirstChildTreeitem(focusedElement); } break; case 'Home': event.preventDefault(); nextElement = treeitems[0]; break; case 'End': event.preventDefault(); nextElement = treeitems[treeitems.length - 1]; break; case ' ': // Boşluk Çubuğu case 'Enter': event.preventDefault(); // Odaklanmış düğümü seçme mantığı selectNode(focusedElement); break; default: // O karakterle başlayan düğümlere gitmek için karakter yazımını işle break; } if (nextElement) { focusedElement.setAttribute('tabindex', '-1'); nextElement.setAttribute('tabindex', '0'); nextElement.focus(); } });

Klavye Gezintisi Uygulaması için Önemli Hususlar:

Görsel Tasarım ve Erişilebilirlik

Görsel tasarım, ağaç görünümlerinin kullanılabilirliğinde ve erişilebilirliğinde çok önemli bir rol oynar. İşte bazı yönergeler:

Ekran Okuyucu Hususları

Ekran okuyucu kullanıcıları, ağaç görünümlerini anlamak ve onlarla etkileşim kurmak için ARIA niteliklerine ve klavye gezintisine güvenirler. İşte ekran okuyucu erişilebilirliği için bazı önemli hususlar:

Tarayıcılar Arası Uyumluluk

Erişilebilirlik, farklı tarayıcılar ve işletim sistemleri arasında tutarlı olmalıdır. Ağaç görünümünüzü aşağıdakiler üzerinde kapsamlı bir şekilde test edin:

ARIA niteliklerini ve klavye davranışını incelemek için tarayıcı geliştirici araçlarını kullanın. Herhangi bir tutarsızlığa veya görüntüleme sorununa dikkat edin.

Test Etme ve Doğrulama

Düzenli test, ağaç görünümünüzün erişilebilirliğini sağlamak için esastır. İşte bazı test yöntemleri:

Erişilebilir Ağaç Görünümleri için En İyi Uygulamalar

Erişilebilir ağaç görünümleri tasarlarken ve uygularken izlenmesi gereken bazı en iyi uygulamalar şunlardır:

İleri Düzey Hususlar

Sonuç

Erişilebilir ağaç görünümleri oluşturmak, dikkatli bir planlama ve uygulama gerektirir. Bu makalede özetlenen yönergeleri izleyerek, ağaç görünümlerinizin engelliler de dahil olmak üzere tüm kullanıcılar tarafından kullanılabilir ve erişilebilir olmasını sağlayabilirsiniz. Erişilebilirliğin yalnızca teknik bir gereklilik olmadığını; kapsayıcı tasarımın temel bir ilkesi olduğunu unutmayın.

Erişilebilirliğe öncelik vererek, yetenekleri ne olursa olsun herkes için daha iyi bir kullanıcı deneyimi yaratabilirsiniz. Kodunuzu düzenli olarak test etmek ve doğrulamak önemlidir. Gerçekten kapsayıcı kullanıcı arayüzleri oluşturmak için en son erişilebilirlik standartları ve en iyi uygulamalarla güncel kalın.