随笔分类 - 无障碍
摘要：无障碍用户双击表示选中，而正常用户单击表示选中，所以如果需要在无障碍用户双击时做些操作的话，可以使用click事件 例如： $('test1').click(function(){ $('btn').attr('aria-label','已选中') }); 此段代码表示在无障碍用户双击时给btn元素
阅读全文
摘要：最常见的无障碍缺陷是替代文本（标签）问题和焦点问题，其中焦点问题又大量集中在焦点冗余与焦点缺失上。 只要解决好标签问题和焦点冗余、缺失，互联网产品的无障碍化就成功了一大半。
阅读全文
摘要：误区一 障碍用户与常规用户的需求不一致，为百分百贴合障碍用户需求，需要给他们单独开发一个无障碍版本（e.g.阿里旺旺） 误区二 障碍用户获取信息的难度大，因此在考虑障碍用户需求的设计中应该尽可能提供详细的控件描述，以保证他们充分的获取信息（e.g.虾米音乐） 误区三 为了帮助障碍用户理解该如何操作自
阅读全文
摘要：本页主要罗列了双端的各种无障碍功能，其中TALKBACK和旁白被高亮显示，表达接下来只重点涉及读屏 Android平台无障碍功能 iOS平台无障碍功能
阅读全文
摘要：Android – TalkBack 单指触摸：聚焦到触摸的项目并朗读 单指左右滑动（轻扫）：聚焦到当前焦点项目的前一个或后一个元素，并朗读 单指向右滑动/左滑动：从上到下朗读/从下到上朗读 单指双击（屏幕任意位置）：激活当前聚焦的项目 双指上下/左右滑动：上下/左右翻页（以页为单位），需先聚焦到可
阅读全文
摘要：一、提供等效替代（文字或者语音来替代） 1.1图像的等效替代 移动端或Web端开发，都是用相应的文本信息等效替代图像。（为图像添加描述性信息，并不是文本越长越好） (1) 避免添加额外的、无意义、无价值信息的图像 (2) 避免使用图像来表现文本（也就是文字图片） (3) 为图像提供替代文本 (4)
阅读全文
摘要：参考文章 WAI-ARIA无障碍网页应用属性完全展示 翻译-盲人如何使用互联网的8个误区 WAI-ARIA 无障碍Web规范 Web 可访问性与无障碍最佳实践 Using ARIA: Roles, states, and properties Using ARIA: Roles, states, a
阅读全文
摘要：例如使用了 a 标签制作了按钮，如果不进行额外的优化，读屏软件在朗读时会读作"文字内容 链接"，但实际上该 a 标签是用作按钮使用，因此可以在标签上添加 role="button" 属性。此时，读屏软件会读作"文字内容 按钮"。 可以看到，读屏软件在朗读时会在结尾朗读出元素的属性，这也是无障碍优化中
阅读全文
摘要：哪些元素默认可以获得焦点 在html中表单元素、button、带href的a可以默认获得光标焦点，对表单元素设置autofocus=“autofocus”在页面加载完毕后可以自动获得光标焦点，除非有其它的方法修改了界面的焦点．比如通过focus() 方法修改页面的焦点．其他可以获得焦点的元素 可以通
阅读全文
摘要：盲人如何使用互联网的8个误区 误区1：屏幕阅读器读取链接标题文本 不试不知道，一试吓一跳，这居然是不正确的。很长一段时间里，我总是试图在链接上增加title文字以描述这个链接，目的是方便屏幕阅读器理解。现在我是知道了，屏幕阅读器压根就不会鸟title属性中的文字，这意味着为屏幕 阅读器用户添加额外信
阅读全文
摘要：radio <div role="radio" aria-checked="true" aria-label="单选2" tabindex="0">单选tabindex="0"</div> 这个div模拟了radio的功能，在平时读屏软件是分辨不出来的，但是加上role及aria-checked状态
阅读全文
摘要：ARIA使用规则一 如果你使用的元素( HTML5 )具有语义化，应该使用这些元素，而不应该重新定义一个添加ARIA的角色、状态或属性的元素。 浏览器的语义化标签已经默认隐含ARIA语义，像nav,article,button已经隐含ARIA的role="navigation",role="arti
阅读全文
摘要：设置获取无障碍属性值 为了跨浏览器兼容，总是使用WAI-ARIA属性解析来访问和修改ARIA属性，例如object.setAttribute("aria-valuenow", newValue)或者$('DOM').attr() 附图 点击查看大图
阅读全文
摘要：aria-***状态值 2020-0115修改 注意：aria-checked：true 读屏软件读已选中、aria-checked：false 读屏软件读未选中，aria-selected：true/false 同理 2020-0507修改 aria-checked：在ios上不读（6p） 202
阅读全文
摘要：role属性 当然并不是所有的HTML元素都具有对应的ARIA的role，下表列出了常用的标签元素对应的ARIA的role
阅读全文
摘要：ARIA是什么？ ARIA是W3C的 Web无障碍推进组织发布的可访问富互联网应用实现指南。WAI-ARIA是一个为残疾人士等提供无障碍访问动态、可交互Web内容的技术规范。是Web Accessibility Initiative - Accessible Rich Internet Applic
阅读全文
