# aria-component
微信 Windows 版:支持
微信 Mac 版:支持
微信 鸿蒙 OS 版:支持
渲染框架支持情况:Skyline (使用最新 Nighly 工具调试)、WebView
# 功能描述
满足视障人士对于小程序的访问需求。
# 无障碍访问
为了更好地满足视障人士对于小程序的访问需求,基础库自2.7.1起,支持部分ARIA标签。
无障碍特性在读屏模式下可以访问,iOS可通过设置->通用->辅助功能->旁白打开。
以 view 组件为例,开发者可以增加aria-role
和aria-label
属性。
其中aria-role
表示组件的角色,当设置为'img'时,读屏模式下聚焦后系统会朗读出'图像'。设置为'button'时,聚焦后后系统朗读出'按钮'。
aria-label
表示组件附带的额外信息,聚焦后系统会自动朗读出来。
小程序已经内置了一些无障碍的特性,对于非原生组件,开发者可以添加以下无障碍标签。
aria-activedescendant | aria-atomic | aria-autocomplete | aria-busy | aria-checked |
aria-colcount | aria-colindex | aria-colspan | aria-controls | aria-current |
aria-describedby | aria-details | aria-disabled | aria-dropeffect | aria-errormessage |
aria-expanded | aria-flowto | aria-grabbed | aria-haspopup | aria-hidden |
aria-invalid | aria-keyshortcuts | aria-label | aria-labelledby | aria-level |
aria-live | aria-modal | aria-multiline | aria-multiselectable | aria-orientation |
aria-owns | aria-placeholder | aria-posinset | aria-pressed | aria-readonly |
aria-relevant | aria-required | aria-role | aria-roledescription | aria-rowcount |
aria-rowindex | aria-rowspan | aria-selected | aria-setsize | aria-sort |
aria-valuemax | aria-valuemin | aria-valuenow | aria-valuetext |
# 示例代码
<view aria-role="button" aria-label="提交表单">提交</view>
# Tips
- 安卓和iOS读屏模式下设置
aria-role
后朗读的内容不同系统之间会有差异 - 可设置的
aria-role
可参看 Using Aria中的Widget Roles
,部分role的设置在移动端可能无效。