Transcription
欢迎来到我的演讲。让我们打破一些 VA 规则。我叫 Elisa Christensen，是挪威 Varant 的一名前端开发人员，我做前端开发已经大约八九年了，我见过无数个网站在发布时没有考虑可访问性，这是一个非常非常普遍的问题，这就是为什么我今天做了这个演示，试图让你们更了解身处一个不为你们设计的网络是什么感觉。就像我这个自恋狂一样，在开始之前，我要稍微谈谈我自己。呃，给所有人类父母一个预警。我称自己为我的两只孟加拉猫 Luna 和 Venus 的猫妈妈。既然我喜欢把它们推开，你们在我的演示过程中会看到它们的身影。在 COVID 期间，我养成了一些糟糕的习惯。我养成了一种叫做“奶奶爱好”的习惯。我知道这在 COVID 期间对很多人来说是很典型的事情。我开始读书、画画，照顾香草和植物。呃，我甚至还买了一把奶奶椅，坐在奶奶椅上窥探我的邻居，这可不好。你们可以看到，呃，Luna 已经在那张猫的照片里了。但幸运的是，我设法保留了我的一部分。我仍然有我的千禧一代爱好。所以我和朋友们有外出聚会和卡拉OK。我和我在线的朋友 Katarina 有在家聚会。我喜欢去冒险，呃，我喜欢锻炼。现在你们可能在想我为什么说这么多关于自己的事情。为了切入正题，因为我确实有正题，我们需要放大这张图片，因为你们中的一些人可能认出这些截图来自一个叫做 Warlogs 的网站。呃，它显示了我在一个叫做《魔兽世界》的电脑游戏中表现得有多好。这个数字叫做“parse”。那些懂这些东西的人知道这是一个相当平均的分数。所以即使我有时玩得有点太多，我仍然相当平均。但我能够玩这个游戏。我之所以能够玩它，不仅是因为我没有任何严重的残疾使我无法玩很多其他游戏，还因为《魔兽世界》确实做了很多工作，使其游戏对很多人来说都易于访问。现在，现在我终于要说这篇太长的介绍的重点了。那么，你们中有谁认出这个人了吗？如果认出来了，请举手。如果我告诉你们他叫 Mat Stan，现在有更多人认出他了吗？或者如果我告诉你们他也被称为 Ebellin？如果你听说过 Ebin，请举手。现在，对于那些没听说过他的人，Mutan 是一位挪威游戏玩家，他因肌肉萎缩症在 25 岁时去世。这种疾病逐渐使他无法参与日常活动，结果他一生大部分时间都在玩电子游戏，特别是《魔兽世界》。在他去世后，他的父母哀悼他认为孤独而孤立的生活。当他们开始收到来自世界各地在线朋友的信息时，这种信念改变了。作为他在《魔兽世界》中的角色 Elin，Mutz 能够建立牢固的关系和深厚的友谊。作为他的角色，他能够和他的公会里的其他成员一起参加同样的活动。他没有被排除在那个世界之外，就像他在现实世界中常常被排除一样。他结交了来自世界各地的朋友。在他去世后，超过 50 人联系了他的家人，分享 Mut 对他们的意义。关于他故事的电影，《Ebelin 的非凡一生》赢得了许多国内和国际奖项，并向全世界打开了人们对游戏重要性以及它如何能够由社区驱动的认识。那么，为什么我要讲这个故事呢？毕竟，这次演讲是关于可访问性的。所以，你们中的一些人可能已经看到了我要说什么，因为 Matt Stan 并不独特，他需要辅助技术来玩游戏。对他来说幸运的是，《魔兽世界》是一款尽管有他的病情也能玩的游戏。但并非所有游戏都如此。并非所有网站都如此。也并非所有 Web 应用都如此。作为开发者，我们在构建产品时倾向于忘记可访问性。当我们这样做时，我们实际上是在将人们排除在我们的平台之外。我们将本可以包容的东西变成了排他性的。每次我们接受诸如“我们这里不关注那个”之类的说法，或者“如果用户无法使用我们的平台，那它就不是为他们设计的”时。总之，我们应该想想 Eivelyn 和 [笑声]《魔兽世界》。如果 Blizzard 在 15 年前也说过同样的话，当 Mutz 需要辅助技术来玩他们的游戏时，那么就不会有关于他的电影了。我们不能继续忽视我们的用户。我们不能允许自己逃避作为开发者的责任，因为确保我们的产品具有包容性而不是排他性，这是我们的责任。所以，我不想让你们今天离开这个房间时记住每一个 WCAG 标准的细节。我希望你们能带走一两个或三个要点。只是一种感觉。我希望你们在手机上或用笔和纸或其他任何东西写下一句话。今天我不介意看到手机。我也不介意你们做任何需要做的事情来集中注意力或跟上演示。一切都可以。所以，我希望你们记住这种感觉，我不想指责任何人。我不是来做这个的，因为我自己也不完美。我在可访问性方面犯过错误，现在还在犯。这很难，这就是为什么我们需要一起变得更好。所以，[清嗓子] 现在我们可以，在我们继续之前，我们需要稍微谈谈 WCAG。它到底是什么。所以 WCAG 代表 Web 内容可访问性指南，它是我们创建网站的国际标准。WCAG 分为三个级别。我们有 A、AA 和 AAA。A 级是最基础的，最低要求。所以，这个级别是关于避免完全的障碍。例如，能够使用键盘进行导航，为图像提供替代文本，以及避免仅依赖颜色来传达重要信息。如果未达到 A 级，那么您的网站基本上对许多用户来说是不可用的。所以这是最重要的级别。但是，根据欧洲无障碍法案和英国的平等法案，法律要求是 AA 级。这个级别确保了大多数用户的良好可用性。它仍然不是对所有用户的完美可用性，但足以不排除许多人使用 Web 应用。这包括诸如足够的颜色对比度、可见的焦点指示器和有意义的 HTML 结构等要求。然后我们有 AAA，它不是法律要求，但它是我们应该追求的目标。它是达到 AAA 标准的灵感 [笑声]。所以，也许达到 AAA 标准并不总是那么现实，但你应该尝试。这包括诸如视频的西班牙语手语翻译、更简单的语言以及更严格的对比度要求。既然我们现在谈论的是努力达到 AAA 标准，我可以告诉你，目前这个演示文稿的对比度比为 6.27:1，而 AAA 标准对小文本的对比度比要求是 7:1。所以我们应该稍微提高一点。好了。现在阅读这个演示文稿应该更容易了，我们将在这场演示文稿的其余部分使用这个蓝色背景。大约 15% 到 25% 的人口在任何给定时间都有某种形式的残疾。这是一个很高的数字。这是人口的很大一部分。它可以是认知上的。可以是身体上的。可以是暂时的或永久的。它可以是像扭伤手腕这样的事情，使你无法在短时间内使用电脑鼠标。它也可以是你视力逐渐衰退的事情，你不希望将如此大比例的人口排除在你的 Web 应用之外，94.8% 的网站至少有一个 WCAG AA 问题，如果你还记得我之前说的，那不是最高级别，那是法律要求。所以这太疯狂了。94.8% 的网站都在违法。情况就是这样。79.8% 的网站对比度很差。然后有 55% 的网站缺少替代文本，48% 缺少标签，45% 的链接为空，15.8% 的按钮为空。这太糟糕了。在 2026 年这个伟大的年份里，我们应该做得更好。好的，现在我们终于可以开始了。我只需要喝点咖啡 [笑声] 来保持我的精神。现在你刚从医生那里得到消息，你患有视力综合征，并且即将失明。所以，你正在浏览网络，寻找关于这种视力综合征的非常重要的信息。你点击了一个承诺提供答案的链接，然后你通过屏幕阅读器看到的是这样。我甚至不应该再说话了，因为你可以从我的演示幻灯片中获得所有你需要的信息，但你不能。也许如果我点击我的点击这里。不，它是空的。但这是因为你失去了视力，而这个页面根本不是为你设计的。抱歉，我们不能制作适合所有需求的 PowerPoint 幻灯片，是吧？我们应该能够。所以，欢迎来到针对视障人士的 WCAG 扩展类别。这是一个完全没有考虑可访问性设计的网站。在这个最糟糕的例子中，所有信息都对用户隐藏了。它可能包含图像中的文本，没有替代文本的文本图像，或者信息隐藏在焦点或悬停或其他屏幕阅读器无法连接的交互方式中。我们正在打破非文本内容。所有可见内容、图像、图标和图形都必须有替代文本以及名称、角色和值。交互式元素需要角色、名称和值。例如，我们有一张图片，你们有人知道这张图片里有什么吗？不，你们不知道，因为它没有任何替代文本。当你使用屏幕阅读器时，这就是你对这张图片的体验。它是空的，就像一个空方块。你们中的一些人可能已经猜到了图片里有什么，因为我给了你们一点提示。它是一只猫。但 [笑声] 如果我没告诉你我要在我的演示中展示我的猫，那是不可能的。所以当你添加替代文本“一只猫躺在稻草床上，看着镜头”时，图片的体验将从这个空盒子变成你可以想象的东西。你只需添加一点文本，就能为看不见图片的个人提供与其他人相同的网站体验。重要的是要记住，替代文本也应该提供图片在上下文中提供的所有信息，我将进一步解释这一点。[笑声] 我自己编辑了这张图片，因为我不想使用 AI。所以这就像创造一个常识性的鸟。不是我的猫在试图抓鸟。但……我不想用 AI。所以……我也不擅长 Photoshop，所以你们得原谅我，但现在我们假设这是一只试图抓鸟的猫，它可能有描述性文本“一只猫和一只鸟”，但这并没有说明这张图片试图传达什么，在一个关于鸟类正在灭绝的文章的上下文中。图片文本可能是“一只被猫捕食的鸟”。它告诉你一些东西。它告诉你猫是正在灭绝的鸟类的捕食者，例如。现在，但对于一篇关于猫的行为的文章，图片文本可能是“猫为了好玩而捕食鸟”。所以，图片文本根据上下文而变化。SVG 也是如此。如果你有一个图标，它对信息很重要，但你没有描述它，那么屏幕阅读器看到的就是一个空方块。但如果你只是添加一些关于这是什么的信息，你是不是很惊讶不是一只猫？我希望你没有。现在，如果你只是添加一个区域标签和一个标题，使用屏幕阅读器的人将能够可视化它。这就是非文本内容。现在我们继续浏览。哦，对比度太差了。我们把它调高一点。仍然很差。再调高一点。好了。我们还在浏览，终于找到了一篇关于我们视力综合征的文本信息。它承诺了非常重要的信息。但当映入我们眼帘的是这个时，找到这些重要信息相当困难。[笑声] 你们中的一些人可能会发现重要信息很难找到，因为这个页面没有使用适当的标签编写。所以你必须把重要信息用适当的 HTML 标签包裹起来。在我发表这个小小的抱怨之前，我得先喝点水，因为你必须使用正确的 HTML 标签。请，每次你想使用另一个 div 时，试着想想另一个标签。HTML 是一个如此丰富的语言。它有如此多的机会。如果你从一开始就用正确的标签编写了网站，那么找到所有重要信息就会容易得多。有大量的 HTML 标签可供使用，而我们在构建产品时太懒了，如果我们从一开始就使用了正确的标签，那么很多问题都会得到解决。现在我正在指责，因为这里有一些罪人。我告诉过你们我不会指责，但我撒谎了，因为我也是个罪人。我也过度使用了 div。好吧，但我们倾向于在所有东西上都使用 div。我甚至在标题和链接中都看到过，我们只是把它们样式化成我们想要的样子，然后给它们添加一些点击事件来让事情发生。问题是，随着 AI 的普遍使用，这个问题并没有得到改善，因为我们已经当了这么久的罪人，以至于 AI 认为这是正确的方式。所以它们也用 div 做所有事情。好吧，我得说出来。抱歉我有点激动，但是的，使用正确的 HTML 标签。我将在这件事上重复自己。好吧，我不会和你们谈论所有现有的 HTML 标签，但我会给你们一个关于标题如何工作的快速解释，因为这是一个非常常见的问题。标题标签中的不同数字是用于语义的，而不是用于样式，因为很多人都这样使用它们。你不能在页面上多次使用 H1 标签，因为那是最大的标题。我们有一个结构。所以每个网站都需要一个 H1 标签，而且只有一个。那应该是你页面上的第一个标题标签。所以，那是页面的主标题。页面上的每个主题都应该用 H2 标签介绍。这是一个副标题。它是主标题的副标题。而且，因为它们在同一个页面上，如果你需要一个与副标题相关的标题，你可以使用 H3 标签。每个属于 H2 标签下的标题都应该是 H3，以此类推。我个人通常只使用一、二、三，有时是四，但也有五和六。现在我可以举个例子。假设我们有一篇关于动物品种的文章。我们有一个副标题叫做“狗”，在“动物品种”下，然后我们用 H3 列出所有不同的狗品种，然后我们假设我们为每一种狗写了一段话，然后我们继续讲猫，猫和狗没有关系。所以这是一个新的 H2 标签。然后我们列出猫的品种。例如，孟加拉猫。有人提到孟加拉猫吗？哦，我只是 [笑声] 展示我的猫。让你们的注意力回到我身上，因为这可能有点理论性。抱歉。现在你们可以继续了。这就是标题。我还要谈谈对比度。我之前说过我们有 AA 和 AAA。虽然我今天不会过多谈论 AAA 标准，因为我们首先要确保不是 95% 的网站存在法律问题，然后我们再转向 AAA，但我认为对比度很重要，因为它很容易遵循。AA 级大文本的对比度要求是 3:1，小文本是 4.5:1，看起来有点像这样。这就是为什么，因为你们中的一些人现在可能很难看清大文本。这就是为什么你应该尝试确保你的对比度比达到 AAA 标准，因为大文本是 4.5:1 而不是 3:1，小文本是 7:1。现在，如果你看到一个数字，大声喊出来。没人。如果你看到一个数字，不要害羞。好的。如果你看到数字 73，恭喜你。你可能是色盲。我使用这张图片是因为我的两个兄弟都是色盲，他们一生中都经历过人们拿着这些圆圈走过来，非色盲的人能看到数字，而他们看不到，这非常令人讨厌。所以当我们终于找到一张我看不见数字但他们能看见数字的图片时，他们说哦，终于轮到你这个奇怪的人看不见数字了。所以，是的，这里有一个数字，我问过很多不同色盲的人他们看到什么数字，他们都说 73。所以这是我的信息来源。关键是，颜色对不同的人来说感知不同。这就是为什么你不能只用颜色来传递信息。如果你有关于某事的警告，你不能只用红色作为唯一的指示器。你必须还有其他东西。>> [清嗓子] >> 你们中的一些人可能会看到红底绿字文本是最容易阅读的，而另一些人可能会看到红底红字文本是最容易阅读的。我使用了一种绿色调，色盲人士也通常能看到绿色，以便更容易理解，而且……只是为了把观点说清楚，但两者都有完全相同的对比度比。两者都有 1.5:1 的对比度比。所以这很有趣，因为我们有些人看到它们非常不同，认为一个更容易阅读，如果我们把它变成灰度，因为也有人看灰度，这并不总是和色盲一样。那个，我们中的许多人认为最容易阅读的那一个，实际上比红底红字更暗。但在这里，它们的对比度比是相同的。所以这很有趣，对吧？这里的关键是，当你把彩色文本放在彩色背景上时，你必须小心。现在我们已经打破了这些 WCAG 标准，非文本内容，关系，标题和标签，颜色使用，但看起来我们忽略了一个。好了，对比度。[笑声] 所以现在我希望我已经把我的观点说清楚了。外语。外语。外语。修复它。哦，语言。它说知道。好了。现在是英语。[笑声] 重新开始。语言障碍。所有网站都必须有一个正确的语言属性，指定内容是用什么语言编写的。就像这样。例如，一个英语页面应该标记为 language English。这是因为屏幕阅读器需要能够切换到正确的语言和正确的发音。然后我们有部分内容的语言。所以，如果部分内容是另一种语言，而不是主要的语言，它们必须被标记。这允许屏幕阅读器自动从英语切换到挪威语，当它们看到挪威语片段时。所以它们从用英语写的标题切换到挪威语。所以这就是语言障碍。抱歉。抱歉，如果我的观点，我的表达方式看起来有点傻，但这是为了让你更容易记住。运动障碍。我们的下一个话题是运动障碍，特别是使用电脑键盘的能力，这是一个非常普遍的问题。网站导航。网站导航。体验如何？对于不是为键盘导航设计的。我对此非常满意。所以，我们有两个按钮，一个后退按钮和一个前进按钮。当我使用键盘时，我首先想够到第一个按钮，我想能够够到按钮，但我首先要能够够到后退按钮，然后是前进按钮。这是我看到的逻辑顺序。但一个常见的问题是我们再次如前所述，没有使用正确的 HTML 标签，按钮的样式。虽然我见过很多按钮和其他可点击元素是用 div 和其他标签编码的，但 HTML 属性已经处理了与该元素相关的很多逻辑。而这个元素现在对于使用键盘的人来说是无法触及的。而且我 [笑声] 知道很多开发者会通过添加一个 tab index 或其他东西来解决这个问题，使其可触及，然后是的，它将是可触及的，但你不应该使用技巧。你可以写那个。当 HTML 已经为你处理了所有逻辑时，不要使用技巧。好的。所以你必须找到正确的 HTML 标签并正确编写它。现在这个例子可能看起来很傻，关于样式，它是绝对定位的，但我见过更大的例子，开发者只是在 HTML 文档中标记了所有内容，他们对顺序没有感觉，或者他们只是写下所有内容，然后 [笑声] 把所有东西都放在应用程序周围，是的，我见过这种情况，所以这不是一个愚蠢的例子，这是一个实际的现实例子，所以强制绝对定位可能是某些开发者知道的唯一定位元素的方式，但它也需要在代码中按正确的顺序，而且你也应该尽量避免将所有东西都定位为绝对定位，你应该使用其他方式来样式化你的内容，这里重要的部分是后退按钮在代码中是第一个，前进按钮是第二个。现在这可能是一个更典型的问题，我见过很多。他们，开发者可能已经标记了内容，而不是编辑 HTML，你只是添加了 flex-direction: row-reverse。假设你有一个横幅，它更大，两边都有可点击的元素，然后设计师告诉你，哦，但我希望它们交换位置。所以，而不是复制粘贴并再次调整它看起来很好，你只是添加了 flex-direction: row-reverse，因为它看起来是对的，但它并没有改变标签导航。所以你必须做实际的工作，复制粘贴内容，使其按正确的顺序排列。再次，这是一个技巧。这就是 flex-direction: row-reverse 的用途，而不是用来技巧性地让某些东西看起来正确。当你实际有像这样的按钮需要按正确的顺序排列时。现在，然后我们有可见焦点。键盘用户需要知道他们在哪里。当你没有可见焦点时，使用键盘导航就像看着这个演示文稿，只有这个作为屏幕。内容太多了，你不知道你在哪里，而且，而且，而且，当没有可点击的东西有焦点指示器时，这是不可能知道的。所以键盘用户需要知道他们在哪里。如果焦点指示器丢失或不清晰，使用 tab 键导航的用户将无法理解哪个元素将被激活，并防止意外操作。它也有助于视力低下的人。它有助于那些看着屏幕的屏幕阅读器用户，因为有很多屏幕阅读器用户不一定是盲人，但他们可能读不了，因为他们从未被教导过阅读。所以他们在使用屏幕阅读器时看着页面，当你有一个清晰的焦点指示器时，他们更容易跟上内容。所以基本上，它对每个人都有好处。现在，这就是一个为键盘导航开发的网站的体验，终于。所以，现在我们已经打破和修复了键盘，键盘，键盘，键盘。我认为有什么问题。键盘，键盘，又来了。哦，现在我知道了。如果我们陷入了键盘陷阱。所以，用户在用键盘导航时不能被困在任何组件中。抱歉，其中一些有点太直白了，但是的。你不应该有任何字符键快捷方式。你需要正确的焦点顺序，并且你必须有可见的焦点。你可以在这里看到他们打破了哪个 WCAG 标准。再次，我告诉过你我会重复自己。[笑声] 请使用正确的 HTML 标签。现在，注意力和分心。我很抱歉，这将是一个有点傻的环节。所以，读完这个幻灯片上的所有内容。一，二，三。嘟。这就是你拥有的全部时间。抱歉。有点可预测，不是吗？也许。总之，用户必须能够延长、调整和禁用时间限制。这将减轻时间压力造成的压力。它允许更慢的处理和决策。它防止因超时而丢失进度。它还支持有 ADHD、焦虑和其他功能挑战的用户。[清嗓子] 暂停、停止和隐藏。用户必须能够停止、暂停、停止和隐藏移动、闪烁、滚动或自动更新的内容。这将通过减少分散注意力的内容来支持认知需求，从而提高注意力，允许用户按照自己的节奏处理信息，防止因持续运动造成的认知过载，创造一个更平静、更可预测的阅读环境。好了。[笑声] 所以，抱歉。当我说话时，专注于我所说的话是否很难？我希望如此，因为这就是重点。所以现在我希望你们每次想在页面上添加一些非常分散注意力的东西时，都能记住，人们很容易被这种噪音、三次闪烁或低于阈值的闪烁所分散注意力。我不想举例说明这个具体问题，因为那样我必须让我的演示文稿闪烁。你们有人知道为什么那会是个问题吗？因为闪烁的内容会导致偏头痛、头晕、恶心和癫痫发作。所以，避免闪烁的内容，或者将其保持在阈值以下。它还可以防止过度刺激、恐慌反应和认知疲劳。所以这很好。这就是注意力和分心。计时可调，暂停、停止和隐藏，以及三次闪烁或低于阈值。然后我们有理解、记忆和方向。在这个环节，我将重点关注表单。在 3.3 下，有整个类别的 WCAG 规则适用于输入和表单，你可以查看。但我没有时间全部讲完。但我会给你一些基础知识。表单必须使用正确的语义结构。所有输入元素都必须有一个可见的标签，很好地描述它。例如，在这里，当你只有这个占位符作为唯一的指示器和给用户的信息时，当你开始输入时，它就会消失。所以也许我只写 Elisa，并且我有注意力或记忆力问题。所以我忘记了问题是什么。也许是名字，或者全名，或者也许我应该只写我的姓氏。所以，我不得不写出我写的所有内容，然后重新开始。所以，如果你只是添加一个描述用户应该在这个输入字段中写什么的标签，对每个人来说体验都会好得多。现在，我们应该接受这个吗？现在呢？这可能很重要，对吧？我们只是忘记了上下文。所以，我们有记忆力丧失的问题，而且我们经常接受事情。所以我们暂时接受了，稍后看看我们接受了什么。复选框和单选按钮需要是实际的单选按钮和复选框，作为输入字段编写。它们需要可以通过鼠标和键盘以及屏幕阅读器访问，并且能够查看应用程序的人需要确切地理解他们正在选择什么。这有很多问题，不止几个。问题是用 H3 标签写的，这很奇怪，而且也没有完全写出来。当我没有相同的认知理解页面时，我不可能知道他们在问我什么。然后我们有一个 input type checkbox。这足够了。但它与标签没有任何联系。标签只说“是”。这也没有提供任何信息。所以现在我们来看看 [笑声] 我们在正确示例中接受了什么。我在此宣誓，我灵魂中的血契，以及我本人对布罗利帝国的忠诚。哎呀。但我们每天不都这样做吗？通过社交媒体。但是的，至少它被正确地写出来了。所以我们现在知道我们接受了什么。这很好。标签和输入字段通过 ID 和 form 连接。所以，太棒了。我们继续。所以，我之前说过，对于表单，我们有一些，在 3.3 下有一个完整的类别。所以，这些是一些更重要、更重要的标准，你应该记在心里，你可以查看 3.3 来了解更多关于表单的信息。现在我们来谈谈图标。另一个常见的错误是，在制作一个易于理解和导航的网站时，使用仅可见的图标，例如，链接的唯一可见元素，你可以添加一个区域标签，这样就不会违反 WCAG 标准。所以，如果它有一个区域标签，它就没有违反任何 WCAG 标准。但我还是会稍微谈谈。因为想象一下，这是网站顶部菜单中唯一显示的东西，一个背包。对一些人来说，一个带有背包的链接会带你去一个清晰明显的地方。但问题是，不同的人对背包有不同的联想。所以也许有些人认为这是一个旅行页面。背包可以代表旅行，带你去旅行网站。也许它意味着冒险或工作。有些人只为工作使用背包。也许有些人认为它是为了一个市场，例如 Facebook Marketplace 或任何东西。我的一位朋友甚至说是飞盘高尔夫。所以我们对背包有如此多的不同联想。所以只使用一个背包而不是旁边的文字是愚蠢的 [笑声]，因为它让你的页面更难使用。我将以房子为例，因为这是更常用的图标，用于说明家。哦，不是那种房子。好了。如果你添加一两个词来描述链接带你去哪里，这实际上对每个人都可见，而不仅仅是屏幕阅读器用户，这会使页面更容易理解。也许老玛莎，她一生都住在公寓里，对房子的联想不像你那样，而且她也不怎么上网。所以她不会把房子和主页联系起来。她可能会把它和商店联系起来，例如。所以我认为 LinkedIn 是一个很好的例子，说明如何做到这一点，如果你把它和 Facebook 比较。即使有些人认为 Facebook 的横幅更好看。但 LinkedIn 的更容易导航，并且用户体验更好，因为即使是我也不总是明白所有这些图标的意思，而且它们有时还会改变。所以如果你只是添加文字，它就会让使用变得更容易。现在我们来到了本次演示的最后一部分，听力障碍。>> [清嗓子] >> 我试着小声说话，让你难以理解我说的话。抱歉。我可以重新开始说话了。所以，这就是一个有听力障碍的人，以及 [清嗓子] 任何因为各种原因无法在设备上使用声音的人，体验一个信息只能通过声音获取的网站是什么样的。他们可能坐在公交车上，没有耳塞之类的。所以它是空的。就像这个方块一样空。现在，我又来了，我不想用 AI 来制作我的演示文稿内容。问题是我也无法使用 iMovie。但我尽力使用 iMovie。现在你们可以体验一下了。这部电影中有非常非常重要的信息。所以，尽量从中获取所有你能获得的信息。你听到什么了吗？没有，你没有。这就是一个没有字幕的视频的体验，当你听不见的时候。你没有获得视频中提供的信息。所以，哦，我们忘了什么。好了。一个小标签。这尤其适用于视频。这个环节，对于视频，我们有三个不同的 WCAG 标准要谈。对于 A 级，我们有预录视频的字幕。对于 AA 级，我们有直播视频的字幕。对于 AAA 级，我们有手语。我不会像我之前说的那么多谈论 AAA 标准，但我只是想让你知道。所以，对于预录视频的字幕，我们有一个小清单。视频需要有 VTT 格式的字幕。文本对用户来说是可见的，也是可选的。它涵盖了语音和重要的声音，并且标记的语言是源语言英语，例如。所以，我们将修复刚才给你们看的视频。所以，这里有一个源，一个视频，然后我们有一个轨道，你可以添加任意多的轨道，不同的语言，但重要的是，你至少有视频所使用的语言，这样你就不会排除任何听不到视频的人。所以你需要一个轨道。它有点像字幕，有一个源文件，一个 VTT 文件，就像我之前说的。然后我们有一个源语言，英语。我们将仔细看看字幕。它看起来有点像这样。从 00:00 [笑声] 到 00:02.5，我们有一个小鼓点。所以你们可以期待一下。然后我们从 2.5 秒到 5 秒，我说“你好，欢迎来到这个非常有信息量的视频”。我告诉过你它很有信息量。然后我说今天我们将讨论可访问性，然后会有一些愚蠢的背景音乐。所以，现在我们有了字幕，让我们看看视频。你好，欢迎来到这个非常有信息量的视频。今天我们将讨论可访问性。抱歉。你听到了吗？因为它是从我的电脑里发出来的，而不是……好的，很好。那就好。所以，这就是视频的体验。当你有了字幕，你就获得了和其他人一样的体验。即使你可能……你可能需要自己想象愚蠢的背景音乐，但至少你知道它在那里。所以这很好。抱歉，这有点令人尴尬，但没关系。对于直播视频的字幕，我们也有一个清单。它需要实时准确，足以跟上活动，在广播期间可用，并且还包括语音和重要的声音。我有两个例子说明如何做到这一点。例如，第一，我们有一个实时字幕服务。一家电视工作室使用实时字幕服务为其晚间新闻在线创建字幕。第二个例子是 CART 的使用。用户通过移动设备观看在线研讨会，包括通过通信访问实时翻译（CART）提供的字幕。所以，提供的字幕也使现场参与者受益，如果你们中的一些人，例如，听不见，你可以使用流媒体，看到字幕，然后通过它来理解我在说什么。所以，人们可以使用自己的设备。所以，这很好。而且，是的，这就是字幕。这是最后一个环节，如果你们仍然……需要一些建议，我还有一些话要说。我们有一些你可以做的小事情。参加一些简单的课程。有很多容易获得的课程，可以在工作日几个小时内完成。它们绝对值得投资。你的老板和客户应该愿意让你参加这些课程，让你成为可访问性方面的专家。然后，使用扫描仪检查你的项目。我最喜欢的扫描仪是 Pali，我……你把它安装在你的电脑上。它非常容易。我甚至让我的朋友，她在做社交营销，也安装了它，她竟然能退出 Vim。所以，如果她能退出 Vim，你就能在你的电脑上安装 Pali。所以，我使用 PI，然后我写 PI，然后粘贴 URL，然后他们会给我一份所有 WCAG 问题的清单，这对于找到我们知道几乎 80% 的网站都有的糟糕对比度问题非常有用。你也应该下载一个扫描仪并将其添加到你的管道中。我也用 Pali 来做这件事。它叫做 Palisci，我已经在 GitLab 和 GitHub 的项目上使用过，无论大小项目，它都适用。所以你把它添加到管道中，然后当你推送一些代码导致更多问题时，它会中断构建过程，并给你一份你创建的所有问题的清单。这非常方便。你应该学会如何使用屏幕阅读器，因为我们作为开发者常犯的一个错误是认为我们的客户自己就是专家。但他们不是。大卫，一个 75 岁的老人，刚开始失明，但一生从未在电脑上工作过，他知道如何使用屏幕阅读器的前提条件并不比你更好。你是专家。你才是和技术打交道的人，你也是开发应用程序的人，如果你无法在你自己的应用程序上使用屏幕阅读器，那么大卫该怎么办？然后保持设计简单。我听得太多了，哦不，设计很漂亮，但我们不能……我们负担不起让它变得可访问，因为那会花费太多。然后你需要缩减规模。如果你因为设计过于花哨而违法，那么你就负担不起那个设计。一个黑白、Times New Roman、没有任何设计的网站，比一个不可访问的网站要好得多，因为它不会将任何人排除在外。好吗？如果你现在还在制作那些积极歧视人们使用它们的网站，我会这样看着你。我只是开玩笑，因为我不期望完美。我自己也不完美。但我确实希望你们能记住今天从这次演示中学到的一到三个要点。我希望你们想要制作可访问的网站。我希望你们每次制作新东西时，脑海里都有我烦人的声音，试图添加一些闪烁的东西，或者忘记添加区域标签之类的。我希望你们知道，当事物不是为你而设计时，它是多么令人讨厌。如果你认为这次演示很烦人，那么我就把我的观点说清楚了，因为它应该是烦人的。好了，谢谢。如果你有什么问题，哦，我得到了标签。好了。如果你有什么问题，可以给我发邮件，也可以加我 LinkedIn。你可以扫描这个二维码查看整个演示文稿，下载幻灯片。然后我有一个蓝天。挪威语的“frontont”是“miss”的意思。所以这是一个“miss front”或者“fken front end”，我不知道英语怎么发音。总之，如果你想在 Slack 上联系我，我在这个 NDC Slack 频道。这是我的头像。所以，如果你找到 Elisa Christensson 并看到这个头像，那就是我。然后，如果你能给我一些关于这次演示的反馈，我将非常高兴，因为这是我第一次向任何人做这个演示。所以，我希望它还不错。谢谢。