Acessibilidade

Dicas e informações sobre acessibilidade

Componentes da SDK

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

Boas práticas

Ao integrar a SDK Web em uma página, é possível que existam outros elementos interativos na página que não ficam visíveis durante o fluxo de abertura da câmera e captura de imagem. Esses elementos podem acabar gerando conflitos com as informações do fluxo de captura, atrapalhando a experiência do usuário, portanto, é importante remover ou inativar a interação com outros elementos enquanto a captura estiver sendo realizada.

Isso é possível de diversas formas e depende dos elementos existentes e frameworks utilizados na página, segue abaixo, um exemplo utilizando o atributo *aria-hidden

Exemplo

// page html
// <div id="main-content">
//  <header>...</header>
//  <button id="my-button">Interactive Button</click>
//  <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);
        },
      },
    });
  });

aria-hidden

É importante usar com cuidado este atributo, pois ele pode prejudicar a acessibilidade de elementos na página se for aplicado incorretamente, ou não for removido quando o fluxo de captura terminar.

Referências

• https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-hidden