Svelte 现实世界指南（四）

原文zh.annas-archive.org/md5/14dc6d5ba3099ee8ed407418d0a0711b译者飞龙协议CC BY-NC-SA 4.0第十五章使用过渡实现无障碍在过去两章中我们学习了如何在 Svelte 中使用过渡。当正确使用时过渡可以增强用户体验引导用户的注意力提供反馈并为界面增添一层光泽。然而对于患有前庭功能障碍的用户来说这些动画可能会感到不适甚至可能造成伤害。因此在创造引人入胜的动画和确保它们不会对有特定需求的用户产生负面影响之间取得平衡是至关重要的。在本章中我们将深入探讨使网络过渡对患有前庭功能障碍的用户更加无障碍的技术探索尊重用户对运动偏好的 CSS 和 JavaScript 方法。到本章结束时你将更好地理解网络无障碍以及如何创建更包容的 Web 应用程序以满足所有用户的具体需求或偏好。本章将涵盖以下内容什么是网络无障碍使用prefers-reduced-motion理解用户偏好减少 Svelte 过渡的运动为无法访问的用户提供替代过渡让我们从探讨什么是网络无障碍开始。技术要求本章中的所有代码都可以在以下链接找到github.com/PacktPublishing/Real-World-Svelte/tree/main/Chapter15/01-accessible-transition什么是网络无障碍无障碍是指产品、设备、服务或环境的设计以便尽可能多的人可以使用无论他们可能有什么物理、感官或认知障碍。确保网站对所有用户都无障碍至关重要。有许多残疾可能会影响用户在网站上的体验。确保网站的无障碍性使得所有人无论他们的能力如何都能平等地访问到其他人可用的相同服务和信息。许多可能妨碍网站用户体验的残疾中前庭功能障碍是其中之一。在本章中我们将特别关注提高患有前庭功能障碍的人士的无障碍性。前庭功能障碍是影响内耳和大脑的疾病它们可能导致平衡、空间定位和运动感知困难。想象一下你身体的自然平衡感不正常。这就像头晕或感觉不稳。你脚下的地面感觉不稳定你周围看到的东西似乎在移动即使你站着不动。对于患有前庭功能障碍的人来说某些视觉刺激如网页上移动或闪烁的内容可能会引发头晕、恶心或偏头痛等症状。我们在第十三章和第十四章中学习了如何添加过渡以使我们的应用程序对用户更具吸引力。然而对于有前庭功能障碍的用户这些过渡可能会无意中提供负面的体验。大多数操作系统提供可访问性设置使用户能够减少或删除动画。这些可访问性偏好可以被网络应用程序用来创建包容性的用户体验。因此让我们探索一个网络应用程序如何访问用户的可访问性偏好。使用prefers-reduced-motion理解用户偏好大多数操作系统都提供可访问性设置允许用户禁用动画效果。例如在 Windows 11 中您可以导航到设置|可访问性|视觉效果|动画效果取消选中动画效果选项以关闭动画。图 15.1Windows 11 中的动画效果选项在网络应用程序中您可以使用prefers-reduced-motionCSS 媒体查询来确定用户是否在他们的设备上激活了减少或消除非必要运动的设置。以下是如何使用prefers-reduced-motionCSS 媒体查询的示例media(prefers-reduced-motion:reduce){div{/* Removes animation */animation:none;}}在前面的代码片段中如果用户表示偏好减少运动我们将 CSSanimation属性设置为none以从div元素中移除动画。或者除了使用 CSS 之外您还可以使用 JavaScript 来确定用户对减少运动的偏好。window.matchMedia方法允许您检查网页是否匹配给定的媒体查询字符串。在下面的代码片段中我们使用window.matchMedia来测试prefers-reduced-motionCSS 媒体查询是否匹配constmediaQuerywindow.matchMedia((prefers-reduced-motion: reduce));constmatchesmediaQuery.matches;如果用户偏好减少运动则前面代码片段中matches的值将为true否则matches的值将为false。用户在浏览网页时可能会更改他们的可访问性偏好。为了在用户更改对减少运动的偏好时得到通知我们可以监听媒体查询的change事件。以下是方法constmediaQuerywindow.matchMedia((prefers-reduced-motion: reduce));mediaQuery.addEventListener(change,(){letmatchesmediaQuery.matches;});在前面的代码片段中每当用户更改他们对减少运动的偏好时传递给change事件处理器的监听函数将被调用。它将通过mediaQuery.matches评估更新的用户偏好。既然我们已经学会了如何通过prefers-reduced-motion确定用户对减少运动的偏好让我们看看我们如何可以使用它来减少有前庭功能障碍用户的 Svelte 过渡。减少 Svelte 过渡中的运动在学习了如何获取用户对减少运动的偏好之后现在让我们通过减少过渡中的不必要的动作来尊重这一偏好这可能会引发前庭不适。在下面的代码块中有一个我们 Svelte 组件的示例该组件将fly过渡应用于列表项scriptimport{fly}fromsvelte/transition;exportletlist[];/scriptul{#each listasitem}li transition:fly{{x:40}}{item}/li{/each}/ul在前面的代码中每当向列表中添加新项目时一个新的li元素将从右侧飞入并插入到列表中。这种飞行运动可能成为前庭功能障碍用户的触发因素。然而飞行过渡并非必需因为即使没有它应用程序仍然可以正常工作。因此如果用户在系统设置中表明了偏好减少运动我们应该通过减少或移除飞行过渡来尊重这一偏好。实现这一点的办法是将fly过渡的持续时间设置为0。这样过渡将不会花费任何时间来播放和完成实际上将不会播放。这是之前 Svelte 组件的修改版本如果用户偏好减少运动则不会播放fly过渡scriptimport{fly}fromsvelte/transition;exportletlist[];constmediaQuerywindow.matchMedia((prefers-reduced-motion: reduce));letprefersReducedMotionmediaQuery.matches;mediaQuery.addEventListener(change,(){prefersReducedMotionmediaQuery.matches;});/scriptul{#each listasitem}li transition:fly{{x:40,duration:prefersReducedMotion?0:400,}}{item}/li{/each}/ul在前面的代码片段中我们通过检查 CSS 媒体查询prefers-reduced-motion: reduce是否匹配来确定用户是否偏好减少运动并将此信息存储在名为prefersReducedMotion的变量中。如果prefersReducedMotion为true表示用户偏好减少运动则我们将fly过渡的持续时间设置为0。当向列表中添加新项目时用户将看不到任何飞行运动。另一方面如果用户没有前庭功能障碍并且没有表达对减少运动效果的偏好那么prefersReducedMotion将为false。在这种情况下fly过渡的持续时间将被设置为400 ms并且每当向列表中添加新项目时都会显示飞行过渡。然而并非所有过渡都会触发前庭运动障碍。例如fade过渡作为一种更微妙的动画对前庭功能障碍用户的影响较小。我们不必通过将它们的持续时间设置为0来完全消除过渡而是可以选择用更温和的过渡来替换更强烈的过渡。我们将在下一节中深入探讨这种方法。为无法访问的用户提供替代过渡前庭功能障碍用户在接触到基于运动的动画如缩放或平移大对象时可能会感到不适。然而他们通常受更微妙的动画如淡入的影响较小。将所有过渡设置为淡入效果以适应前庭功能障碍用户并非万能的解决方案。最好总是寻求用户自身的反馈。我们将继续使用上一节中的相同示例并探讨当用户偏好减少运动时如何从fly过渡切换到fade过渡。需要注意的一点是在 Svelte 中不允许对一个元素应用超过一个过渡。例如以下代码是无效的会导致构建错误div transition:fade transition:fly/这意味着我们不能将两个过渡应用于一个元素然后决定使用哪一个。我们必须找到一种方法在只对一个元素应用一个过渡的同时在不同的过渡之间切换。正如我们在第十四章中学习到的创建自定义过渡Svelte 中的过渡是一个遵循过渡契约的函数。函数的返回值决定了过渡将如何执行。因此实现一个根据条件在两个过渡之间切换的过渡的一种方法是创建一个自定义过渡该过渡根据条件返回不同的过渡配置。我们的自定义过渡可能看起来像以下代码根据用户是否偏好减少运动返回不同的过渡配置scriptfunctionaccessibleFly(node,params){constmediaQuerywindow.matchMedia((prefers-reduced-motion: reduce));constmatchesmediaQuery.matches;if(matches){// user prefers reduced motion// return a fade transition}else{// return a fly transition}}/scriptul{#each listasitem}li transition:accessibleFly{{x:40}}{item}/li{/each}/ul在前面的代码片段中我们定义了一个accessibleFly过渡这是一个更易于访问的fly过渡如果用户偏好减少运动它将切换到fade过渡。现在我们需要确定在我们的自定义accessibleFly过渡中的每个条件情况下应该返回什么。重要的是要记住在 Svelte 中过渡是一个 JavaScript 函数。因此我们可以将fly和fade过渡都作为函数来调用并且返回值将是每个相应过渡的过渡配置。通过这样做我们可以从我们的accessibleFly过渡中返回这些值从而有效地使我们的过渡可以是fly或fade过渡具体取决于用户的偏好。下面是更新后的accessibleFly过渡scriptfunctionaccessibleFly(node,params){constmediaQuerywindow.matchMedia((prefers-reduced-motion: reduce));constmatchesmediaQuery.matches;if(matches){// user prefers reduced motionreturnfade(node,params);}else{returnfly(node,params);}}/script在前面的代码片段中我们根据用户的偏好从fade或fly过渡中返回值。我们将传递给我们的accessibleFly过渡的node和params值传递给fade和fly过渡。node和params值指定了过渡应用于哪个元素并提供了用户参数例如duration和delay。这些对于fade和fly过渡来说很有用可以确定过渡应该如何执行。通过前面的代码更改我们现在有一个名为accessibleFly的可访问fly过渡默认情况下它将使元素在过渡过程中飞出。然而如果用户表示偏好减少运动accessibleFly过渡将使元素淡出。由此我们得到了一个既吸引大多数用户又考虑那些偏好减少运动的人的过渡。您可以在github.com/PacktPublishing/Real-World-Svelte/tree/main/Chapter15/01-accessible-transition找到accessibleFly过渡的代码。摘要在本章中我们探讨了无障碍访问在网页设计中的重要性以及如何实现考虑前庭功能障碍用户偏好的过渡效果。通过了解基于运动的动画对前庭功能障碍用户的影响我们可以创建更包容和用户友好的网络应用程序。我们学习了关于prefers-reduced-motion媒体查询的知识它允许我们检测用户是否在其系统设置中表明了对减少运动的需求。使用这个媒体查询我们可以调整我们的过渡效果以减少运动量或者完全移除对偏好减少运动的用户。我们还讨论了如何在 Svelte 中创建自定义过渡以实现无障碍访问。我们查看了一个名为accessibleFly的自定义过渡示例它根据用户的减少运动偏好在fly和fade过渡之间切换。这个自定义过渡考虑到了患有前庭功能障碍的用户同时为其他用户提供吸引人和有趣的过渡效果。总结来说无障碍访问在网页设计中至关重要过渡效果也不例外。通过考虑所有用户的偏好和需求包括前庭功能障碍用户我们可以创建更包容和用户友好的网络应用程序。