Bir sayfaya yeni içerik eklendiğinde kullanıcının odağının bu içeriğe yönlendirilmesini sağlayarak kullanıcının ilgili işlem yapmasına olanak verin.
Manuel olarak test etme
Tek sayfalık uygulamaları test etmek önemlidir. Özellikle kullanıcının yeni içeriğe odaklanmasını yönetmek söz konusu olduğunda bu uygulamalar test edilmelidir.
Tek sayfalık uygulamalarda bağlantı tıklandığında genellikle sayfanın tamamen yenilenmesi gerekmez.
Bunun yerine, rota değişikliği <main> içerik alanı için yeni veriler getirir.
Ekran okuyucu veya başka bir yardımcı teknolojiyle gezinen kullanıcılar, sayfaya yeni içerik eklendiğini fark etmeyebilir.
Kullanıcıların <main> alanına geri dönmesi gerektiğine dair bir gösterge yok.
Bu durumda, kullanıcının algıladığı bağlamı sitenin görsel içeriğiyle senkronize tutmak için kullanıcının odağını yönetmeniz gerekir.
Nasıl düzeltilir?
Kullanıcının odağını bir sayfadaki yeni içeriğe yönlendirmek için yeni yüklenen içerikte iyi bir başlık bulun ve o başlığa odaklanmasını sağlayın.
Bunu yapmanın en kolay yolu, başlığa -1 türünde bir tabindex vermek ve focus() yöntemini çağırmaktır:
<main>
<h2 tabindex="-1">Welcome to your shopping cart</h2>
</main>
<script>
// Assuming this gets called every time new content loads...
function onNewPage() {
var heading = document.querySelector('h2');
heading.focus();
// You can also update the page title :)
document.title = heading.textContent;
}
</script>
Yardımcı teknolojiler, yeni başlığı ve bulunduğu ana belirgin işaret alanını duyurur.
Kaynaklar
Kullanıcı odağının sayfaya eklenen yeni içeriğe yönlendirilmesi denetimi için kaynak kod