Aksesibilitas

Komponen SDK

SDK mengimplementasikan komponen yang dilengkapi dengan atribut HTML untuk aksesibilitas — aria-label, tabindex, role, dan lainnya — yang memungkinkan navigasi keyboard antar elemen, mengaktifkan panduan audio, dan digunakan oleh perangkat lunak pembaca layar.

Praktik terbaik

Saat mengintegrasikan Web SDK ke dalam halaman, mungkin ada elemen interaktif lain yang tidak terlihat selama alur pembukaan kamera dan pengambilan gambar. Elemen-elemen ini dapat menyebabkan konflik dengan informasi dalam alur pengambilan gambar, sehingga mengganggu pengalaman pengguna. Oleh karena itu, penting untuk menghapus atau menonaktifkan interaksi dengan elemen lain saat pengambilan gambar sedang berlangsung.

Hal ini dapat dilakukan dengan beberapa cara, tergantung pada elemen dan framework yang ada di halaman. Berikut adalah contoh menggunakan atribut aria-hidden:

// page html
// <div id="main-content">
//   <header>...</header>
//   <button id="my-button">Interactive Button</button>
//   <footer>...</footer>
// </div>

const unicoSdk = new UnicoCheckBuilder().build();

unicoSdk
  .prepareSelfieCamera(/* ... */)
  .then((cameraOpener) => {
    const pageElement = document.getElementById('main-content');
    pageElement.setAttribute('aria-hidden', true);

    cameraOpener.open({
      on: {
        success: (obj) => {
          pageElement.setAttribute('aria-hidden', false);
        },
        error: (error) => {
          pageElement.setAttribute('aria-hidden', false);
        },
      },
    });
  });

Catatan aria-hidden

Gunakan atribut ini dengan hati-hati — atribut ini dapat merusak aksesibilitas elemen di halaman jika diterapkan secara tidak benar atau tidak dihapus saat alur pengambilan gambar berakhir.

Referensi

• MDN — aria-hidden