无障碍设计是一种能容纳所有人的设计，它特别关注那些有残疾和局限性的人。我们将可访问性融入到我们周围的世界中，从封闭字幕到遏制削减．
到那个时刻无障碍网页但是，我们有更多的工作要做。根据最近对屏幕阅读器的调查60％的受访者认为，自上年以来，总体网络可访问性仍然相同或遭到恶化。
好消息是，在后端拍raybetapp摄了一些额外的护理，可以对辅助技术的用户可以访问任何网站屏幕阅读器．通过投资于网页可访问性，你不仅可以确保每个人都有一个积极的用户体验，你还可以向你的访问者表明你关心对你的内容的平等访问。这一切都从查看站点的底层HTML开始。
在本指南中，您将了解如何构建与辅助技术配合使用的网页的基础知识 - 我们将审核六个方面的HTML，使其成为可能。对于那些不熟悉的网络开发，我们建议首次审查我们的HTML，CSS和JavaScript简介以及我们的HTML完整指南在继续之前。
语义HTML
HTML - 以及其同伴风格语言，CSS - 是灵活的。如果要构建某种类型的页面，可能会有多种方式与HTML写入HTML并使用CSS进行样程。但是，在访问可访问性时，并非所有HTML元素都是相等的。
在编写网页时，单一的最佳方式使它们可访问是使用语义HTML。语义HTML是HTML代码，它说它所做的 - 换句话说，标签本身传达元素的目的。语义上丰富的元素包括< >按钮那< >形式那
考虑下面的示例。在这里，我们有两个按钮元素，至少对人眼，看起来相同：
看笔按钮和div由克里斯蒂娜百科（@hubspot.)Codepen.．
但是，如果您揭示了底层的HTML，您将看到第一个元素是一个< >按钮元素，第二个是一个 另一个例子：下面，我们有两个列表。但是，第一个使用语义 看笔ol vs. div.由克里斯蒂娜百科（@hubspot.)Codepen.． 虽然语义标签和非语义标签之间的区别对正常用户来说可能不重要，但它对那些使用屏幕阅读器的用户来说非常重要，原因如下: 首先，语义HTML告诉屏幕阅读器用户他们正在查看的内容。语义< >按钮元素告诉屏幕阅读器该元素将被单击以执行某些操作，而 其次，语义元素具有自己的键盘辅助功能内置，不需要额外的工作。这< >按钮元素让用户用Enter/Return键“点击”元素，然后用Tab键关注它。但事实并非如此 最后，许多屏幕阅读器通过让用户在相同名称的标记(例如H2s)之间跳过来帮助用户导航页面，或者聚合所有相同的标记以更容易地扫描页面的内容。所以，很明显为什么用得最多 总结，避免使用泛型创建特定的交互元素 如果你是一名营销人员，你可能听说过搜索引擎优化中的替代文本或“替代文本”。Alt文本告诉搜索引擎爬虫您的图像的内容，并且是一个机会提供更多的信息，以在serp中排名更高。 然而，alt文本的最初目的是为那些使用屏幕阅读器的人以及那些因为任何原因(例如，低视力，连接不好，或源代码链接中断)无法看到你的图像的人添加上下文。当屏幕阅读器遇到替代文本时，它只是将其读取给用户。浏览器也可以设置在屏幕上显示替换文本来代替图像。 图像替换文本并不难实现。在代码中，只需放置alt.内部的属性 如果映像缺少alt.属性，屏幕阅读器将读取图像文件名，标题属性如果存在或完全跳过图像。所有这些结果都可以防止用户完全访问您的内容，因此添加是很重要的简洁，明确的Alt文本对所有无装饰性 对于HTML文件中的装饰性图像，那些添加了视觉样式但对理解页面内容并不重要的图像，包括alt.属性，但将值保留为空。这告诉屏幕阅读器一个图像存在，但对阅读器并不重要。它阻止屏幕阅读器读取图像文件名或标题属性。 注意，装饰图像可以更好地实现为CSS背景图像而不是您的HTML的一部分。 当被视为用户登陆网页时，他们的眼睛绕着页面划分寻找所需内容。但是，屏幕阅读器以线性方式处理页面 - 它在HTML的顶部开始，逐个读取每个页面元素。 为了帮助屏幕阅读器用户更好地了解您的页面，它有助于以有用的方式构建您的内容。 这意味着两件事：首先，使用语义html标记分段为页面的不同区域。例如： 其次，逻辑上逻辑顺序。通常，访客期望您的标题和导航最初，然后是<主要>内容，后跟你的页脚。里面<主要>，将标题放在降序上，并不跳过标题级别（即不要放置一个< h4 >元素直接位于< h2 >没有A的元素< h3 >之间）。 结构良好的语义HTML帮助屏幕阅读器用户更好地理解页面布局。它还可以让他们预览部分，并在不同的内容区域之间跳跃，类似于有远见的读者浏览网页的方式。这种HTML结构比一堆泛型更容易导航 这是写入更多可访问的HTML的快速获胜 - 您网站上的每个页面都应包含郎（语言）属性放在开放内标签。它将页面的主要语言标识给浏览器、搜索引擎、翻译软件和屏幕阅读器。雷竞技苹果下载官方版 添加你郎属性如此： 如果您的页面上有外语单词的实例，则可以放置郎在任何其他标记内部的属性，例如< p >或者一个，表示临时语言更改： 本文档的语言是英语，如上面的HTML标签所示。 我们还可以使用lang属性来指示异常单词，如 salut 或 hallo 。 Este párrafo está en español. 对于屏幕阅读器，则郎属性告诉文本到语音功能如何发出页面上的单词。如果是错误的郎使用价值，访问者将听到您的页面读，最佳繁重。这就是为什么检查所有页面是否设置为合适的语言是一个好主意。 在设计更好的可访问性时，我们希望在用户在页面上采取特定动作之前通知用户期待的内容。用户可以采取最常见的操作是单击不同页面的链接 - 在用户执行此操作之前，他们应该知道他们在没有任何其他上下文的情况下从链接文本开始的位置。 为实现这一目标，写入链接文本可充分描述它引导的位置，并且是来自其他链接文本的唯一。考虑以下两句： 虽然读取这些句子的人们将知道这两个链接中的两种链接如何，问题是屏幕阅读器用户可能会在页面上提取所有链接的列表，并从此列表中选择一个。读取示例1中的链接文本的人在隔离中读取链接文本不知道它引导的位置。另外，如果有多个链接读取“点击此处”，如果这些链接是不同的，那么它不明显。 另一方面，它从示例2中的文本清楚地看出，我们链接到我们的Web Accessibility Guide。 可访问的富有互联网应用程序套件的Web标准缩写为Aria，是一组标准，可以使用户界面控制更易于使用辅助技术。 ARIA文档概述了如何使用所调用的HTML属性aria角色，它指定了特定交互元素或屏幕阅读器用户的函数，用于屏幕阅读器用户，他们可能无法在视觉上掌握元素的目的。aria角色最好使用 有大多数页面元素的aria角色．例如，要指示列表包含导航链接，可以使用ARIA角色导航： 咏叹调是一个复杂的可访问性主题，本身就是完全坚持aria指南，我们建议咨询完整的文档或者咨询无障碍专家。 实施上面的措施后，尝试通过页面通过可访问性测试工具．这是一个可访问性检查员得到了网站可访问性倡议的认可，该倡议将您的网站以0到100的等级进行评分，并列出您可以解决的任何违反可访问性的行为。 与Web设计的许多方面一样，可以从建筑过程的开始，而不是事后考虑的可访问性。从一开始实现可访问的最佳实践将保存您以前稍后会改进页面。 然而，在最基本的层面上，网页只是文本文档，可以根据需要重新配置。通过一些额外的调整和一些可访问性检查，您将快速改善您的访客的浏览体验需要它。在那之后，转移到其他相关的内容相关的更改，帮助您的访客． 每个人都应该在线访问公共信息。要使网络成为一个更好的地方，从您自己的网站开始。
最初发布于2021年3月5日早上7:00:00,2021年5月24日更新 话题：（已订购列表）标记，而第二个以泛型标记格式化：
元素表示它包含的元素是编号列表的一部分。自从
图像alt text.
标签如下所示:
你页面上的标签。你的替代文本应该直接描述图像的内容。可以包含一两个关键字，但要避免关键字填充，这会阻碍访问。
结构良好的HTML
和< ul >分别。嵌套列表项的使用<李>标签。
HTML Lang属性
< html lang =“en”>
<！ - 页面内容的其余部分，英文 - >
< html lang =“en”>描述性的超链接
咏叹调的角色
< ul >
< / ul >
< / div >可访问性从您的HTML开始
相关文章
