无障碍访问

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

aria-hidden 注意事项

请谨慎使用此属性——如果使用不当或在采集流程结束后未将其移除，可能会损害页面元素的无障碍访问性。

参考资料

• MDN — aria-hidden