---
title: 无障碍访问
canonical: https://developer.unico.io/zh-CN/dual-api/developers/sdks-and-tools/web/web-sdk/accessibility
locale: zh-CN
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)