网页无障碍的终极指南

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

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

现在你可能会想，“这似乎是我想象中的商店的明显希望，克里斯汀。”

当然，这可能是真的，但你有没有想过你的网站吗?那些访问你的网站的人有残疾或局限性——这些人构成了你的目标受众，但可能难以访问你努力创建和提供的内容和信息?

解决这个问题的方法是制作你的网站，包括格式、结构、导航、视觉效果和文字内容可访问的到每一个人。换句话说，你需要分清轻重缓急网页可及性．

谁管理互联网上的网页可访问性?

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

答案是网页无障碍计划的万维网联盟(W3C)-这些人出版网页内容可及性指引(我们将在下面回顾)和相关内容。

为什么要关注网页的可访问性?

如前所述，网站可访问性使您的网站——以及网站上的内容——对所有访问者来说更加友好和易于理解。这包括那些有残疾和缺陷的人，例如:

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

．..所有这些都可能是永久的，也可能是暂时的。

通过关注你的网站的可访问性，你将提高每个访问者的用户体验(UX)，包括那些登陆你的网站的残疾人或有限制的人。你将向你的访客、潜在客户和客户展示你对他们的重视和关心——作为回报，这种投资将提高你的品牌忠诚度和宣传力。

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

如何实施无障碍网页?

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

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

事实上，在2017年和2018年之间，增长了181%提交联邦法院诉讼的数量。

例如，在吉尔诉温-迪克西案的判决，法院裁定网站可以构成“公共设施”美国残疾人法(ADA)．

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

因此，网站构成《美国残疾人法》涵盖的“公共设施服务”，换言之，网站应符合无障碍标准。

而在达美乐披萨诉吉列尔莫·罗伯斯案尽管使用了屏幕阅读软件，但盲人罗伯斯仍然无法通过达美乐的网站和应用程序订购食物。雷竞技苹果下载官方版

在这个案件中，美国第九巡回上诉法院的陪审团说:“……据称达美乐的网站和应用程序无法访问，这阻碍了人们访问其实体披萨店的商品和服务，而实体披萨店是公共场所。”

为了避免法律上的麻烦，或者干脆把访客拒之门外确保你的网站不会阻止任何人消费、浏览或获取你分享的任何信息．要做到这一点，最简单的方法就是遵守WCAG——下面让我们回顾一下这些准则和标准。

Web可访问性标准

最近的WCAG和标准状态四个主要原则在创建一个可访问的网站时要注意。在这四个原则中，你可以随时随地在你的网站上引用和应用网站可访问性准则。我们将在接下来讨论这些，但现在，让我们回顾一下总体原则。

1.可感知的

访问者必须能够感知或理解并意识到你的网站上呈现的内容和信息。

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

2.可操作的

可操作的网站可以在不干扰用户的情况下使用。所有访问者都可以利用网站的每一部分功能，从导航页面，到从菜单中选择链接，到播放和暂停视频和音频。一般来说，最容易操作的网站都是简单、直接的，并抛弃了任何可能妨碍残疾用户和限制用户的多余功能。

3.可以理解的

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

这个原则也适用于站点的结构。你的页面需要被直观地组织起来，并且你的导航在大多数页面上(如果不是全部的话)对访问者来说是可用的。

4.健壮的

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

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

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

无论哪种方式，WCAG都为上述四个原则中的每一个提供了几个可以立即实现的具体指导方针。让我们进一步分析这些指导原则，这样您就可以使用一些操作项来提高站点的可访问性。

要对这些指导方针进行更深入的审查，请参阅我们的完整网页可及性检查表．

可感知的网页可访问性指南

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

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

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

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

让你的内容易于看到和听到:对于有视力的个体来说，重要的是利用色彩对比这样每个人，包括色盲，都可以阅读你的内容，理解你想要传达的任何视觉信息。此外，用户应该能够调整网站上的任何背景音频或暂停音频播放。

可操作的网页无障碍指引

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

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

避免闪烁/闪烁的内容:根据W3C的说法，一秒钟内闪烁或闪烁超过三次的内容可能会引发癫痫。尽可能避免这种情况，或者至少事先提供一个警告。

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

易于理解的网页易读指引

使文本内容可读:在起草内容时，要考虑到所有的潜在受众。你的文章应该被尽可能多的读者理解，包括那些学习你网站母语的人。尽可能避免使用技术含量高的行话和地区俚语。

逻辑地组织你的页面和站点:在规划网站的结构和导航时，以最常见的方式放置导航链接和页面。这包括将导航放置在折叠的上方，最常见的是在页眉(和页脚)。

写有用的错误信息:没有人喜欢收到错误信息，所以提供一个明确的错误描述和指导，以帮助访问者纠正错误。

健全的网页易读性指引

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

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

Web可访问性工具

现在有各种各样的可访问性测试工具。W3C已经在他们的网站上汇编并分享了一份清单让你们更多地了解彼此并进行比较，我们做到了我们自己的工具推荐列表了。

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

波

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

你只需输入你想要评估的网站的URL, Wave就会突出显示你的网站不符合WCAG标准的地方，并为你的网站内容提供人工审计和审查。

图片来源

绝妙的映射器

DYNO Mapper由Indigo设计公司有限责任公司是raybet电子竞技一个网站地图生成器-意味着它使用网站地图显示后，进行内容清单和审计以及关键字跟踪网站的可访问性。

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

图片来源

WCAG合规审计

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

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

图片来源

SortSite

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

SortSite在你的网站上的一些主要的可访问性分类包括断开链接，兼容性，搜索引擎优化，隐私，网络标准和可用性。

图片来源

A11Y颜色对比可访问性验证器

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

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

图片来源

网页可及性的例子

这里有六个符合wcage标准的网站的例子，你可以参考它们的灵感，同时让你的网站更容易访问。

1.W3C

这似乎是显而易见的，但是还有什么比编写这些易访问性标准的组织本身更好的例子呢?W3C拥有一个可访问的网站应该具备的一切，包括结构良好的HTML，带有明确的标记来表示结构，颜色对比，简单的语言，以及当前选择的页面元素的焦点指示器。

图片来源

2.补习基础

Cram基金会专注于支持那些残疾人，这就是为什么拥有一个符合wcag标准的网站对他们来说很重要。

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

图片来源

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

美国疾病控制和预防中心(CDC)是一个政府网站，这意味着，它必须是可访问的。该网站包括一个页面，解释中心如何工作，以满足和超越第508节概述的无障碍标准。此外，该页面还解释了访问者如何与网站可访问性相关的任何评论取得联系。

该网站的标准导航非常简单易懂——他们还为访问者提供了几个不同的导航选项，这样他们就可以以最适合自己需求的方式在网站上进行操作。

网站上也有许多不同的内容类型，所以访问者可以以适合他们的格式(如书面、音频、视频)获得他们需要的信息。

图片来源

4.Healthmonix

Healthmonix为医疗系统和医疗集团提供基于云技术的支付解决方案。它的网站显示了对可访问性标准的严格遵守。导航布局明显直观，内容结构层次分明，清晰的颜色对比确保文本可读性。

图片来源

5.联合利华

联合利华拥有400个品牌，向全球逾20亿人销售消费品。出于这个原因，他们已经承诺确保他们的网站对所有的访问者都是可访问的，并且他们分享关于这一投资的信息专门的网站页面．

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

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

图片来源

6.金融的健身房

The Financial Gym是一个个人理财指导服务网站。它巧妙地使用了文本和图像的颜色，在坚持公司品牌的同时提供了充足的对比。raybet电子竞技布局和导航都足够直观，可以用屏幕阅读器和键盘导航。另外，主页上的视频不会自动播放，所以用户完全可以控制媒体播放。

图片来源

为每个人设计网站

虽然没有法律上的要求，但明智的做法是尽可能使您的网站具有可访问性并符合wcage。这将创造一个难忘和积极的用户体验，并帮助你提高客户忠诚度。

通过确保你的网站是可访问的，你只是在为那些对你的业务最重要的人做正确的事情——你的访问者和客户。请务必使用上面列出的工具，并回顾我们列出的例子，以获得灵感，使您的网站可访问。