今天的术语是可访问性 web— en mi opinión, 一个被误解和误用的方面, 最常见的, del diseño web. El error común 可访问性是专为残疾人设计的. De hecho, 人人受益于可访问的内容 通过在不同的平台或不同的方式访问可行的内容，你的受众将会增加, 因为他们可以更少地使用你的内容.

不幸的是，许多Web开发人员不使其内容可访问 y no siguen las pautas de accesibilidad web; por lo tanto, 许多人在尝试使用他们的设计和享受内容时遇到了不必要的困难. 在极端情况下，某些用户组可能无法有效地使用本网站。.

对于任何开发人员来说，构建可访问的内容应该是次要的。, 内容创建者, 像斜坡的考虑, 楼梯和电梯是为建筑师设计一个新建筑.

让我们仔细看看幕后的情况，以及为什么这么多开发人员似乎无缘无故地忽略了Web可访问性标准。.

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

可访问的内容是 人人可使用的内容. 我们不了解用户如何访问我们内容的所有方面, 所以我们必须设计与无障碍从一开始就考虑.

正如我之前所指出的, 这与残疾人无关, 近似约占世界人口的15%. En la vida real, 用户最终往往没有按照开发过程中预期的方式消费内容并与设备进行交互. 在许多司法管辖区，由于法律原因，也需要可访问的内容. Lee “为您的组织开发Web可访问性业务案例时的法律和政策因素“获取关于可访问性遵从性的其他信息.

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

听不清. 3.6亿人世界各地都有听力障碍. 音频内容必须有文字记录，视频内容必须有字幕.
看不清. 2.85亿人据估计，全世界有3 900万人失明，246人视力低下。. 视障用户使用屏幕阅读器(使用合成语音阅读内容), 盲文设备(屏幕内容显示在盲文屏幕上，用户可以使用屏幕按键导航和与设备互动)或对比度模式.
阅读障碍患者. 阅读障碍患者阅读和理解内容有困难, especialmente, por ejemplo, 正文或全部大写.
**遭受身体上的限制.**并非所有人都能使用所有设备. Por ejemplo, 内容导航必须不仅对鼠标用户可用, 但也适用于不会使用鼠标的用户.
使用移动设备. 让你的内容适合小屏幕. 允许用户放大或增大字体大小.

2. 确保良好的Web可访问性

人们使用非常不同的浏览和消费方式. 有些用户需要支持其他软件工具，以帮助他们更轻松地访问内容. Estas herramientas, 称为辅助技术, 从屏幕阅读器到触摸屏和指针.

但是，您的应用程序和支持技术需要相互交流. 并不是所有用HTML编写的内容在帮助技术中都能完全理解. 帮助将“技术语言”的内容“翻译”成更容易人类理解的语言, se han creado 可访问性API标准.

这个基本的Web可访问性图表应该能让您更好地了解辅助技术的工作原理。.

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

http://www.w3.org/TR/wai-aria/ 这将覆盖原来的角色. 通过添加属性将链接的含义更改为按钮 role ="button". 这样，屏幕阅读器将把它作为一个按钮而不是一个链接来阅读。. 什么更合适.

简而言之，ARIA属性:


  
    提供或增强非语义或语义元素的语义;
  
  
    确保动态(实时)内容保持可访问性.
  
  
    提供描述已定义“设备”类型的角色(菜单), elemento de árbol, control deslizante, 进度计, etc.).
  
  
    提供描述网页结构(标题、区域和表格)的角色.
  
  
    提供状态 widgets (选中，有弹出窗口，等等。.).
  
  
    提供用于描述拖放源和目标的拖放属性.
  


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

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

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


  
    标记不同的状态:启用、禁用、只读.
  
  
    在接收到焦点/步骤状态时标记元素.
  
  
    在每个选项元素获得焦点/步骤状态时标记它.
  
  
    当只有文本被放大到200%时，确保内容保持可读性
  
  
    确保有 足够的对比度 在文本和背景之间. 这有助于中度视力低下或在极端光线条件下使用设备的人, por ejemplo, 暴露在阳光直射下或在昏暗的屏幕上, 阅读内容.
  


另一个例子可能是选择一种颜色来描述一个状态。. 以下是设计部分时需要考虑的要点。, 用户可以选择一种颜色:


  
    有些人很难区分某些颜色。. 所以绿色并不意味着绿色为你所有的访客。. 要解决这个问题，请为每种颜色添加一个描述，详细说明其用途。.
  
  
    在获得焦点/步骤状态时标记每个元素.
  
  
    确保元素之间有足够的空间，以便每个元素都能被轻松激活, por ejemplo, 在具有较小取景器的设备上.
  


3. 可访问性测试:从何处开始?

No hay una sola forma 检查并确保网站内容完全可访问. 需要多种技术来验证和解决可访问性问题. Puedes empezar por definir problemas, soluciones y prioridades.

定义问题

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

Mal ejemplo: 用户不能在页面上使用键盘.

Buen ejemplo: 不能在主菜单中使用键盘导航.

坏的例子会导致一个案例，将很难在短时间内结束。. 可以从评论区开始讨论若干议题。, 因为票的标题太通用.

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

优先处理Web可访问性问题

优先次序很重要，因为它们确定了必须首先解决的问题。. 例如，WCAG被划分为: 三个层次的一致性: A, AA, AAA, 这意味着你必须从最低水平A开始, 但这并不意味着AA和AAA级仅仅是“令人愉快的”。. 所有级别都很重要, 重要的是不要优先考虑假设A级就足够了.

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


  
    Crítico -阻止用户使用应用程序的问题. 没有可用的解决方案.
  
  
    Mayor -使应用程序的使用变得困难和/或误导的问题, 但不妨碍用户完成操作的能力.
  
  
    Menor -令人烦恼的问题, 但不困难的使用, 或者对应用程序进行改进.
  
  
    Info -不坚持最佳做法. 改进的一般性建议.
  


Soluciones

没有指导方针——我指的是 WCAG, Sección 508 o ADA -为您提供技术代码方面的直接解决方案，以了解如何解决特定问题. 只定义预期的行为. Sin embargo, WCAG还定义了测试过程，以帮助理解如何重现问题，并且有一个WCAG Automated Monitoring社区组。, 一个以开发为重点的W3C社区 reglas 可靠的自动化和半自动网页可访问性测试.

Un ejemplo para WCAG G4技术 (“允许内容停止并从停止的地方重新启动”):

测试过程

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


  使用网站或用户代理提供的机制来暂停移动或移动内容.
  检查移动或流离失所是否已经停止，而不是自行重新启动.
  使用提供的机制重新启动移动内容.
  检查移动或流离失所是否已从停止的地点恢复.


预期结果

No. 2 y No. 4 son verdaderas.

正如我们所看到的，没有技术解决方案，但是定义了预期的行为。. Cómo los web开发人员 这完全取决于他们.

Web可访问性指南和W3C标准

遵循基本的Web标准应该是您的起点:


  
    最常见的是 Web内容可访问性指南 conocido como WCAG. WCAG 2.0是一个稳定的参考技术标准，有12条指导方针。 4项原则:可感知、可操作、可理解和健壮性. 对于每一种模式，都有可验证的成功标准。 三个等级:A, AA和AAA.”_
  
  
    WCAG 2技术.0 是Web内容作者的全面指南.
  
  
    W3C媒体可访问性用户需求 -本文件列出残障人士在使用网站音像时可能具备的无障碍要求。.
  
  
    《欧博体育app下载》 CVAA分为两个大标题或部分. 第一章讨论通信接入问题，使残疾人能够充分使用宽带产品和服务. 《欧博体育app下载》第二章, 开辟新的途径，方便残疾人在电视和互联网上观看视频节目.
  
  
    Sección 508 -适用于所有联邦机构开发的信息和通信技术(ICT)的无障碍要求, procuran, 保持或使用电子和信息技术.
  
  
    第二章下的网站可访问性 美国残疾人法案 (ADA) — Allí, 了解《欧博体育app下载》第二章的非歧视规定如何适用于州和地方政府网站.
  


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

以下是一些基本的和基本的控制点，可以帮助你从一开始就使你的网站内容更容易访问:


  
    Valida tu HTML. 确保HTML结构没有错误, 因为辅助技术在解释页面内容时可能会遇到困难.
  
  
    仅使用键盘进行测试. 确保所有可执行元素仅可通过键盘访问. Además, 你应该能够使用键盘执行所有操作, por ejemplo, 发送表格.
  
  
    使用可访问性验证工具和验证器进行测试. 使用工具来分析和验证可能的可访问性错误.
  
  
    动态内容. 通知屏幕阅读器动态变化，例如:. 当搜索结果发生变化时.
  
  
    不要依靠颜色来描述意义. 在描述中使用颜色，例如:. [黄框]警告.
  


不要删除焦点描边. 这是一个通常使用CSS属性删除的特性。 outline: 0; 请勿这样做，因为键盘用户会在页面上迷失方向。. 您可以考虑为非键盘用户取消焦点方案, pero siempre 为键盘用户提供一种方法方案.


  
    Mensajes de error. 始终告诉用户如何纠正错误. 不要只是说这些数据是无效的。.
  
  
    表格顺序. 确保基于表格的导航遵循图形用户界面中的约定. 至少，应该遵循应用程序的默认语言读取地址。. En inglés, por ejemplo, 阅读顺序是自上而下的, de izquierda a derecha; en árabe es de arriba a abajo, 从右到左.
  
  
    Zoom. 在将文本放大200%的同时，确保页面内容保持可读性.
  
  
    禁用图像. 你还能轻松地使用这个页面吗?? 是否为所有图像提供替代文本??
  
  
    Lector de pantalla 测试你是否可以使用至少一个屏幕阅读器来阅读和浏览内容, por ejemplo, VoiceOver, Windows Narrator或NVDA.
  
  
    高对比度模式. 在切换到高对比度模式时检查内容是否清晰.
  
  
    字体大小. 确保页面上的字体大小不小于10px.
  


4. Web可访问性的常见错误

最常见的错误是 在开发之前不确定可访问性需求. 不幸的是, 可访问性将成为开发的一部分, 实施解决方案将是最困难的.

下面列出了开发人员在实现可访问性时最常犯的一些错误:


  
    没有导航能力 通过使用内容 sólo un teclado.
  
  
    CSS schema属性的错误使用 在大多数情况下，使用 outline: 0;，这意味着每个可处理元素周围的轮廓不再可见。. **No utilices outline: 0; o outline: 0! Important; **. 用户在浏览内容时将失去查看当前聚焦的项目的能力, 除非有其他选择, por ejemplo, 使用CSS属性 border.
  
  
    Perdiendo foco 当前元素的元素，例如，由于DOM操作或方法的使用 blur(). 这种情况经常发生在单页应用程序中.
  
  
    没有针对屏幕阅读器用户的通知 改变的东西, 例如:通过XMLHttpRequest API下载了内容，并处理了新的用户界面更改。.; pero el usuario no ha sido notificado. 这种情况经常发生在单页应用程序中.
  
  
    不可访问的日期选择器. 在许多情况下，使用不可访问的日期选择器. 用户无法使用键盘浏览日历选项.
  
  
    使用扩展 que pretenden 自动修复辅助功能问题. 仔细使用它们并检查结果. 滥用它们会带来更多的问题，而不是解决方案.
  
  
    **添加到属性 tabindex 索引号大于0的元素. 使用的目的 tabindex 索引大于0主要是为了“纠正”导航路径。. Sin embargo, 考虑对HTML结构进行重大修改，以实现导航的自然路径. Manipularlo使用 tabindex 可能导致维护问题，以及不可预测的导航路径.
  
  
    错误的头层次结构. 不幸的是, 仍然经常看到头层次结构没有正确构建, por ejemplo, 
,  y . 屏幕阅读器用户使用标头来浏览部分，不正确的结构令人困惑, 因为很难理解的背景.
  
  
    缺少高对比度支持. 有些人在高对比度模式下使用他们的软件. 确保你的内容是可感知的.
  
  
    使用不可访问的验证码解决方案. 不幸的是，所有已知的验证码，对我来说是不可访问或非常难以使用。.
  
  
    过多和/或不间断的动画. 自动播放视频、广告或图片转盘可能会让人分心.
  
  
    大块文本. 压缩成非常大的块的文本，没有空格、逗号或句号. 很难读. 分裂成更小的块, 更多段落和副标题有助于整理文本内容.
  
  
    Problemas de zoom. 当内容被放大到200%时，确保内容保持可读性和可导航性.
  
  
    依赖于颜色. 通常情况下，元素的状态仅由颜色表示。, por ejemplo, un estado de advertencia está marcado sólo por una viñeta amarilla; este color no se percibe de la misma manera para las personas daltónicas.
  
  
    可点击/触摸的小目标. 可点击/获取的区域通常太小. 让它变大可以让用户更轻松地激活它们.
  


但是我怎样才能提高Web的可访问性?

定义问题是一件事. 固定是非常不同的，通常并不像看起来那么容易。. 这是因为可访问性API实现不是恒定的, 有时我们需要找到解决方案，甚至接受这样一个事实:当我们试图解决问题时，有些东西不会工作。.

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


  
    W3C商标验证服务 —只是为了确保HTML内容没有错误. 如果HTML结构有错误, 然后输出是不可预测的，不能正确处理, 特别是对于不同的 辅助技术.
  
  
    http://www.w3.org/WAI/ER/tools/ —帮助您确定网页内容是否符合可访问性指南的在线程序或服务列表.
  
  
    Y mi herramienta, ASLint http://www.aslint.org/，帮助您查找辅助功能问题.
  


永远记住，没有辅助工具 可以取代手动测试, 因为并非所有场景都可以完全自动化, por ejemplo, 检查元素的亮度对比与 position: fixed;.

专注于阻止应用程序使用的问题, por ejemplo, 用户不能通过键盘浏览菜单.

为什么使内容可访问很重要

每个人都想尽可能广泛地传播他们的内容. 可访问性在这方面有所帮助, grandemente, 从触及更广泛的受众到改善所有用户的用户体验. Además, 可访问性不仅仅是, tradicionalmente, 可以被认为是残疾人. 无论是一个人在变老，并经历了伴随他的身体变化。, 有人在阳光明媚的日子里跑步，需要在手机上设置自动对比度, o un padre con las manos llenas de bolsas de compra que quiere enviar un mensaje de texto por voz; la tecnología accesible es la tecnología que todos los usuarios pueden usar de vez en cuando.

作为一个额外的好处, 积极的影响是完全符合WCAG标准的可访问内容2.0, 更容易被搜索引擎追踪和理解, 并且可以对网站的排名产生重大影响. 因此，可访问的设计可以为网站带来额外的流量.

最后，还有一些统计数据需要考虑:


  
    Más de 十亿人 世界各地都有某种残疾
  
  
    人口老龄化. Entre 2015 y 2030, 预计老年人的数量, de 60 años o más, crezca en un 56%, 从9.01亿到超过1亿.400 millones.
  
  
    通用设计是关键. 通用设计是指提供服务的广泛理念和实践, 所有能力的人都可以访问和使用的产品和环境.
  
  
    残疾类型: 残疾分为五大类, 包括视觉, la movilidad, el habla, 认知和听力.
  


我们都需要高质量的服务. Entreguémoslos也.