2018.12.23 无障碍学习小计

本文深入解析ARIA(Accessible Rich Internet Applications)属性,包括aria-expanded、aria-hidden、aria-owns、aria-activedescendant等,阐述了它们如何帮助增强Web应用的无障碍性和用户体验,以及在DOM元素中正确应用这些属性的方法。

aria-expanded:指示元素展开或者折叠

aria-hidden:从无障碍树移除元素及其子项,aria-labeledby和aria-describedby引用的元素除外

将DOM一些元素隐藏,可做如下的设置,也可以将为屏幕阅读器用户呈现的内容放在屏幕之外,aria-describedby引用隐藏的元素,添加aria-label(对辅助技术用户隐藏,隐藏的元素将不会出现在DOM树)

aria-owns:DOM元素作当前元素的子项或将现有子元素重新排列成不同的顺序,默认生成在原生项后(可进行菜单合并,可引用多个元素,通过其顺序排列)
aria-activedescendant表示相关的网页活跃元素具有焦点,若父项被聚焦,会呈现给用户实际关联的焦点
aria-describedby:链接接元素作为原元素的无障碍说明,向用户显示额外说明文本,与arai-label相似可能引来不可见元素
aria-posinset and aria-setsize:列表等集合中的位置和兄妹关系 and 设置集合实际大小,如果整个集合中的大小不能由DOM确定,可使用延时渲染(render)

转载于:https://juejin.im/post/5c1fa2f3f265da61273d6115

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值