用完美的灯塔得分打造最难访问的网站

免责声明：这篇文章不是关于灯塔的，其他测试工具也有类似的表现。这关系到我们开发人员和我们不盲目依赖自动测试的责任。

谷歌的内置测试工具灯塔对我们网站的可访问性进行评判，得分在0到100之间。试图获得高分是值得称赞的，但100分并不意味着该网站是完全可访问的。来证明我做了一个小实验。

看到人们在社交媒体上发布他们的灯塔评分，以突出他们对自己或客户网站的优化程度，总是令人高兴的。这表明他们关心他们建造的东西的质量。

如果我们工作出色，灯塔就会奖励我们绿色圆圈中的数字100。这是你可以自豪地与你的客户或在Twitter上分享的东西。

衡量我们代码的质量很重要，但更重要的是我们要正确解释自动测试工具给我们的分数。如果灯塔告诉我们，我们的网站是100%可访问的，这并不意味着它是可以访问的。这只是意味着我们已经为手动测试奠定了基础。灯塔使用AXE-CORE可访问性测试库和一套自定义的测试规则。它指出了一些不好的做法，但不是所有的。其他做法本身并不坏，但如果我们滥用它们，可能是有害的。

仅靠自动测试是不能保证高质量的。为了证明这一点，我用完美的灯塔分数建造了可能最难访问的网站。

这里是Vadim Makeev对他的推文的回应，这条推文激发了我写这篇帖子的灵感。

那将是一本绝妙的读物！这里有一个用于11年审计的文件：`<；img src=picture.png alt=picture.png>；`

我认为这将是一个奇妙的想法，不只是试图与尽可能多的人打交道，而是得到一个完美的灯塔分数作为奖励。

让我们从容不迫地开始吧。我想确保CSS是对我的完美网站的依赖。为了实现这一点，我将向body元素添加隐藏属性。在CSS中，HIDDED是相当于DISPLAY：NONE；的HTML。(如果您想了解更多关于无障碍隐藏的信息，请查看Scott O‘Hara的Includsive Hidden)。

HIDDEN以可视方式隐藏内容，并将其从辅助功能树中删除。仅此一项就足以将所有人排除在外，并通过灯塔测试，但我不想让自己太容易做到这一点。我想创建一个完全无法访问的网站，从技术上讲，它仍然可以显示内容。因此，让我们添加一些CSS并带回我们的内容。

我们回到了以前的位置，但是如果用户想要访问我们站点上的内容，现在必须加载CSS。

让我们再添加一个依赖项。我不再应用以HTML显示内容的类，但我通过JS添加它。

太棒了！站点看起来仍然是一样的，但是为了让它显示任何东西，CSS和JS文件必须加载并正常工作。

完美的分数在一个CSS和JS唯一的网站。那太好了，不过我们可以做得更好。

有很多方法可以排除屏幕阅读器用户。最简单、最有效的方法是使用aria-idden="；true；属性和值。此属性功能强大，我们必须谨慎使用它，因为它会从可访问性树中删除元素。通常，我们可能只使用它来通过删除多余或无关的内容来改善辅助技术用户的体验。在我们的网站上，我们把它放在身体元素上。

屏幕阅读器用户现在将体验到他们必须处理无法访问的站点的“罕见”时刻之一。*。

键盘用户可以通过按Tab键在页面中导航，以便从一个交互元素跳转到另一个交互元素。如果这些项目处于焦点位置，浏览器会显示它们周围的轮廓。

只需要3行CSS就可以将一整组人排除在访问站点之外。虽然，从技术上讲，他们仍然可以与之互动。他们不会再看到焦点指示器，但是交互元素仍然是表格。既然这个实验都是关于排除的，那么让我们确保键盘根本不能使用。

视力低下的人可以通过启用所谓的高对比度模式来改善Windows的对比度。

整个操作系统对包括浏览器和网站在内的所有应用程序都使用高对比度的颜色。

@媒体屏幕和(-ms-高对比度：激活){/*高对比度样式规则*/*{COLOR：#000000；}}。

此媒体查询中的规则仅在启用高对比度时适用。不幸的是，我们不知道主题使用的是哪种颜色，也不知道它是浅色还是深色的主题。将所有元素上的颜色设置为#000000可能起作用，也可能不起作用，具体取决于用户首选项。这个各占一半的机会对我来说还不够，但我们很幸运：Windows高对比度颜色映射到CSS系统颜色关键字。我们可以使用这些系统颜色关键字来确保我们的文本始终与我们的高对比度模式背景颜色匹配，无论它设置为什么。背景颜色映射到窗口。因此，让我们使用背景颜色值作为所有元素的文本颜色。

哦，伙计。这太邪恶了。我的LinkedIn收件箱将装满Facebook和Uber等公司提供的工作机会。

光标：None；对于鼠标用户就像Outline：None；对于键盘用户一样。最初很难找到方向，但交互式元素仍然可以点击。让我们通过再次降低用户体验来提高我们的应用程序的质量。

指针事件：无；将我们的用户从点击我们站点上的任何东西的能力中解放出来。这个属性得到了很好的支持，但是如果我们想要确保这个特性能在尽可能多的浏览器上运行，我们可以应用一个称为渐进式降级™的原则。

函数removeA11y(){if("；pointerEvents"；in document.body.style){控制台。日志('；指针-支持的事件)返回；}文档。addEventListener('；单击'；，函数(E){e.。PrevenentDefault()；})}removeA11y()；

如果浏览器不支持POINTER-EVENTS属性，则此JavaScript回退将生效并从所有元素中删除单击事件。

我们不能再使用鼠标或键盘，但我们仍然可以阅读折叠上方的内容。让我们对此做点什么吧。

在不同的浏览器中测试该站点时，我注意到它仍然可以在Safari中以阅读器模式访问。

事实证明，可以通过在正文中定义较小的字体大小来禁用Reader模式。

视力低下和视力良好的人、鼠标、键盘和屏幕阅读器用户都无法访问该网站。如果浏览器高级用户遇到这样的站点，可能会唤醒他们内心的Zero Cool，他们会试图入侵该站点。我所说的黑客是指查看页面源代码。

为了将樱桃放在排除第一站点的顶部，我将文本转换为html实体。实体通常用于显示保留字符、不可见字符和使用标准键盘难以键入的字符。我用它们来混淆我们网站上的文本。

我写这篇文章的目的不是贬低灯塔或斧芯，也就是灯塔背后的引擎。我经常使用这两种工具，我很高兴我有它们。这篇文章是关于你和我的。分数表明了我们应用程序和网站的质量，但我们不能盲目相信这些数字。我们必须明白，自动测试只是第一步。下次当你看到灯塔得分很高，你想结束这一天时，请阅读分数旁边的课文。

这些检查突出显示了提高Web应用程序可访问性的机会。只有可访问性问题的子集可以被自动检测，因此也鼓励手动测试。

在该段下面，您会发现应该手动测试的附加项目列表，以及解释如何进行辅助功能检查的页面链接。

我们测试和优化我们的网站并不是因为高分给我们带来的好感。我们这么做是因为我们想，也必须确保我们建造的东西能让尽可能多的人接触到。我们在设计和开发时并不完全依赖自动化，在测试时也不应该这样做。