---
title: アクセシビリティ
canonical: https://developer.unico.io/ja/dual-api/developers/sdks-and-tools/web/web-sdk/accessibility
locale: ja
generated_by: markdown-export
---

## SDKコンポーネント

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

## ベストプラクティス

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

この操作は、ページ上の既存の要素やフレームワークに応じてさまざまな方法で実現できます。以下は `aria-hidden` 属性を使用した例です。

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

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

## 参考資料

- [MDN — `aria-hidden`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-hidden)