颤动网：不良设计的分形

网络有着悠久而丰富的历史，可以追溯到欧洲核子研究中心(CERN)的90年代。那时，Tim Berners-Lee奠定了HTML的基础，至今仍在使用。有人试图用各种不同的成功来取代它，但都没有成功，这是有充分理由的。HTML和后来的CSS发明是一套非常强大的工具，可以在Web上构建各种体验。人们仍在试图取代HTML，这就把我们带到了这个帖子的主题：Ffltter Web。

Ffltter Web是Google用于构建跨平台UI的Ffltter框架的一部分。被许多开发者誉为自切片面包以来最好的东西，但我对它的看法没有玫瑰色的眼镜。除了web之外，我还没有在其他平台上看过颤动，所以我不能对此发表评论，只能说颤动的一般原理是一个糟糕的想法。Ffltter的工作原理是丢弃平台提供的原生UI工具包，使用OpenGL等从头开始渲染所有内容。这对Web平台的翻译尤其糟糕。值得一提的是，Ffltter for Web目前处于测试阶段，我即将详细说明的问题可能会得到解决。然而，我相信这些问题是Ffltter设计选择的基础，所以我对我的批评充满信心。

如今任何学习HTML的人都会遇到“语义HTML”这个词，因为它是现代Web的重要组成部分。Peter Lambert在优秀的博客文章HTML is the Web中描述了为什么这一点很重要。简而言之，网站的可见部分，即展示，只是故事的一半。以Peter使用的一个例子为例，带有onclick处理程序的div可能是可单击的，并且可以设置为看起来像一个按钮，但这并不意味着它就是一个按钮。文档的语义结构很重要，因为这是机器(而不是人类)理解Web的方式。带有onclick处理程序的div看起来不像屏幕阅读器、搜索引擎爬行器或辅助功能扩展的链接或按钮，它看起来像div。

最重要的是，语义HTML是可访问性和其他让用户随心所欲地体验Web的工具的关键。

Ffltter Web会生成语义HTML吗？一点都不接近。它生成由画布元素、自定义元素和一些其他HTML元素组成的拼凑。在演示应用回复中，有多少按钮和链接？如果你猜到了零，恭喜你和我一样厌倦和愤世嫉俗。让我重申一下，这是一个没有按钮和链接的电子邮件应用程序！因为没有特别的链接，所以cmd/ctrl单击以打开新选项卡、悬停链接以查看URL以及使用上下文菜单等功能不起作用。

我使用浏览器扩展Vimium来导航Web，这是一个非常强大的工具，您可以猜到，它依赖于语义HTML。它能在用Ffltter Web构建的页面上工作吗？他妈的没有。它不起作用是因为它试图找到语义上可点击的东西，比如按钮或元素，正如我们已经确定的那样，Ffltter Web不会生成这些元素。Vimium几乎可以在我使用的所有网站上运行，因为谢天谢地，大多数开发人员不只是在div上使用onclick处理程序。然而，无论疯狂的狗屎颤动网络做什么，看起来都是不可点击的。可点击但看起来不可点击的内容很好地代表了可访问性差。例如，屏幕阅读器可以通过地标导航，如标题、链接、表单和其他语义元素，这些都适用于Ffltter Web吗？他妈的没有。

更糟糕的是，除非您使用特殊的“可选”文本，否则Ffltter Web甚至不支持选择文本。不是开玩笑，他们自己的代码示例有一个“全部复制”按钮来绕过这个问题。

怎么会有人看到这一点并说“是的，不，选择文本在网络上不是一个重要的用例”？你会问为什么选择文本很重要？一些人用它来帮助阅读，选择他们正在阅读的文本，另一些人用它来(我知道这是疯狂的)复制文本的部分，患有诵读困难的人使用工具读出选定的文本部分来帮助他们阅读。这是否适用于Ffltter的默认不可选文本？他妈的不！

当我们谈论诵读困难症时，另一个帮助患有诵读困难症的人的有用功能是能够将网页的字体更改为他们认为更容易阅读的字体，例如OpenDyslexic。有很多工具可以帮助这一点，它们都依赖于在网页中注入自定义CSS的能力，令我惊讶的是，当我在一些Ffltter Web演示中尝试它时，它看起来真的很管用。然而，它看起来是欺骗的，虽然字体确实适用，但它会导致几乎所有情况下的文本都被截断，因为产生了可怕的HTML颤动。例如，在“回复”电子邮件客户端中，右上角是单词“回复”的标签。

<；p style="；font-size：18px；font-weight：Normal；font-family：WorkSans_Regular，-Apple-System，BlinkMacSystemFont，sans-serif；color：RGB(255,255,255)；字母间距：0px；位置：绝对；空白：预换行；溢出：断字；溢出：隐藏；高度：27px；宽度：54px；变换原点：0px 0px 0px；变换：矩阵(1，0，0，1，59，3.5)；左：0px；上：0px；"；>；回复<；/p>；

Font-size：18px；font-weight：Normal；font-family：WorkSans_Regular，-Apple-System，BlinkMacSystemFont，sans-serif；颜色：RGB(255,255,255)；字母间距：0px；位置：绝对；空白：预换行；溢出换行：断字；溢出：隐藏；高度：27px；宽度：54px；变换原点：0px 0px 0px；变换：矩阵(1，0，0，1，59，3.5)；左：0px；顶：0px；

颤动网页生成绝对定位的固定大小的HTML，而不是采用浏览器指定的文本布局，而只是剪切文本。

辅助功能扩展中常见的另一个有用功能是使链接更加突出。这是通过注入针对页面上的标签的全局CSS规则来实现的。

这对Ffltter Web有效吗(这个问题开始让人觉得多余了，因为答案几乎总是“不”)？他妈的不！通常，用户使用自定义样式表的原因有很多，不限于可访问性。作为一个“有趣”的练习，在Ffltter Web演示之一上尝试这个低视觉样式表，看看其内容的可读性如何。

Ffltter Web Gallery中的另一个演示是一个新闻站点。在新闻网站上，我喜欢使用浏览器内置的“阅读器模式”来获得一种不杂乱、更适合我的阅读体验。例如，当深夜在床上阅读时(我知道我不应该这样做)，有一种柔和的、黑暗的模式体验是很好的，而不是许多出版物使用的纯白色上耀眼的黑色文本。阅读器模式是否适用于Ffltter Web网站？不是的。它不工作是因为，您猜到了，它依赖于语义HTML。

像任何优秀的作家一样，我把最好的东西留到了最后：Ffltter Web的屏幕阅读器体验。当您第一次使用屏幕阅读器关注Ffltter Web演示之一时，您会看到一个“按钮”，上面写着“启用辅助功能”。诚然，当你点击这个按钮时，屏幕阅读器的内容是相似的，但这很可怕。在“回复”应用程序中，列表视图中的内容以不必要的高细节读出，可以点击的内容没有这样标识，据我所知，你甚至无法进入菜单，而且之前标识的几乎没有用于导航的地标。

颤动是一种误入歧途的尝试，目的是实现不可能的：高质量的跨平台体验。特别是Ffltter Web，它从根本上是有缺陷的，如果它有任何希望成为产生语义的、可访问的和现代的网络体验的可行技术，就需要从头开始重建。我严重怀疑，当Ffltter Web离开测试版时，这些问题是否会得到妥善解决，除非重新考虑整个方法。如果你看到颤动的网，转过身，朝相反的方向跑。

开发人员、设计人员和产品人员都喜欢跨平台解决方案，因为它节省了他们的时间和精力，同时实现了与成本更高的替代方案“相同”的结果。Ffltter Web很好地说明了结果是不一样的，产品的可见部分只是拼图的一部分。

我只是一个可访问性的新手，在这篇文章中我甚至没有提到SEO。我停止写作并不是因为我不再寻找缺陷，而是因为这篇文章太长了，我还有其他事情要做。我相信易访问性用户和专家可以找到比我在这里介绍的问题更多的问题(请随时在Twitter上DM我，我会将它们包括在内)。

最后，我想引用伊恩·马尔科姆博士的一句话。

你们的科学家全神贯注于他们是否能做到，他们没有停下来想一想他们是否应该这样做。