网页可访问性

Tags
csshtmlwebwebapi
Created
Jul 29, 2016 1:47 AM

HTML 映射 https://w3c.github.io/html-aam/

关于 ARIA 的新规范:AOM,ElementInternals includes ARIAMixin

// 现在有个 API 能直接读取整个可访问性树

W3C 写的使用手册:https://w3c.github.io/html-aria

指南:https://w3c.github.io/using-aria/

原则:https://www.w3.org/WAI/fundamentals/accessibility-principles/zh-hans

对 HTML、SVG 语义化的补充:https://w3c.github.io/aria/

http://www.zhangxinxu.com/wordpress/2012/03/wai-aria-%e6%97%a0%e9%9a%9c%e7%a2%8d%e9%98%85%e8%af%bb/#ariaRole

实战:http://www.zhangxinxu.com/wordpress/2017/01/voiceover-aria-web-accessible-iphone/

// focusgroup 在一组可聚焦元素中使用箭头导航

需要功能: 将焦点限制在某个元素中,能去除这个限制并回到之前的焦点。

<dialog> 的 showModal 方法有这个功能(open 属性没有, show 方法没有),但是标签语义限制了使用场合 // 现在 button 支持 command, commandfor

关于用 API 限制焦点的讨论: “Expose a stack of blocking elements”

// firefox: -moz-top-layer: top;

需要功能: 将键盘焦点排除一个元素及子元素,避免键盘切换到屏幕外的焦点

display: none 可以将元素从tab tree中删除,但会破坏掉 GPU layer,这将导致我们的为动画所做的优化全部失效。

// aria-hidden="true" 从辅助工具的可访问数中移除

// tabindex: -1 允许通过 JavaScript 或点击聚焦,不允许通过 Tab 键导航。

// 透明, pointer-event:none,移出屏幕 不会破坏GPU layer, 但不会从tab tree中删除

// -moz-user-focus: ignore;  html无效?

// inert attribute:chromium bug v60 支持, firefox 81 支持

SuperMade with Super