Fokus pengguna diarahkan ke konten baru yang ditambahkan ke halaman

Setiap kali konten baru ditambahkan ke halaman, coba pastikan fokus pengguna diarahkan ke konten tersebut, sehingga mereka dapat mengambil tindakan.

Cara menguji secara manual

Aplikasi web satu halaman penting untuk diuji, terutama dalam hal pengelolaan fokus pengguna pada konten baru.

Biasanya, di aplikasi web satu halaman, mengklik link tidak akan menyebabkan muat ulang paksa. Sebagai gantinya, perubahan rute akan mengambil data baru untuk area konten <main>.

Pengguna yang menavigasi dengan pembaca layar atau teknologi pendukung lainnya mungkin tidak mengetahui bahwa konten baru telah ditambahkan ke halaman. Tidak ada indikasi bahwa mereka harus kembali ke area <main>.

Jika hal ini terjadi, Anda harus mengelola fokus pengguna agar konteks yang dipersepsi pengguna tetap sinkron dengan konten visual situs.

Cara memperbaiki

Untuk mengelola fokus pengguna ke konten baru di halaman, cari judul yang bagus dalam konten yang baru dimuat dan fokus langsung ke konten tersebut. Cara termudah untuk melakukannya adalah dengan memberi judul tabindex dari -1 dan memanggil metode focus()-nya:

<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>

Teknologi pendukung mengumumkan judul baru dan area penanda utama yang berisi judul tersebut.

Resource

Kode sumber untuk audit Fokus pengguna diarahkan ke konten baru yang ditambahkan ke halaman