Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

无障碍访问实践专题 1 - 前言 #44

Open
kangschampagne opened this issue Sep 22, 2018 · 0 comments
Open

无障碍访问实践专题 1 - 前言 #44

kangschampagne opened this issue Sep 22, 2018 · 0 comments

Comments

@kangschampagne
Copy link
Owner

@kangschampagne kangschampagne commented Sep 22, 2018

换了地方将近三个月的时间,学习了很多,总结也没有时间写,最近空闲了一点,就整理其中一个部分的专题吧。

第一篇前言呢,不会详细叙述一些做法,可以简单了解一下有什么,做什么用,后面的章节会有详细例子和解释。

无障碍访问其实一个很需要被关注的技术,因为它是对社会有益的,对整个网络生态是有益的,无论使用者是谁,web页面都是需要被所有人可访问的,特别是一些残障的人士,我们也需要服务于他们。因此很多网站都需要遵循 “网站内容无障碍指南” 里的一些规范或者措施,来设计一个有良好访问性的网站。腾讯网在 2012 年就加入了中国信息无障碍产品联盟,使用者都可以使用快捷键,去访问不同的页面,快速获取新闻等等的信息。

初识Web无障碍访问

WAI-ARIA (Web Accessibility Initiative-Accessible Rich Internet Applications) 指无障碍网页应用。主要针对的是视觉缺陷、失聪、行动不便的残疾人以及假装残疾的测试人员。
比如盲人眼睛看不到,其浏览网页则需要借助辅助设备一般都是使用读屏软件。
常见的读屏软件有:

  • 移动端:
    • Android: TalkBack
    • Android: Funtouch
    • iPhone: VoiceOver
  • PC端:
    • Windows: NVDA, JAWS
    • Chrome: ChromeVox
    • OSX: VoiceOver

ARIA

ARIA就是可以让屏幕阅读器准确识别网页中的内容,变化,状态的技术规范,可以让盲人用户也能无障碍阅读!

HTML中的一些ARIA

ARIA在HTML中由两部分组成,一个role,表示元素的作用;一个是aria-* 表示元素的属性或状态。

role值

role值 含义
alert 警告
alertdialog 警告框
application 应用
button 按钮
checkbox 复选框
grid 网格
gridcell 网格单元
group 组合
heading 应用程序标题
listbox 列表框
log 日志
menu 菜单
menubar 菜单栏
menuitem 菜单项
menuitemcheckbox 可复选的菜单项
menuitemradio 只能单选的菜单项
option 选项
presentation 陈述
progressbar 进度条
radio 单选
radiogroup 单选按钮组
regio 区域
row
separator 分割
slider 滑动条
spinbutton 微调
tab tab标签
tablist 标签列表
tabpanel 标签面板
timer 计数
toolbar 工具栏
tooltip 提示文本
tree 树形
treeitem 树结构选项

一些 aria-* 属性或状态

  • aria-label
  • aria-hidden
  • aria-pressed
  • aria-selected

还有很多,详细的可以看参考资料 1,刚开始的时候,或许单看文档会一头雾水,但是到了开发后期,你会渐渐的明白,这个文档的重要性,因为他规范了很多设备的读取方式,我们需要严格遵循。

一些 chrome test Tools

  1. Accessibility DeveLoper Tools
  2. aXe
  3. WAVE Evaluation Tool

参考资料

  1. Accessible Rich Internet Applications (WAI-ARIA) 1.1
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
1 participant
You can’t perform that action at this time.