5 Aria 基础

2022-05-08  本文已影响0人  skoll

简介

1 .在html5之前的时候,最常见的就是一系列嵌套的div,带有class 使用css来制定样式,js控制行为.虽然这样的视觉上是可以的,但是屏幕阅读器对此感到一无所知,他只能告诉用户她看到一堆复杂的结构元素,且一点意义都没有
2 .aria属性不会对web页面有任何影响,除了让更多信息从浏览器暴露给无障碍api
3 .aria属性还能做css选择器,但是他们不会影响页面结构,以及DOM等。

role:角色

1 .定义这元素是干什么的,一些标志角色,其实只是重复了html5的结构元素的语义价值。所以说结构语义还是很重要的

1 .role='navigation'等于nav
2 .role='complementary'等于aside
3 .role='banner',search,tabgroup,tab,listbox等
4 .

properties

1 .通过给定一些属性到元素,让他们具备更多的语义
2 .aria-required="true" 这意味着元素在表单上是必填的

states

1 .用于表达元素当前的条件的特殊属性,例如aria-disabled=true,屏幕阅读器就会当这个表单禁止输入。
2 .状态和属性的差异之处就是:属性应用的生命周期中不会改变,而状态可以,我们会用js改变他们
3 .原来是这里来的:react的类型
4 .aira-live结合ajax,可以通知屏幕阅读器来获取一些动态变化的内容了

1 .off:默认值,不更新不会提醒
2 .polite:只有用户空闲的情况下提醒
3 .assertive:尽快提醒。如果改变多次,只会念出最后一个改变。
4 .rude:以打断用户操作的方式直接提醒

兼容性

1 .需要考虑的情况有点多

1 .aria规范太多了
2 .操作系统,浏览器,屏幕阅读器这三种组合差异有点多(caniuse网站可以查浏览器的兼容性)

2 .以后考虑ui组件,还要考虑无障碍访问这部分了,queryUI好像都支持

上一篇 下一篇

猜你喜欢

热点阅读