我们分析了1000万页。这是大多数ADA和WCAG 2.1遵从性失败的地方

关于网络可访问性的话题正在迅速上升，这已经不是什么秘密了。从2019年1月到2019年12月，数千起诉讼和数万封发给小企业主的请求信(但不仅仅是他们，参见多米尼斯最高法院的裁决)推动谷歌搜索符合ADA和WCAG标准的解决方案的数量增加了400%以上。

因此，随着这个话题的受欢迎程度呈指数级增长，作为行业领导者，我们在道义上有义务尽我们所能贡献尽可能多的数据，以帮助推动该领域向前发展。

截至今天(2019年12月)，accessiBe已经全面扫描、分析和修复了数万个网站。其中一些是我们的客户(今天是10,000个)，另一些是我们扫描、分析和补救的网站，作为培训我们人工智能的一部分。

总而言之，我们刚刚访问了1000万个分析页面，是时候传播一些知识并分享我们的数据了！

约85%的网站托管在美国和加拿大，15%在欧洲和亚洲。

约65%的网站是顶级域名(COM、NET、ORG等)。其他是第二级和第三级(io、co、app、xyz等)。

约1%的网站页面超过10万(我们在一个网站达到10万页面后不再统计它的页面)。

请注意：我们给了站点一个“更轻松的时间”，并不总是包括所有的WCAG故障。如果失败有点轻微，而且不会重演，我们就不会把它包括在结果中。

例如，如果“购物车”图标没有包含咏叹调标签/文本和适当的角色，我们就失败了。但是如果它出现了3次，并且在页脚中失败了一次，我们就通过了它。

我们正在寻找实际的、实用的辅助功能遵从性，使网站完全可以使用键盘、屏幕阅读器、其他辅助技术或工具，当然，还可以供各种残疾人士使用。我们不是在追求想象中的100%成功率。

此外，与常见的自动化测试工具(WAVE、AXE、Tenon等)不同，我们实际上模拟浏览器并使用AI来确定元素角色。这意味着，如果表单或图像不符合要求，但也是隐藏的，并且永远不会出现在视图中，我们不会失败。

下面，你会发现一张图表，总结了从1000万个网页收集的数据。这些数据细分了实现合规性的一些最重要的元素。

下面的条形图显示了扫描的所有页面不符合菜单、图像、弹出窗口等要求的百分比，您会明白的！

重要提示：在我们深入研究并解释每个类别之前，请注意，我们不会总是解释为什么某个类别或元素需要应用这个或那个行为或属性，只解释需求本身。这就是说，这篇文章将有一个结尾：)。

有多少网站失败：98%-几乎没有一个完全通过，即使是手动调整菜单可访问性的网站也是如此。

WCAG的要求：包含所有链接和菜单项的顶层元素(ROLE=“导航/菜单/菜单栏”)上必须存在等于“导航/菜单/菜单栏”(取决于菜单类型)的“NAV”标签或“角色”属性。

构成菜单项的链接上必须存在等于“menuitem”的“角色”属性。

用户可以使用Tab键导航到下一个元素，使用Shift+Tab组合键导航到上一个元素，并且必须使用焦点环(轮廓)轻松识别聚焦的元素。

用户可以使用键盘左右箭头导航菜单栏本身。当到达菜单末尾并按下前进箭头键时，导航应循环回到第一项。

用户可以使用Enter键和向下键打开下拉列表。还应通过将焦点放在菜单项上来打开下拉列表。

用户可以使用向上和向下箭头在下拉列表中导航，除非是故意关闭的，否则焦点绝不能在下拉列表中逃逸和循环。

用户可以使用Esc键关闭下拉菜单，键盘焦点必须返回到此下拉菜单的根菜单项。

与要求相关的重要说明：我们知道菜单的一些要求看起来像是吹毛求疵，对于WCAG的某些领域也是如此，但特别是对于菜单，它们非常重要。

想象一下，一个有运动障碍的用户嘴里叼着一个点击杆(因为他们无法与计算机交互)，试图用Tab键一个接一个地导航几十或数百个链接和下拉列表，而不能使用箭头跳过，也不能使用Esc关闭下拉列表。用户需要几分钟的时间才能找到他们正在寻找的东西。

我们的发现：我们发现几乎没有一个网站实现了与菜单相关的所有要求，这是一个大问题。

有些人使用Tab键导航，有些人甚至更进一步，在下拉列表中实现了Tab导航，但几乎没有一个允许用户使用Esc关闭下拉菜单，或者实现正确的箭头键导航。此外，很少找到合适的角色属性。

我们确实发现一些流行的CMS的流行模板，如WordPress、Shopify、Joomla、Magento、BigCommerce、Squaepace等，有时包含与菜单相关的内置辅助功能，但还远远不够。

WCAG的要求：所有图像都必须具有Alt属性(有些人称其为标记，尽管它实际上是一个属性)，该属性能够正确描述图像中的对象，如果图像包含文本(如典型的横幅)，则嵌入的文本也必须出现在alt属性中。

我们的发现：这个结果让我们大吃一惊。48%的网页中的图片，几乎一半，都有合适的Alt属性！我们预计的结果要低得多。我们不知道这样做是为了SEO还是为了可访问性(可能是SEO？)，但这两种方式都很好。

一些网站试图变得“聪明”，并将文件名设为alt属性。其他人甚至更“聪明”，去掉了文件名中的“-”和“_”符号，以创建看起来像是普通句子的东西。不幸的是，这并没有通过。附近的标题、自动生成的字符串和其他操作也不能通过。

为了测试“正确的”Alt属性，我们使用了O.C.R和IRIS技术来匹配所提供的Alt中包含的单词和图像中实际存在的对象和单词。

失败的网站有多少：89%-很少通过，即使是使用“可访问”的弹出插件和服务的网站也是如此。

WCAG的要求：当弹出窗口出现时，键盘焦点必须离开主页并落回弹出窗口的第一个可点击元素内。

在弹出窗口中使用Tab键导航必须循环回到到达最后一个元素并尝试向前移动时开始。

用户必须能够使用Esc键关闭弹出窗口，并且焦点必须返回到弹出窗口之前聚焦的元素。

我们的发现：大多数网站使用某种形式的弹出式插件，要么是嵌入到模板中的原始jQuery，比如jQuery UI Dialog和Fancy Box，要么是CMS插件，比如OptinMonster，或者是第三方服务，比如Zoom Analytics。其中一些服务实现了一些可访问性要求，但大多数没有。无论哪种方式，这意味着即使是那些确实考虑过可访问性的人，通常也只能凑合着使用基本的东西。

弹出窗口的最大问题是，一旦它们没有完全遵守，就会破坏网站的整个合规性级别。当弹出窗口跳出时，字面上会阻塞整个屏幕，使键盘用户对此无能为力。屏幕阅读器用户甚至不会知道弹出窗口的出现。完全遵守弹出窗口要求是非常重要的。

请注意：虽然有很多弹出窗口实现了Esc关闭，但实际上只有很少的弹出窗口正确地将焦点返回到先前聚焦的元素。

有多少网站失败了：71%失败了-29%通过了，因为一些CMS插件在这方面做得相当好。

WCAG的要求：所有字段都必须包括通过“id”和“for”属性或“aria-label”属性连接到字段的“label”标记。

必填字段必须包括两个视觉提示(Asterix*、文本或其他)，并且“aria-Required”属性等于true。

字段必须包括“aria-Invalid”属性以通知屏幕阅读器该字段当前是有效的还是无效的。此属性必须根据验证动态更改。例如，一个空的必填“name”字段必须包括aria-Invalid=“true”以指示它是无效的，但是一旦用户填满它，则更改为aria-Invalid=“false”。

当提交表单且存在错误时，必须将键盘焦点放到第一个无效字段，并且用户必须收到该字段问题的说明(包括视觉和屏幕阅读器)。

当表单提交成功时，应该使用警告元素或通过其他方式通知拥有屏幕阅读器的盲人用户。

我们的发现：我们发现，通常在像Shopify、Volusion和BigCommerce这样的现成的封闭系统中，平台或其流行的表单插件在确保表单可访问方面做得相当好。

尽管大多数其他开源平台，如WordPress、Magento和Joomla，情况非常不同。这些系统对更改和覆盖是开放的，虽然这对网站管理员有利，但对可访问性不利。网站管理员通常不会手动申请必要的合规性要求。

此外，我们还发现，即使表单是可访问的，并且大多数字段都得到了正确的描述，实际上也很少会向屏幕阅读器报告成功提交。有些人确实报告了提交失败，但主要是因为表单经常使用内置的HTML5验证(默认情况下是兼容的)，甚至不知道他们这样做了。

WCAG需要什么：必须是一个实际的“button”标记，或者，存在一个等于“button”的“角色”属性。

我们的发现：虽然大多数按钮确实符合第1条和第3条，但绝大多数按钮没有正确标记！

大多数网站使用“SPAN”、“DIV”或“A”(链接)HTML标记来创建按钮(不使用ROLE=BUTTON作为后备)。开发人员使用CSS更改这些标记的默认外观，并使用JavaScript单击事件更改其行为。

这样做会阻止屏幕阅读器正确读取“假”按钮，这也意味着默认情况下无法使用键盘单击它们。

在我们的研究中，几乎每个网站都包含这样的“假”按钮。标准的“button”标记几乎只与表单一起使用，很少作为独立按钮使用，很少使用“角色”属性作为屏幕阅读器的后备。

WCAG的要求：必须在文档中进行逻辑排序(例如，“更多阅读”必须位于章节的标题和段落之后)。

如果链接在新窗口中打开，则必须提供可视指示器，并使用隐藏文本或标题向屏幕阅读器宣布这一点。

我们的发现：在我们的研究中，大多数网站确实通过了链接测试。我们不确定我们是否对此感到惊讶，因为几乎所有的需求都是默认的浏览器行为(或者说很有意义)，所以不需要做太多的工作来实现链接遵从性。

话虽如此：几乎没有一个链接实际上表明打开了一个新窗口。我们最终还是通过了网站，因为这并不是一个严重的违反合规性的问题，而且，如果我们这样做了，我们将不得不失败几乎所有的网站，尽管它们是可用的。

此外，还有很多链接不包含文本、标题或咏叹调标签，而只是一个图标，比如社交媒体链接。在我们的案例中，我们没有将它们作为链接而是图标来处理，我们的研究还为它们指定了一个类别。

WCAG的要求：图标实际上没有太多的指导原则，因为没有“图标”标签或元素这样的东西。图标通常与链接或按钮一起使用，以描述某种操作。因此，使图标可访问的要求与使链接和按钮兼容的要求基本相同。

背景：您一定在问自己“如果没有具体的要求，为什么要包括整个图标类别？”嗯，这是因为图标出现在几乎100%的网站上，即使它们没有自己的功能，开发人员使用它们的方式通常与使用按钮和链接不同。

要解释这一点，我们首先需要确定图标是最常用的：图标通常存在于按钮或链接内，旨在向看到并能识别这些“符号”的人描述该按钮或链接。

例如，许多电子商务网站使用购物车图标，而没有任何文字说明点击它会触发打开购物车。其他用途可以是不带文字的社交媒体徽标、收藏/愿望列表(心形图标)、搜索按钮(放大镜)、产品评级(星形图标)和许多其他实例。

我们的发现：大多数图标被用作“SVG”元素、字体图标(如Font AWOWE或IcoMoon)或背景图像(如Sprite或独立图标)。

虽然这对于有视力的人来说是非常好的，但这两种做法对使用屏幕阅读器的人(盲人)都没有帮助。要使这些图标可访问，开发人员必须包含一个隐藏文本或aria-label属性，以描述该图标是什么。例如，Facebook图标必须具有等于“Facebook”的隐藏文本或咏叹调标签。

在我们的研究中，我们发现大多数图标根本没有被描述，特别是字体图标。话虽如此，24%的网页确实通过了，这是因为一些流行的图标库实现了内置到SVG元素中的描述。其他字体图标CMS插件也会执行类似的操作，但使用的元素类型不同(通常是“i”标记)。

网站还必须满足其他重要的可访问性要求才能合规，但不属于上述任何一类。

注意：我们没有包括所有的合规性要求，但只包括对大多数或所有网站的合规性水平有影响的最显著的合规性要求。

HTML lang属性：“HTML”标记必须包含与文档语言相同的“lang”属性。例如，“EN”代表英语，“FR”代表法语。

跳过链接：每个网页的顶部都需要包括视觉上隐藏的按钮(显示在焦点上)，并允许用户跳到页面中的不同部分。

不正确使用ARIA：许多网站包含ARIA属性的错误使用，通常是错误的"；aria-labelleby"；和"；aria-description by"；，它们会被各种表单插件自动填充。

在隐藏元素中使用Tab键：网页通常包含在特定情况下出现的隐藏元素，如弹出窗口、侧边栏和下拉列表。如果这些元素在屏幕上不是可视活动的，则不能导航。

弱/不存在焦点环：在选项卡导航期间聚焦时，每个可点击的元素都必须包括一个视觉的、明显的焦点环(轮廓)。

这是我们在分析了10,000,000个页面后了解到的WCAG2.1兼容级别。说实话吗？互联网现在(或者说在我们之前)处于非常非常糟糕的合规状态。

从结果中可以看出，插件和模板开发人员经常会尝试满足某些要求，但这些要求往往还不够充分。

此外，归根结底，这些插件和模板是由网站所有者使用的，他们通常对编码、最佳实践或可访问性一无所知。他们只需要有一个系统，然后点击按钮，就可以尽可能快地实现他们想要的东西，而不需要考虑什么是可访问的，哪些是不可访问的。因此，网站所有者进行的每一次更新都会很快毁掉他们自己的合规性。

可访问性不是大多数企业主优先考虑的事情。市场营销、招聘、客户服务和销售(显然)。作为开发者和设计师，我们的工作是构思和实现技术突破，使网站合规，尽管这个话题对企业主来说并不是优先考虑的话题，因为它永远不会是！这是我们的责任。

我想我不明白你所说的称域名为二级和三级域名是什么意思。当域名是名称的最后一部分时，它仍然是顶级域名。.io和.com是同样多的顶级域名。你是想把它们归类为先引入的，还是重点是什么？

遗憾的是，WaybackMachine没有捕捉到每条评论，但它显示至少有一条批评该服务的评论被删除了(2020年4月26日捕捉到)：https://web.archive.org/web/20200426185244/https://accessibe.com/blog/knowledgebase/we-analyzed-10000000-pages-and-heres-where-most-fail-with-ada-and-wcag-21-compliance，它告诉我们你确实删除了评论。

哦，我看到你删除了一些事实上准确的评论，这些评论表明你对WCAG SC的看法是错误的？很好，很高兴知道。

这些评论(来自我和至少另外两个人)是关于你对什么是WCAG的严重失败的解释的不准确，而不是什么是最好的最佳实践建议。这些评论都指出了你写的文章中不准确的各个方面。我只停留在本文提出的第一个主张："；WCAG 2.1AA-遵从性级别的菜单：WCAG"；您在本文的第一部分中列出的所有要点都是...不正确的。WCAG不需要这些。肯定不是正常的。它看起来确实相当可疑，这些评论特别是消失了。

嗨，帕特里克，希尔，Accessie的首席执行官。删除了哪些评论？很高兴与您讨论WCAG的要求！如果您在我们的指南中发现错误，我也很乐意改正。我不知道我下次什么时候会看到评论，所以请在LinkedIn-https://www.linkedin.com/in/shir-ekerling上给我发个消息-期待着与你交谈！。

感谢分享这篇令人惊叹的文章。由于数字化转型和社交媒体的增长，Influencer的营销日益增长，您的文章确实是一篇令人惊叹的文章，证明了它的专业知识。

请阅读WCAG对哪些部件是规范性的，哪些部件是信息性的定义。您似乎有许多项目，因为WCAG必须形成信息性很强的部分。即使是Arai的纸板图案也有一些部分是建议。

嗨，劳拉，很高兴进一步讨论，通过LinkedIn联系我，希望我们能有一个很好的讨论！

到目前为止互联网上最好的研究。这真是一次有趣的阅读，感谢您分享您的数据！