Acessibilidade

Componentes do SDK

O SDK implementa componentes preparados com atributos HTML para acessibilidade — aria-label, tabindex, role, entre outros — que habilitam a navegação pelo teclado entre elementos, ativam orientação por áudio e são utilizados por softwares de leitura de tela.

Boas práticas

Ao integrar o Web SDK em uma página, pode haver outros elementos interativos que não ficam visíveis durante o fluxo de abertura da câmera e captura de imagem. Esses elementos podem acabar causando conflitos com as informações do fluxo de captura, prejudicando a experiência do usuário. Portanto, é importante remover ou desativar a interação com outros elementos enquanto a captura está sendo realizada.

Isso pode ser feito de diversas maneiras, dependendo dos elementos existentes e dos frameworks utilizados na página. Abaixo está um exemplo usando o atributo aria-hidden:

// html da página
// <div id="main-content">
//   <header>...</header>
//   <button id="my-button">Botão Interativo</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);
        },
      },
    });
  });

Cuidado com aria-hidden

Use este atributo com cautela — ele pode prejudicar a acessibilidade dos elementos da página se aplicado incorretamente ou se não for removido quando o fluxo de captura terminar.

Referências

• MDN — aria-hidden