アクセシビリティ

SDKコンポーネント

SDKは、アクセシビリティ向けのHTML属性（aria-label、tabindex、role など）を備えたコンポーネントを実装しており、要素間のキーボードナビゲーション、音声ガイダンスの有効化、およびスクリーンリーダーソフトウェアによる利用を可能にします。

ベストプラクティス

Web SDKをページに統合する際、カメラの起動と画像キャプチャフロー中に表示されない他のインタラクティブな要素が存在する場合があります。これらの要素はキャプチャフローの情報と競合し、ユーザー体験を損なう可能性があります。そのため、キャプチャ実行中は他の要素とのインタラクションを削除または無効化することが重要です。

この操作は、ページ上の既存の要素やフレームワークに応じてさまざまな方法で実現できます。以下は 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.removeAttribute('aria-hidden');
        },
        error: (error) => {
          pageElement.removeAttribute('aria-hidden');
        },
      },
    });
  });

aria-hidden の注意事項

この属性は慎重に使用してください — 誤って適用したり、キャプチャフロー終了後に削除しなかったりすると、ページ上の要素のアクセシビリティを損なう可能性があります。

参考資料

• MDN — aria-hidden