du jour这个词是 网页可及性在我看来，这是网页设计中最常被误解和应用最差的方面之一. The 常见的误解 无障碍是专门为残疾人设计的吗. In fact, 每个人都受益于可访问的内容, 通过访问不同平台或以不同方式访问的可访问内容，您的受众将会增加, 因为他们可以在更少的限制下使用您的内容.

不幸的是，很多web开发人员 不让他们的内容可访问 and do not follow 网页可及性 guidelines; thus, 许多人在使用他们的设计和享受内容时遇到了不必要的困难. 在极端情况下，某些用户群体根本无法有效地使用这样的网站.

构建可访问的内容应该是任何开发人员的第二天性, designer, 或者内容创建者, 坡道的设计也是如此, 楼梯, 电梯是一个建筑师设计一个新建筑.

让我们仔细看看背后是什么，以及为什么这么多的开发人员似乎无缘无故地忽视了web可访问性标准.

1. 什么是“无障碍设计”?

可访问内容是 每个人都可以使用的内容. 我们不知道用户如何访问我们的内容的所有方面, 所以我们需要提前在设计时考虑到易用性.

正如我之前强调的，这与残疾人无关，他们占了大约 大约占世界人口的15%. 在现实生活中, 用户通常不会以开发过程中设想的方式消费内容和与设备交互. 在许多司法管辖区，出于法律原因，还需要提供可访问的内容. Read “为您的组织开发网页可访问性业务案例的法律和政策因素，以获取有关可访问性遵从性的其他信息.

在考虑用户可访问的内容时，请考虑以下场景:

• 听不清楚. 3.6亿人 全世界都有听力障碍. 音频内容应该有转录和视频应该有字幕.

• 看不清楚. 2.85亿人 在全球范围内，估计有3900万人失明，246人视力低下. 视力受损的用户使用屏幕阅读器(使用合成语音阅读内容), 可刷新的盲文显示(屏幕内容显示在盲文显示, 用户可以使用显示器上的键来导航和与他们的设备交互)或高对比度模式.

• 受阅读障碍影响. 患有阅读障碍的人在阅读和理解内容方面存在困难，特别是在阅读和理解方面.g.，对齐文本或全部大写.

• 遭受身体上的限制. 不是所有的人都能使用所有的设备. 例如, 通过内容进行导航必须不仅对鼠标用户可用, 但也适用于不能使用鼠标的用户.

• 使用移动设备. 为小屏幕调整内容. 允许用户缩放或增加字体大小.

2. 如何确保网页无障碍

人们使用不同的方式浏览和消费内容. 有些用户需要额外的软件工具来帮助他们更容易地访问内容. 这些工具, 被称为辅助技术, 从屏幕阅读器到触摸屏和头指针.

但是，您的应用程序和辅助技术需要相互通信. 对于辅助技术来说，并非所有用HTML编写的内容都是完全可以理解的. 为了帮助将内容从“技术语言”“翻译”为更易于人类阅读的语言, 额外的 无障碍API标准 已经被创建.

这个基本的网页可访问性图表应该能让你更好地了解辅助技术是如何工作的.

为了说明它是如何工作的，让我们看一个简单的代码示例:

http://www.w3.org/TR/wai-aria/)来覆盖原来的角色. 我们通过添加属性来改变按钮链接的含义 角色= "按钮". 这样，屏幕阅读器就会把它当作一个按钮，而不是一个链接. 哪个更合适.


简而言之，属性ARIA:


  

    
赋予或增强非语义或其他语义元素的语义;
  
  

    
确保动态(实时)内容仍然可访问.
  
  

    
提供描述已定义小部件(菜单)类型的角色, 树项目, slider, 过程表, etc.).
  
  

    
提供描述网页结构(标题、区域和表格)的角色。.
  
  

    
提供小部件的状态(已选中、已弹出等).).
  
  

    
提供描述拖放源和拖放目标的拖放属性.
  


什么是网页设计中的可访问性?

当你设计内容时，考虑两件事: 内容如何被感知，如何可操作. 让我们看一些例子来说明网页设计中的可访问性.

假设您要设计一个自定义的选择下拉元素. 以下是在设计元素时需要考虑的事项:


  

    
标记不同的状态:启用、禁用、只读.
  
  

    
当元素处于焦点/悬停状态时标记它.
  
  

    
当每个选项元素处于焦点/悬停状态时，标记它.
  
  

    
确保当只有文本被放大到200%时，内容仍然可读.
  
  

    
确保有 足够的对比度 在文本和背景之间. 它可以帮助视力中度低下的人或在极端光照条件下使用设备的人.g.，暴露在阳光直射下或在低亮度的显示器上，读取内容.
  


另一个例子是选择一种颜色来描述一种状态. 在设计一个用户可以选择颜色的区域时，需要考虑以下几点:


  

    
有些人在辨别某些颜色方面有困难. 所以绿色并不意味着对所有访问者都是绿色的. 要解决这个问题，请为每种颜色添加描述，以描述其用途.
  
  

    
当每个元素获得焦点/悬停状态时，标记它.
  
  

    
确保元素之间有足够的空间，这样每个元素都可以很容易地激活.g.，在具有较小视口的设备上.
  


3. 易访问性测试:从哪里开始?

没有 one way 检查并确保网页内容是完全可访问的. 为了验证和修复可访问性问题，需要使用多种技术. 你可以从 定义问题, Solutions, and 优先级.

定义问题

在处理可访问性问题时，总是尝试创造 每次问题一张票 标题要清晰. 这将简化对问题的理解，并有助于确定优先级.

不好的例子: 用户不能在页面上使用键盘.

很好的例子: 无法在主菜单中使用键盘导航.

坏的例子会导致一个很难在短时间内结案的案件. 关于多个主题的讨论也可以在评论区开始, 因为票的标题太笼统了.

这个很好的例子准确地指出了问题，并且只关注一件事:主菜单中的键盘导航.

优先考虑无障碍网页问题

优先级很重要，因为它们确定了必须首先解决哪些问题. 例如，WCAG除以 三个一致性级别: A, AA, AAA, 这意味着你应该从最低a级开始, 但这并不意味着AA和AAA级别仅仅是“有就好”.“所有的层面都很重要, 重要的是，不要认为只有A级就足够了.

However, WCAG级别(或任何其他指南)有时可能很难理解，为了简化它一点, 您还可以考虑以下优先级定义:


  

    
Critical —阻止用户使用应用程序的问题. 没有可用的变通方法.
  
  

    
Major -使应用程序使用困难和/或迷失方向的问题, 但不要阻止用户完成操作的能力.
  
  

    
Minor -恼人但不妨碍使用的问题, 或者可以对应用程序进行增强.
  
  

    
Info -不遵循最佳实践. 改进的一般建议.
  


Solutions

没有任何指导方针，我指的是 WCAG, 第508节 or ADA-会给你一个直接的Solutions，以技术代码的形式说明如何解决特定的问题. 它们只定义预期行为. However, 此外，WCAG还定义了测试过程，以帮助理解如何重现问题，并且有一个自动化WCAG监控社区组, 一个W3C社区，专注于开发可靠的 rules 对于网页可访问性测试，包括自动化和半自动化.

举个例子 WCAG技术 (“允许内容暂停并从暂停的地方重新开始”):

测试程序

在具有移动或滚动内容的页面上，


  

    
使用网页或用户代理提供的机制来暂停移动或滚动的内容.
  
  
检查移动或滚动是否已停止并且没有自行重新启动.
  
使用提供的机制来重新启动移动内容.
  
检查移动或滚动是否已从停止的位置恢复.


预期结果

No. 2 and No. 4是真的.

正如我们所看到的，没有技术Solutions，但是定义了预期行为. How web开发人员 执行它取决于他们.

Web可访问性指南和W3C标准

下面这些基本的web标准应该是你的出发点:


  

    
最常见的是 网页内容易读性指引 被称为WCAG. WCAG 2.0 is 一个稳定的、可参考的技术标准. 它有12条指导方针 4个原则:可感知、可操作、可理解、健壮. 对于每个指导方针，都有可测试的成功标准 三个级别:A, AA和AAA.”
  
  

    
WCAG 2的技术.0 对网页内容作者来说是一个全面的指南吗.
  
  

    
W3C媒体可访问性用户需求 -本文件载列残疾人士在浏览网页上的音频及视频时的无障碍要求.
  
  

    
21世纪通信和视频无障碍法案 - CVAA分为两个大标题或部分. 第一章涉及通信接入，使使用宽带的产品和服务对残疾人完全无障碍. 《欧博体育app下载》第二章开辟了新的领域，使残疾人更容易在电视和互联网上观看视频节目.
  
  

    
第508节 -信息和通信技术(ICT)的可访问性要求，适用于所有联邦机构的发展, procure, maintain, 或者使用电子和信息技术.
  
  

    
根据第II章的网站可访问性 美国残疾人法案 (ADA) -好了, 您将了解《欧博体育app下载》第二章的非歧视要求如何适用于州和地方政府网站.
  


网页可访问性测试:我如何知道我的内容是否可访问?

这里有一些基本的, 基本检查点应该帮助您使您的网页内容更易于访问从第一步:


  

    
验证HTML. 确保HTML结构没有错误, 由于辅助技术在解释页面内容时可能存在问题.
  
  

    
只使用键盘进行测试. 确保所有可操作元素只能使用键盘访问. 此外，您还必须能够使用键盘执行所有操作.g.提交表格.
  
  

    
使用易访问性测试工具和验证器进行测试. 使用扫描和验证潜在可访问性错误的工具.
  
  

    
动态内容. 通知屏幕阅读器用户有关动态更改，例如.g. 当搜索结果发生变化时.
  
  

    
不依靠颜色来描述意思吗. 使用颜色和描述.g.，[黄框]警告.
  
  

    
不去掉焦点上的轮廓. 这是使用CSS属性时经常删除的一个特性 大纲:0; 不要这样做，因为键盘用户会在页面上失去方向. 您可以考虑为非键盘用户删除焦点轮廓，但是 always 为键盘用户提供焦点轮廓.
  
  

    
错误消息. 总是告诉用户如何纠正错误. 不要只是说数据无效.
  
  

    
标签的顺序. 确保基于选项卡的导航遵循图形用户界面中建立的约定. 至少，它应该遵循应用程序默认语言的阅读方向. 用英语, 例如, 阅读顺序是从上到下, left to right; in Arabic it is top to bottom, 从右到左.
  
  

    
Zoom. 确保当文本放大到200%时，页面内容仍然可读.
  
  

    
关闭图像. 你还能以舒适的方式使用这个页面吗? 所有图像都有替代文本吗?
  
  

    
屏幕阅读器. 测试是否可以使用至少一种屏幕阅读器来阅读和浏览内容.g.、VoiceOver、Windows叙述者或NVDA.
  
  

    
高对比度模式. 在切换到高对比度模式时，检查内容是否仍然可读.
  
  

    
字体大小. 确保页面上的字体大小不小于10px.
  


4. 网页易读性的常见错误

最常见的错误是 未能在开发之前确定可访问性需求. 不幸的是, 后期的可访问性将是开发的一部分, 实施Solutions就越困难.

以下是开发者在执行可访问性时最常犯的一些错误:


  

    
没有导航能力 通过内容使用 只有一个键盘.
  
  

    
滥用CSS outline属性. 在大多数情况下， 大纲:0; ，这意味着每个可操作元素周围的轮廓不再可见. 不要使用 大纲:0; or 大纲:0 !重要;. 用户在浏览内容时将无法看到当前关注的元素, 除非有其他选择, e.g.，使用 border CSS属性.
  
  

    
失去焦点 从当前元素，e.g.，由于DOM操作或使用 blur() method. 这种情况经常发生在单页面应用程序中.
  
  

    
屏幕阅读器用户没有通知 有些东西已经改变了，e.g., 使用XMLHttpRequest API下载了内容，并呈现了UI上的新更改, 但是用户还没有收到通知. 这种情况经常发生在单页面应用程序中.
  
  

    
无法访问的日期选择器. 在许多情况下，使用不可访问的日期选择器. 用户无法使用键盘浏览日历选项.
  
  

    
使用扩展 这种说法 自动修复可访问性问题. 仔细使用并检查结果. 滥用它们会产生更多的问题，而不是解决问题.
  
  

    
添加到元素中 tabindex 索引号大于0的属性. 使用目的 tabindex 索引大于0主要是为了“纠正”导航路径. 但是，为了获得自然的导航路径，应该考虑更改HTML结构. 使用 tabindex 会导致维护问题和不可预测的导航路径吗.
  
  

    
航向等级错误. 不幸的是，它仍然很常见，但头层次结构没有正确构建，e.g., 
, 
, and 
. 屏幕阅读器用户使用标题来浏览各个部分，而不正确的结构会让人困惑，因为很难理解上下文.

  
  

    
缺少高对比度支持. 有些人在高对比度模式下使用软件. 确保你的内容仍然是可感知的.
  
  

    
使用无法访问的验证码Solutions. 不幸的是，我所知道的所有验证码要么无法访问，要么很难使用.
  
  

    
太多和/或不可暂停动画. 自动播放的视频、广告或图像会让人分心.
  
  

    
大块文本. 浓缩在一个非常大的单块中的文本，没有空格、逗号或点. 很难读懂. 分成更小的块, 更多的段落, 副标题有助于更好地组织文本内容.
  
  

    
缩放的问题. 确保当放大到200%时，内容仍然可读和可导航.
  
  

    
依靠颜色. 通常情况下，元素的状态仅用颜色e来表示.g., a warning state is marked only by a yellow bullet; this color is not perceived in the same way for colorblind people.
  
  

    
小的可点击/点击的目标. 可点击/点击区域通常太小. 让它更大可以让用户更容易地激活它们.
  


但是我如何提高网页的可访问性呢?

定义问题是一回事. 修复它是另一回事，而且往往不像看起来那么容易. 这是因为可访问性API的实现不一致，有时我们需要找到变通办法，甚至接受这样一个事实，即当我们试图解决问题时，有些东西根本无法工作.

在工具方面, 没有一种工具可以检查所有可能的组合, 但作为一个好的开始, 这些工具应该会有所帮助:


  

    
W3C标记验证服务 -只是为了确保HTML内容没有错误. 如果HTML结构有错误, 然后输出是不可预测的，不能正确处理, 特别是通过不同 辅助技术.
  
  

    
http://www.w3.org/WAI/ER/tools/ -一个程序或在线服务列表，帮助您确定web内容是否符合可访问性准则.
  
  

    
我的工具， ASLint http://www.aslint.org/，帮助您找到可访问性问题.
  


始终记住，没有辅助工具 可以代替人工测试，因为不是所有的场景都可以完全或完全自动化.g.，检查元素的亮度对比度 位置:固定;.

关注那些阻碍应用程序使用的问题.g.时，用户无法使用键盘在菜单中导航.

为何内容的可访问性如此重要

每个人都希望尽可能广泛地传播自己的内容. 可访问性在这方面有所帮助, 在很多层面上, 从接触更多的受众到改善所有用户的用户体验. Moreover, 无障碍并不仅仅适用于你传统上认为的残疾人. 无论是一个人正在衰老并经历伴随的身体变化, 有人在阳光明媚的日子里慢跑，需要在手机上自动调节对比度, 或者一个满手购物袋的家长想要通过语音发送短信, 无障碍技术是所有用户可能不时使用的技术.

作为额外的奖励，积极的影响是可访问的内容完全符合WCAG 2.0标准更容易被搜索引擎抓取和理解, 这对网站的排名有很大的影响. 因此，无障碍设计可以为网站带来额外的流量.

最后，这里有一些你需要考虑的统计数据:


  

    
超过 十亿人口 世界各地都经历着某种形式的残疾.
  
  

    
人口老龄化. 2015年至2030年, 世界上60岁或60岁以上的老年人人数预计将增长56%, 从9.01亿增加到1亿多.40亿年.
  
  

    
通用设计是关键. 通用设计指的是用于生产服务的广泛的思想和实践, products, 环境本质上是所有能力的人都可以访问和使用的.
  
  

    
残疾类型: 残疾分为五大类, 包括视觉, mobility, speech, 认知, 和听力.
  


我们都需要高质量的服务. 让我们把他们也送过去吧.