Accessibilité

Composants du SDK

Le SDK implémente des composants préparés avec des attributs HTML pour l'accessibilité — aria-label, tabindex, role, entre autres — qui permettent la navigation au clavier entre les éléments, activent le guidage audio et sont utilisés par les logiciels de lecteur d'écran.

Bonnes pratiques

Lors de l'intégration du Web SDK dans une page, il peut y avoir d'autres éléments interactifs qui ne sont pas visibles pendant le flux d'ouverture de la caméra et de capture d'image. Ces éléments peuvent provoquer des conflits avec les informations du flux de capture, perturbant l'expérience utilisateur. Il est donc important de supprimer ou de désactiver l'interaction avec les autres éléments pendant la capture.

Cela peut être réalisé de plusieurs façons, selon les éléments et les frameworks existants sur la page. Voici un exemple utilisant l'attribut 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);
        },
      },
    });
  });

Mise en garde sur aria-hidden

Utilisez cet attribut avec précaution — il peut nuire à l'accessibilité des éléments de la page s'il est appliqué de manière incorrecte ou s'il n'est pas supprimé à la fin du flux de capture.

Références

• MDN — aria-hidden