Web Accessitibility的最终指南

如果你要开一家服装店，你会希望它是受欢迎的每个人,对吧?

如果一个坐着轮椅的潜在客户来了，您希望他们能够在您的显示器周围移动，享受在您的产品之间的时间，而不必担心任何可访问性问题。你会希望他们拥有和一个没有轮椅的潜在客户一样的愉快的体验。

现在你可能正在思考，“这似乎是我想象中的商店，克里斯汀的一个非常明显的希望。”

当然，这可能是真的，但你有这个想法吗？网站吗?那些访问你的网站的残疾人或有限制的人怎么办?他们是你的目标受众，但可能在访问你努力创造和提供的内容和信息时遇到困难。

此问题的解决方案正在制作您的网站 - 包括格式，结构，导航，视觉和书面内容 -可访问的对每个人来说。换句话说，您需要优先考虑网页可及性。

谁在互联网上管理Web访问？

你可能想知道谁负责网页可访问性倡议，谁负责在互联网上执行指导方针?

答案是成员网络可访问性计划（WIP）的万维网联盟（W3C）- 这些人发表了Web内容可访问性指南（WCAG）（我们将在下面审核）和相关内容。

为什么你要关注网页的可及性?

如前所述，无障碍网页使你的网站及其内容对所有访问者来说更加友好和容易理解。这包括那些有残疾和限制的人，例如:

• 失明
• 低视力
• 学习障碍
• 认知障碍
• 耳聋
• 听力损失
• 语言障碍
• 身体残疾的

......所有这些都可能是永久性的或临时的。

通过专注于您的网站的可访问性水平，您将为您的每一个访客提供用户体验（UX），包括残疾人或限制的人在您的网站上降落。您将向您的访客，领导和客户展示您为个人而关心的人 - 以及回报，这种类型的投资将推动您的品牌忠诚度和宣传。

在这一点上，满足网页可访问性标准对你来说可能是个好主意——但真的是这样吗要求你的？

如何加强网页的可及性?

长话短说，没有任何可执行的法律与网站可访问性有关，除非你经营一个政府网站-在这种情况下，你必须遵守康复法案第508条指导方针。

然而，仅仅因为网页可访问性不是一个正式的法律并不意味着你的企业就会自动避免诉讼。有很多大公司因缺乏可访问的网站而被起诉的案例。

事实上，在2017年到2018年间，有增加181％在联邦法院提起的诉讼中。

例如，在GIL V.WINN-DIXIE决定法院裁定网站可能构成“公共住宿”美国残疾人法(ADA)。

这意味着，对于拥有实体店和网站的企业来说，他们的网站可以被认为是与其实体店位置高度集成的。因此，他们的网站可以被视为实体店的“门户”。

出于这个原因，网站构成了ADA所涵盖的“公共住宿服务” - 换句话说，网站预计会符合可访问性标准。

而在多米诺的披萨诉Guillermo Robles尽管罗伯斯使用了读屏软件，但他无法通过达美乐的网站和应用程序点餐。雷竞技苹果下载官方版

在这个案件中，美国第九巡回上诉法院的小组表示，“……达美乐的网站和应用程序被指控无法访问，这阻碍了人们访问其实体披萨专营店的商品和服务——这些都是公共住宿场所。”

为了避免法律上的麻烦，或者干脆把游客赶走确保您的网站不会阻止任何人消费，导航或获取您共享的任何信息。这样做的简单方法是通过遵守WCAG - 因此让我们接下来查看这些指南和标准。

Web可访问性标准

最新的WCAG和标准状态四个主要原则创建可访问网站时关注。在这四个原则中，您可以在您的网站上和尽可能在可能的情况下引用和工作的Web访问指南。我们将到达那些接下来的那些，但现在，让我们回顾整体原则。

1.感知

访问者必须能够感知或了解并了解您的网站上呈现的内容和信息。

请记住，“感知”并不一定意味着“用一个人的眼睛看” - 盲目或有低视力的用户经常使用屏幕阅读器软件雷竞技苹果下载官方版，将印刷文本转换为合成语音或盲文字符。

2.可操作的

可操作的网站可以在不以任何方式中扰乱用户的情况下使用。所有访问者都可以使用该网站功能的每个部分，从导航页面，从菜单中选择链接，播放和暂停视频和音频。一般来说，最可操作的网站都很简单，简单，并抛弃任何可能阻碍残疾用户和局限性的多余功能。

3.可以理解的

你网站上的所有内容——包括你的书面和平面设计内容——应该容易被访问者理解。混乱、冗长的语言不仅使你的典型访问者难以理解，而且也限制了那些有认知障碍和障碍的人，以及那些不使用你网站的主要语言的人的访问。

这个原则也适用于站点的结构。你的页面需要直观地组织起来，并且你的导航对于大多数(如果不是所有的)页面的访问者来说是容易使用的。

4.强大的

站点上的内容应该容易被所有访问者理解和使用，包括那些使用屏幕阅读器等辅助技术的访问者。这个原则可以归结为这样一种方式来编写HTML，即辅助技术可以在没有可视参考的情况下解析代码。

如何让你的网站更容易访问

在回顾了上面的原则之后，你可能已经意识到你的网站并不完全符合这些标准。或者，也许您通过易访问性测试工具运行您的站点，但没有得到最好的分数。

无论哪种方式，WCAG都为您可以立即实施的四个原则中的每一个提供了几种特定指导方针。让我们进一步解开这些指导方针，因此您可以使用某些动作项目来提高您的网站的可访问性。

有关这些指导方针的更深入的回顾，请参见我们的完整的网页无障碍检查表。

可感知的网页无障碍指引

提供文本选择:页面上的所有非文本项目——包括图像、视频和音频内容——必须有文本替代，以便视力正常的人能够理解它们。图像alt文本这是最常见的方法来满足这一原则，并且建议您在您的网站上为每一个非装饰的图像包含Alt文本。对于装饰图像，包括alt.属性，但留空，即:

这告诉屏幕阅读器存在一个图像，但可以忽略它。

提供消耗基于时间的媒体的替代方法：基于时间的媒体包括音频和视频内容。对于音频内容，最常见的解决方案是完整的录音文本。对于视频，使用与音频适当同步的字幕。这两种方法都有助于听力有限的用户。

以一种可适应的方式结构内容:这条指导原则意味着，以这样一种方式编写HTML文件:即使删除了页面样式，也不会丢失预期的信息和结构。例如,使用适当的标题、有序和无序列表元素，以及大胆的和斜体文本都传递信息，即使你剥离包装页面样式。

使您的内容易于看到和听到:对于观点的个人来说，重要的是利用颜色对比度这样每个人都可以读取您的内容并了解您想要传达的任何视觉信息。此外，用户应该能够在网站上调整任何背景音频或完全停止音频播放。

可操作的网页无障碍指引

通过键盘确保全部功能:不是每个人都能用鼠标。因此，网站上的所有功能都应该仅用键盘就可以访问。例如，tab键应该让用户在页面上的可选元素之间跳转，输入/返回键应该“点击”焦点中的元素。

为你的网站提供足够的时间:允许用户在合理的时间限制内阅读、观看和使用网站上的各种内容类型。如果你网站上的任何行动都有时间限制，用户应该被允许延长或取消它。这条指导原则也适用于可访问的下拉菜单:如果用户从鼠标中脱离菜单，最好在菜单消失前设置一个时间延迟，以防他们不小心悬停。

避免闪烁/闪烁内容：根据W3C，闪烁或闪烁超过三次的内容在第二次可以触发癫痫发作。尽可能避免这种情况，或者至少提前提供警告。

提供导航以帮助用户知道它们在哪里以及他们可以去哪里：清晰的页面标题、有意义的链接、键盘焦点指示器和适当的标题都向用户表明他们在您的站点上的位置，以及哪些元素是可点击的链接。

可理解的网页易读性指引

使文本内容可读：在起草内容时，请考虑潜在受众的全部范围。尽可能多的读者，您的写作应该很容易地理解，包括学习您网站的母语的人。尽可能避免使用高技术行话和区域俚语。

逻辑地组织你的页面和站点:当规划站点的结构和导航时，按照大多数人期望的方式放置导航链接和页面。这包括把导航放在折叠的上方，最常见的是在页眉(和页脚)。

编写有用的错误消息：没有人喜欢收到错误信息，所以提供错误的清晰描述和说明，以帮助访问者纠正他们的错误。

强大的Web可访问性指南

编写可以解析的HTML：辅助技术通常利用网页的HTML文件来将其内容转换成不同的格式。因此，页面的HTML代码应该写得很好。对于可访问性，这意味着在需要时使用开始和结束标记，并避免元素之间的重复id和相同HTML标记内的重复属性。

现在你已经了解了什么是网页可访问性，为什么它很重要，以及现有的指导原则，让我们来看看一些可以帮助你使你的网站更容易访问的工具。

Web辅助功能工具

现在有各种各样的可访问性测试工具。W3C在他们的网站上汇编并分享了一个列表为您了解更多信息并相互比较，我们有我们自己的工具建议列表也。

出于本指南的考虑，我们在下面突出显示了一些选项，以便深入了解这些易访问性工具所具有的功能。

波

WebAIM的WAVE提供了多种工具来帮助你评估你的网站的可访问性。它们提供了网站上不被认为是可访问的区域的视觉表示。

你只需输入你想要评估的网站的URL, Wave就会标出你的网站不符合WCAG标准的地方，并对你的网站内容进行人工审核和审查。

图片来源

绝妙的映射器

Dyno Mapper by Indigo Design raybet电子竞技Company LLC是一个站点地图生成器 - 这意味着它使用SiteMaps在进行内容库存和审核后显示网站的可访问性以及关键字跟踪。

该工具还集成了谷歌Analytics，允许对可识别区域进行深入分析，以提高可访问性。Dyno Mapper将为您测试所有类型的网站，包括公共，私人和在线应用程序。

图片来源

WCAG合规审计

Funnelback的WCAG合规审核员在审查您的网站(或网站组)时引用WCAG标准和指南。该工具主要关注与易访问性相关的各种影响和优先级。

这个审计是一个很好的选择对于那些没有工作在网页可及性的原因:1)它提供建议如何改善的部分还没有访问你的网站,和2),它为你提供了一个基准来衡量你的网站的可访问性——这是理想的随着你的网站的发展和变化。

图片来源

sortsite.

SortSite通过PowerMapper评估整个网站或特定网页的可访问性，只需点击一次。该工具使用1200个不同的指南和标准来确定一个网站的可访问性。

您网站上的一些主要类别的辅助障碍类别评论包括破碎的链接，兼容性，SEO，隐私，Web标准和可用性。

图片来源

A11Y颜色对比辅助验证器

为了使你的网站的颜色可访问，使用A11Y公司的A11Y颜色对比可访问性验证器。raybet电子竞技它可以显示你的网站或网页上的颜色对比问题。在该工具中，您可以选择通过URL或一组特定的颜色进行测试(通过使用它们的十六进制代码或颜色轮上的位置)。

只要该工具检测到颜色组合或对比中的错误，就会有关于如何修正它们以满足WCAG标准的想法和建议。

图片来源

网页可及性的例子

以下是符合WCAG标准网站的六个示例，您可以在使您的网站访问的同时参考灵感。

1.W3C

它似乎是显而易见的，但是什么比写这些可访问性标准本身的组织更好的榜样？W3C具有可访问的网站的所有网站，包括结构良好的HTML，具有清晰的标签，用于表示当前所选页面元素的结构，颜色对比度，简单语言和焦点指示。

图片来源

2.补习基础

CRAM基金会侧重于支持残疾人，这就是为什么拥有符合WCAG标准的网站对他们很重要。

他们的网站平衡了网页的易访问性和美观和品牌设计。明亮的品牌网站符合所有的WCAG颜色和对比标准，他们的导航在结构和颜色方面都是可访问的。

图片来源

3.美国疾病控制中心（CDC）和预防

美国疾病控制中心（CDC）和预防是一个政府网站 - 意思是，它需要访问。该网站包括一个页面，该页面解释了中心如何达到和超过第508节中概述的可访问性标准。此外，页面介绍了访问者如何与其Web访问相关的任何评论如何取得联系。

该网站的标准站点导航是简单且易于理解的 - 他们还为游客提供了几个不同的导航选项，因此他们可以在最适合其需求的方式围绕该网站操纵。

此网站也可提供许多不同的内容类型，因此访问者可以以适用于它们的格式获取所需的信息（例如，写入，音频，视频）。

图片来源

4。Healthmonix

HealthMonix利用基于云的卫生系统和医疗组的技术支付解决方案。其网站展示了令人印象深刻的依据，遵守可访问性标准。导航布局是明显且直观的，内容在清晰的层次结构中构建，并且清晰的颜色对比度确保了可读文本。

图片来源

5。联合国

Unilever拥有400个品牌，并将消费品销售到全球超过20亿人。出于这个原因，他们致力于确保所有访客可以获得他们的网站 - 他们分享有关此投资的信息专用网站页面。

该网站的可访问功能包括辅助技术和代码(例如，屏幕阅读器，文本到语音或语音到语音的软件，键盘模拟器，屏幕放大器，增强的用户界面和视觉样式)。雷竞技苹果下载官方版

联合利华的网站在颜色和对比度、布局和导航、浏览器支持、文本选择、音频和视频内容等方面也达到甚至超过了WCAG标准。

图片来源

6。金融的健身房

金融健身房是一个个人理财辅导服务，有一个可访问的网站。它巧妙地利用文字和图像的颜色来提供充足的对比度，同时坚持公司的品牌。raybet电子竞技布局和导航都足够直观，可以通过屏幕阅读器和键盘进行导航。此外，主页上的视频不会自动播放，因此用户可以完全控制媒体播放。

图片来源

为每个人设计网站

虽然没有合法要求，但它可以使您的网站和符合Wcag符合Wcag符合要求的方式是明智的。这将创建一个令人难忘和积极的UX，以及帮助您提高客户的忠诚度。

通过确保您的网站可以访问，您只需为您的业务大多数人的人做正确的事情 - 您的访客和客户。请务必使用上面列出的工具，并在使您的站点可访问时，查看我们列出的灵感示例。