网站的可访问性-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 .确保页面上所有可读的文本都由丰富的颜色对比让低视力用户能够最大程度的可读

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,941评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,397评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,345评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,851评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,868评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,688评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,414评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,319评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,775评论 1 315
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,945评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,096评论 1 350
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,789评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,437评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,993评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,107评论 1 271
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,308评论 3 372
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,037评论 2 355

推荐阅读更多精彩内容

  • 国家电网公司企业标准(Q/GDW)- 面向对象的用电信息数据交换协议 - 报批稿:20170802 前言: 排版 ...
    庭说阅读 10,986评论 6 13
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,661评论 18 139
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,247评论 1 41
  • 暗红的枯叶浮在青翠的草地上 你戴月而来 每一步都踏在我心上
    兹心非心阅读 203评论 0 5
  • 我从政也近四十年,说实话我没完全做到,但我悟出了一个领导者一定要做好“角色”,要正直无私秉公办事、清白做人,...
    明德经纶大学阅读 205评论 0 0