Acessibilidade

Nesta seção, você encontrará 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

AnteriorCaptura de documento PróximoGuia de tratamento de erros

Atualizado há 3 meses

Isto foi útil?

// 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); }, }, }); });

Acessibilidade

Componentes da SDK

Boas práticas

Referências

Acessibilidade

Componentes da SDK

Boas práticas

Referências

Dúvidas?

Dúvidas?