Barrierefreiheit

SDK-Komponenten

Das SDK implementiert Komponenten, die mit HTML-Attributen für Barrierefreiheit vorbereitet sind — aria-label, tabindex, role, unter anderem — die die Tastaturnavigation zwischen Elementen ermöglichen, Audio-Führung aktivieren und von Bildschirmleseprogrammen verwendet werden.

Best Practices

Bei der Integration des Web SDK in eine Seite kann es andere interaktive Elemente geben, die während des Kameraöffnens und des Bilderfassungsflusses nicht sichtbar sind. Diese Elemente können Konflikte mit den Informationen im Erfassungsfluss verursachen und das Benutzererlebnis beeinträchtigen. Daher ist es wichtig, die Interaktion mit anderen Elementen zu entfernen oder zu deaktivieren, während die Erfassung durchgeführt wird.

Dies kann auf verschiedene Arten erfolgen, abhängig von den vorhandenen Elementen und Frameworks auf der Seite. Nachfolgend ein Beispiel mit dem aria-hidden-Attribut:

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

Einschränkung von aria-hidden

Verwenden Sie dieses Attribut mit Vorsicht — es kann die Barrierefreiheit von Elementen auf der Seite beeinträchtigen, wenn es falsch angewendet oder nicht entfernt wird, wenn der Erfassungsfluss endet.

Referenzen

• MDN — aria-hidden