
web无障碍
切图老法师
前端,却不限于前端。专职前端工程师,擅长大型项目前端UI架构设计,团队工程化改造。具有多家国内航司UI框架搭建经验,多个web无障碍项目实施经验。
展开
-
web无障碍实施细节(三)语音读取适配
提升屏幕朗读器对web应用的识别。1.分析视力障碍用户通常会使用屏幕朗读器,读取、操作web应用。1.1 屏幕朗读器屏幕朗读器软件会试图辨认和解释屏幕所显示的东西(或者,更准确地说,是标准输出的东西,无论是显示器还是其他)它的解释对用户会表现为朗读文本、声音图标或盲文输出设备。屏幕朗读器是一种辅助技术(AT),可用于帮助盲人、视力障碍者、文盲或学习障碍者,它通常和其他辅助技术——比如,屏幕...原创 2019-06-18 15:06:15 · 1459 阅读 · 0 评论 -
web无障碍实施细节(二)分离鼠标与键盘的focus轮廓样式
通常情况下,鼠标操作时,不需要出现focus轮廓样式,而键盘操作时,需要focus轮廓样式来确定焦点元素。1.分析为什么要 “分离鼠标与键盘事件的focus样式”?为了回答这个问题,首先,我们明确一点:浏览器是有默认的focus样式的,当可以focus的元素,处于focus状态时,就会显示outline轮廓。当我们设置了HTML tabindex属性的元素,鼠标点击就会出现以下情况:其实...原创 2019-06-18 15:03:50 · 551 阅读 · 0 评论 -
Web无障碍实施细节(一)跳到内容区
无障碍的具体实施过程中,测试了多家符合无障碍的国外航司。无一例外,均采用了“跳到内容区”的功能设计。1.示例法国航空达美航空亚航2.分析触发条件:在使用键盘切换焦点触发区域:焦点进入header区域触发状态:显示 “skip to content”(类似链接)操作:当焦点处于“skip to content”的时候,按enter选中,焦点跳过header区域,进入内容区。...原创 2019-06-18 15:00:44 · 502 阅读 · 0 评论