Open FrankKai opened 5 years ago
developers quite often rely on JavaScript libraries that generate such controls as a series of nested
<div>
s or table elements with classnames, which are then styled using CSS and controlled using JavaScript,The problem here is that visually they work, but screenreaders can't make any sense of what they are at all, and their users just get told that they can see a jumble of elements with no semantics to describe what they mean.
为了解决这个问题,WAI-ARIA规范定义了一系列的附加的HTML attributes,从而增强semantic,也进一步增强accessibility。
关键词:Roles,Properties,States
定义了一个元素是is或者does。大多数被称作里程碑角色,很大程度上是复制了语义化的HTML5结构化标签的语义值。例如role="navigation"
(<nav>
)或者role="complementary"
(<aside>
),但是同样有其他的可以描述不同页面结构的,例如role="banner"
,role="search"
,role="tabgroup"
,role="tab"
等等通用的UI。
aria-required="true"
,指明表单输入需要输入有效值。aria-labelledby="label"
,允许你向元素传入一个ID,从而引用页面上的元素,这适用于<label for="input">
不能用的情况。可以直接复用其他地方的内容当做alt的内容。
<img src="dinosaur.png" aria-labelledby="dino-label">
<p id="dino-label">The Mozilla red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.</p>
aria-disabled="true"
。有一个很重要的点:WAI-ARIA不会影响webpage的结构,DOM等等,虽然这些属性可以当做CSS的属性选择器。
roles的定义:https://www.w3.org/TR/wai-aria-1.1/#role_definitions properties和states(所有aria-*属性)的定义:https://www.w3.org/TR/wai-aria-1.1/#state_prop_def
main
陆标。main
陆标应该作为顶级陆标。实现方式可查阅:https://www.w3.org/TR/wai-aria-practices/examples/landmarks/main.html
参加完第二届VUECONF 杭州之后,印象最深的还是勾三股四关于Web无障碍的分享,其中有几个关键概念WAI-ARIA,widget,role,props以及states值得深入学习,于是我从MDN找到了相关资料,会记录一些知识点,也会写一些自己的思考。
资料链接:https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics\