Accesibilidad

Componentes del SDK

El SDK implementa componentes preparados con atributos HTML para accesibilidad — aria-label, tabindex, role, entre otros — que permiten la navegación por teclado entre elementos, activan la guía de audio y son utilizados por software lector de pantalla.

Buenas prácticas

Al integrar el Web SDK en una página, puede haber otros elementos interactivos que no son visibles durante el flujo de apertura de cámara y captura de imagen. Estos elementos pueden generar conflictos con la información del flujo de captura, interrumpiendo la experiencia del usuario. Por lo tanto, es importante eliminar o desactivar la interacción con otros elementos mientras se realiza la captura.

Esto puede hacerse de varias formas, dependiendo de los elementos existentes y los frameworks utilizados en la página. A continuación se muestra un ejemplo usando el atributo 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);
        },
      },
    });
  });

Advertencia sobre aria-hidden

Utiliza este atributo con precaución — puede perjudicar la accesibilidad de los elementos en la página si se aplica incorrectamente o no se elimina cuando el flujo de captura finaliza.

Referencias

• MDN — aria-hidden