uni-app跨平台框架对H5和移动端的支持情况探索

uni-app跨平台框架对H5和移动端的支持情况探索

一、H5端的无障碍支持情况

在H5端，uni-app框架展现出了对部分无障碍属性的良好支持。通过实际运行新闻项目，我们发现了以下无障碍问题，并给出了相应的解决方案：

分类无选中状态提示
问题描述：在H5端，当用户点击顶部分类时，没有明确的选中状态提示，这可能导致用户无法确定当前选中的是哪个分类。
解决方案：为顶部分类添加选中状态提示，并设置aria-selected属性和role="tab"角色。这样，当用户点击某个分类时，该分类会显示出选中状态，并通过无障碍属性告知辅助技术当前选中的是哪个分类。
新闻项目的配图无替代文本
问题描述：新闻项目中的配图没有替代文本，这可能导致使用屏幕阅读器的用户无法了解图片的内容。
解决方案：虽然尝试给image标签添加了alt、title、label、aria-label等属性，但在本次测试中并未看到明显效果。然而，为父容器设置的role属性是生效的。因此，建议开发者在无法直接为图片添加替代文本时，可以考虑通过为父容器设置合适的role属性来提供上下文信息。
新闻项目的焦点拆分太多
问题描述：新闻项目中，每个项目的标题、图片、作者、评论数、时间等都被拆分成了多个焦点，这可能导致用户浏览效率低下。
解决方案：合并每个项目的所有内容为一个大焦点，即每条新闻为一个焦点。这样，用户可以更高效地浏览新闻内容。

二、移动端（iOS和Android）的无障碍支持情况

iOS端
支持情况：iOS端虽然不支持设置无障碍属性，但能够浏览到相关的文字内容。
问题：由于不支持无障碍属性，开发者无法为应用提供详细的无障碍信息，如选中状态、替代文本等。这可能导致使用辅助技术的用户无法全面了解应用内容。
Android端
支持情况：Android端不仅不支持设置无障碍属性，而且无法正确朗读出基本内容，读出的都是数字乱码。
问题：这种情况对使用辅助技术的用户来说几乎无法使用应用。开发者需要特别注意Android端的无障碍支持情况，以确保应用对所有用户都是可用的。

三、总结

H5端：uni-app框架在H5端能够支持部分无障碍属性，如设置无障碍角色、增加选中状态提示等。然而，对于某些无障碍属性（如图片的替代文本）的支持可能不够理想。
移动端：iOS端虽然能够浏览到文字内容，但不支持设置无障碍属性；Android端则完全无法朗读出基本内容，且读出的都是乱码。这导致移动端（尤其是Android端）的无障碍支持情况非常糟糕。

四、建议

开发者：在开发uni-app项目时，应充分考虑无障碍支持情况。对于H5端，可以尽量利用支持的无障碍属性来提升应用的可用性；对于移动端，尤其是Android端，需要寻找替代方案或等待框架的进一步更新。
框架研发者：应重点考虑无障碍支持情况，不断优化框架的无障碍功能，以确保应用能够平等地为所有人提供便利。

五、体验环境

请注意，由于时间仓促和测试环境的限制，本文中的描述可能存在差异情况。若您也有关于uni-app框架的体验或其他跨平台框架体验，请在下方留言交流。

热门标签