접근성

SDK components

SDK는 HTML 속성(aria-label, tabindex, role 등)을 갖춘 컴포넌트를 구현하여 요소 간 키보드 탐색을 가능하게 하고, 음성 안내를 활성화하며, 스크린 리더 소프트웨어에서 사용됩니다.

Best practices

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.setAttribute('aria-hidden', false);
        },
        error: (error) => {
          pageElement.setAttribute('aria-hidden', false);
        },
      },
    });
  });

aria-hidden 주의사항

이 속성을 신중하게 사용하세요 — 잘못 적용하거나 캡처 흐름이 끝난 후 제거하지 않으면 페이지 요소의 접근성을 해칠 수 있습니다.

References

• MDN — aria-hidden