Bir sayfaya yeni içerik eklendiğinde, kullanıcının işlem yapabilmesi için odağının bu içeriğe yönlendirildiğinden emin olun.
Manuel olarak test etme
Tek sayfalık uygulamaların test edilmesi, özellikle de kullanıcının yeni içeriğe odaklanmasını yönetme söz konusu olduğunda önemlidir.
Tek sayfalık uygulamalarda bir bağlantının tıklanması genellikle
tam olarak yenilenmez.
Bunun yerine, bir rota değişikliği <main> içerik alanı için yeni veriler getirir.
Gören kullanıcılar için
bu sorun yoktur.
Ancak, ekran okuyucu veya başka bir yardımcı teknolojiyle gezinen kullanıcılar, yeni içeriğin sayfaya eklendiğini bilemeyebilir.
<main> alanına geri dönmeleri gerektiğine dair bir ibare yok.
Böyle bir durumda, kullanıcının algılanan bağlamını sitenin görsel içeriğiyle senkronize tutmak için kullanıcının odağını yönetmek istersiniz.
Nasıl düzeltilir?
Kullanıcının bir sayfadaki yeni içeriğe odaklanmasını yönetmek için,
yeni yüklenen içerikte iyi bir başlık bulun ve doğrudan bu içeriğe odaklanın.
Bunu başarmanın en kolay yolu, başlığa tabindex -1
bir değer 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 bu başlığın yer aldığı ana önemli alanı duyurur.
Erişilebilirlik için odağı yönetme başlıklı makaleyi de inceleyin.
Kaynaklar
Kullanıcının odağı, sayfaya eklenen yeni içeriğe yönlendirilir denetimi için kaynak kodu