#无障碍

无障碍（Accessibility，简写为 A11y）是指通过技术手段构建可访问性，确保移动应用能够被各类人群平等访问的设计理念。

其核心目标是打破使用壁垒，让不同身体条件、感知能力及认知水平的用户都能顺畅获取信息与服务。

主流移动平台均提供完整的无障碍支持体系：iOS 和 Android 不仅原生集成了面向障碍用户的 API，还配备标准化辅助技术工具链，例如专为视障用户设计的屏幕阅读器（VoiceOver / TalkBack）。

在此基础上，Lynx 框架封装了跨平台无障碍接口，使开发者能够在 App 中集成无障碍功能，构建信息无障碍的移动生态。

#默认的无障碍行为

只有一个无障碍元件才能成功的被读屏软件（iOS 的 VoiceOver 和 Android 的 TalkBack）访问和聚焦。

不过，<text> 和 <image> 默认就是一个无障碍元件，无需任何操作，他们就可以被识别。

accessibilitysrc/Default.tsx

Code

预览

#标记是否为一个无障碍元件

有时，可能希望自己控制无障碍元件的大小，或者是聚合一些无障碍信息，就需要自己控制哪些元件是无障碍节点。

使用 accessibility-element 标记一个元件是否可以成为一个无障碍元件，允许嵌套。

下面的例子中，只会存在一个无障碍焦点，并被阅读成 "Hello world"。

accessibilitysrc/Customized.tsx

Code

预览

#指定无障碍元件被朗读的特征和内容

使用 accessibility-trait 可以标记一个无障碍元件的特征，可以是图片、按钮、文本中的任意一种。

使用 accessibility-label 可以调整一个无障碍元件被读屏软件朗读的内容。

下面的例子中，元件们会被依次阅读成 "Hello lynx" 和 "I am an image displaying the Lynx icon"。

accessibilitysrc/LabelAndTraits.tsx

Code

预览

#调整无障碍元件被朗读的顺序

iOS 和 Android 系统都会默认以从上到下、从左到右的顺序排列各个无障碍元件，以便它们能够逐个被读屏软件访问。

使用 accessibility-elements 可以手动调整这个顺序，注意，要以逗号分割每个 id。

此外，如果父节点设置了 accessibility-elements 属性，那么仅可访问 accessibility-elements 属性指定 id 的子节点，其他子节点则不可以聚焦。

下面的例子中，无障碍元件们的顺序会被调整，会被依次阅读成 "Lynx" 和 "Hello"。

accessibilitysrc/ReOrder.tsx

Code

预览

#监听无障碍元件的焦点切换

无障碍焦点发生变化的时候，可以通过一个全局事件 activeElement 来通知新聚焦节点的信息。

export default class App extends Component<Props, State> {
  componentDidMount() {
    // 监听焦点变化
    this.getJSModule('GlobalEventEmitter').addListener(
      'activeElement',
      this.handleActiveElement,
      this,
    );
  }

  handleActiveElement(info: any) {
    this.setState({
      activeElementJsonStr: JSON.stringify(info),
    });
  }
}

#主动聚焦到某个无障碍元件

使用 requestAccessibilityFocus 提供主动聚焦到某个无障碍元件的能力。

lynx
  .createSelectorQuery()
  .select('#customId')
  .invoke({
    method: 'requestAccessibilityFocus',
    params: {},
    success: function (res) {
      console.log(res);
    },
    fail: function (res) {
      console.log(res);
    },
  })
  .exec();

#让屏幕阅读器朗读指定文本内容

使用 accessibilityAnnounce 让屏幕阅读器朗读指定的文本内容，帮助视觉障碍用户感知界面状态变化或操作结果。

lynx.accessibilityAnnounce(
  {
    content: 'hello lynx',
  },
  (res) => {
    console.log('test: ' + JSON.stringify(res));
  },
);