NativeScript 中的应用可访问性

这是一篇由 Dimitar Topuzov 撰写的客座文章，他是 NativeScript 团队的 QA 架构师。

原生应用可访问性

设计良好的用户界面 (UI) 通常包含不需要显式标签来指示用户目的的元素。任务列表应用程序中项目旁边的复选框具有相当明显的用途，文件管理器应用程序中的垃圾桶也是如此。但是，对于有视力障碍的用户，需要其他 UI 提示。幸运的是，iOS 和 Android 都提供 API 来使应用程序对残疾人可访问。此外，这两个平台都提供工具和技术（如 TalkBack 和 VoiceOver）可以使视力障碍者的生活更轻松。

NativeScript 可访问性

NativeScript 框架生成原生应用程序。因此，所有针对残障人士的供应商工具都可以立即使用。此外，所有基于原生 Android 和 iOS 可访问性模型的流行自动化工具和框架（如 Appium）也可以正常工作，不需要额外的桥接代码或编程。除了完整的原生可访问性功能集之外，NativeScript 还提供跨平台 API，旨在帮助开发人员创建更易访问的应用程序。

示例

让我们检查一下可以在视图上设置的 automationText 属性

<GridLayout width="290" automationText="MyGrid" />

在 Android 上，此属性将设置指定元素上的 android:contentDescription 属性，这将有助于 Android 可访问性工具和服务正常工作。在 iOS 上，这将设置 accessibilityIdentifier，用于在使用 UI 自动化接口编写的脚本中唯一标识元素。

在更复杂的场景中，automationText 属性也可以与绑定一起使用。 请查看来自 NativeScript 示例应用程序的以下示例： Google PlayApp Store来源

<Repeater.itemTemplate>
    <StackLayout touch="tileTouch" tap="navigateToExample" cssClass="example-item" automationText="{{ title }}" orientation="{{ $parents['Repeater'].useListLayout, $parents['Repeater'].useListLayout ? 'horizontal' : 'vertical' }}" visibility="{{ $parents['Repeater'].showOnlyNew, (!$parents['Repeater'].showOnlyNew || isNew) ? 'visible' : 'collapsed' }}">
        <GridLayout horizontalAlignment="center" columns="*" rows="*" cssClass="{{ $parents['Repeater'].useListLayout, $parents['Repeater'].useListLayout ? 'example-img-list' : 'example-img-wrap' }}">
            <Image src="{{ image }}" cssClass="{{ isNew ? 'list-example-image-new' : 'list-example-image' }}" borderColor="{{ $parents['Repeater'].group.tint }}" stretch="aspectFit" />
            <Image src="{{ $parents['Page'].group.id, 'res://ic_new_' + $parents['Repeater'].group.id }}" cssClass="new" visibility="{{ isNew ? 'visible' : 'collapsed' }}" stretch="none" />
        </GridLayout>
        <StackLayout>
            <Label text="{{ title }}" cssClass="{{ $parents['Repeater'].useListLayout, $parents['Repeater'].useListLayout ? 'example-title-list' : 'example-title-wrap' }}"/>
            <Label text="{{ controls }}" textWrap="true" cssClass="{{ $parents['Repeater'].useListLayout, $parents['Repeater'].useListLayout ? 'used-controls-list' : 'used-controls-wrap' }}"/>
        </StackLayout>
    </StackLayout>
</Repeater.itemTemplate>

结果

请记住，NativeScript 始终为您提供 对所有原生 API 的完全访问权限，因此您可以完全控制原生可访问性功能。

例如

总结

全世界许多政府和组织都规定应用程序必须具备残障人士的可访问性功能。我们致力于为您提供所有开箱即用的原生可访问性功能，以及跨平台抽象的最佳功能，以便您可以为所有用户构建和部署成功的应用程序，无论其身体能力如何。