网站的可访问性-react文档网站的相关记录

1 .通过辅助技术来实现对页面交互的可访问性的支持。

web标准的三部分

1 .结构化语言标准html。
2 .表现化标准语言css
3 .行为化标准语言dom,es5,es6.

web标准

1 .可用性:产品是否容易上手,用户能否完成任务,从客户方面来看产品质量
2 .可维护性:系统出现问题时,能否快速定位问题。代码容易被人理解,是否容易修改和增强功能。
3 .可访问性:用户中那些视力受损的人,可以通过屏幕阅读器使用键盘命令给他们读来听。
4 .设备的兼容性:纯html,无附加样式,可以针对不同的设备重新格式化,只需要使用另一套样式表即可。
5 .网络爬虫/搜索引擎:搜索引擎使用爬虫,解析你的网页。语义化的html可以更快的被解析,从而知道那些才是重要的内容。

1.无论是残疾人士,还是正常人,都能听过用户代理来访问web内容。就是各种终端的适配。
2.考虑用户访问web内容时的环境限制。嘈杂,过暗,过亮。如果做到了就会在特定的领域内提高核心竞争力。

实现可用性,可访问性的方法

1 .逐渐强化你的网站,同时对支持性进行测试。运用渐进增强和平稳退化原则来开发网站。
2 .允许用户可以关闭问题的增强功能。
3 .提供相同内容或功能的替代版本。
4 .

10点提高可访问性的建议

1 .不要太过依靠颜色,人们普遍认为绿色是正确的,红色意味着错误。但是当我们把他当做唯一的沟通方式呢。会有4%的色盲受影响。
2 .不要阻止放大:maximun-scale=1.0:在亚洲,散光影响着一半的人,模糊的视觉影响着所有年龄和民族的人。除了可以让用户在移动设备上缩放之外,还记得要检查pc端上高达200%的放大特性。
3 .重视alt属性:alt属性是img元素的一个强制属性,如果alt的属性值是空的话完全有效,如果图像是装饰的或者没有必要的阐释内容,那么可以为空。
屏幕阅读器会告诉用户img是一个图像,其中alt的值告诉用户这个图片表达的内容。图像替换不仅仅是关于可访问性的。有时候,对于网络慢的用户为了提高浏览器的检验会禁止网页的图像。对于这些用户群体,你就需要记得给img的alt属性添加对应的属性值。a标签里面的title属性。
4 .给视频添加标题和子标题
5 .语义化等于可访问性,一定要为每个元素使用合适的语义标签。
6 .使用正确的标记

1. time-datetime:后者是以可选属性,可以帮助表示time的内容
2.ins 表示添加了一个文档,del 表示删除一个文档
3.a元素:链接一个文件或者打开一个新标签或者当前的链接。
4.button:触发一个动作的时候,当使用button标签时,有两件事需要考虑:如果button的内容不够明确(例如在关闭按钮中使用X),必须添加一个aria-label属性来解释器功能
5.input type='button',上一个能够获取更多的内容

7 .必要时使用role:
8 .选择合适的隐藏方法:还要查可读性,就是屏幕阅读器是否能读取内容

visiablity:类似于opacity:0,
display:none:从视觉中隐藏元素,他的原始空间丢失,下一个元素将取代他的位置。
h5:hidden属性,类似于display:none
aria-hidden:true:内容仅显示在浏览器中,但是通过技术不会传递给 用户。

9 .aria开发实践-设计模式和工具。

可访问表单

1 .增强可访问性,使用label
2 .label标签不会向用户呈现特殊的效果。他的作用是为鼠标用户改进了可用性,label标签内点击文本,就会触发此控件,当用户点击选中该标签的时候,浏览器会自动的将焦点转到和标签相关的表单控件上,不仅可以提供更多的页面结构信息,更容易的使用css对标签设置样式,对于有视力障碍的人,也有助于他们使用的屏幕阅读器。
3 .每个控件中的label for的值必须和input的id值相同,每个控件的id的值必须是唯一的。

告知用户异常

1 .如何显示错误的文案给屏幕阅读器

焦点控制:如何确保你的网络应用完全可以通过键盘来操作。

1 .键盘焦点和焦点边框
2 .定位到期望内容的机制:允许用户跳过之前的导航部分来帮助和加速导航
3 .编程式管理焦点

设置语言

1 .在页面中声明语言类型以让屏幕阅读器软件能够试用其来选择正确的发音设置。

设置文档标题

颜色对比

1 .确保页面上所有可读的文本都由丰富的颜色对比让低视力用户能够最大程度的可读

你可能感兴趣的:(网站的可访问性-react文档网站的相关记录)