https://medium.com/@smashingmag/designing-for-accessibility-and-inclusion-b3d5fac8dc87

可访问性的镜头是:

  • 动画和特效镜头
  • 音视频镜头
  • 彩色镜片
  • 控制镜头
  • 字体的镜头
  • 图像和图标的镜头
  • 键盘镜头
  • 布局的镜头
  • 物质诚实的镜头
  • 可读性的镜头
  • 结构的镜头
  • 时间的镜头

动画和效果的镜头

有效的动画可以帮助使页面和品牌栩栩如生,引导用户关注并帮助定位用户。但动画是一把双刃剑。滥用动画不仅会导致混乱或分散注意力,而且对某些用户来说也可能是致命的。
快速闪烁效应(定义为每秒闪烁超过 3 次)或高强度效应和模式可导致癫痫发作,称为“光敏性癫痫”。光敏性也会引起头痛、恶心和头晕。患有光敏性癫痫的用户在使用网络时必须非常小心,因为他们永远不知道什么时候可能会导致癫痫发作
其他效果,例如视差或运动效果,可能会导致一些用户因前庭敏感而感到头晕或眩晕。前庭系统控制人的平衡和运动感。当这个系统不能正常工作时,它会导致头晕和恶心
“想象一个你的内部陀螺仪无法正常工作的世界。就像喝醉了一样,事情似乎会自行移动,你的脚在你的脚下似乎从来都不是很稳定,你的感官比你的身体移动得更快或更慢。”

  • 持续的动画或动作也会分散用户的注意力,尤其是难以集中注意力的用户。GIF 尤其有问题,因为我们的眼睛被运动所吸引,很容易被任何不断更新或移动的东西分散注意力。

这并不是说动画不好,你不应该使用它。相反,您应该了解为什么要使用动画以及如何设计更安全的动画。一般来说,你应该尽量设计覆盖距离小的动画,匹配其他移动物体(包括滚动)的方向和速度,并且对屏幕尺寸相对较小。
您还应该提供控件或选项来满足用户的体验。例如,Slack 允许您将动画图像或表情符号隐藏为全局设置和每个图像。
要使用Lens of Animation and Effects,请问自己以下问题:

  • 是否有任何可能导致癫痫发作的影响?
  • 是否有任何动画或效果可能通过使用运动导致头晕或眩晕?
  • 是否有任何动画可能会因不断移动、闪烁或自动更新而分散注意力?
  • 是否可以提供控件或选项来停止、暂停、隐藏或更改任何动画或效果的频率?

音视频镜头

“谨慎使用自动播放。自动播放可以是一种强大的参与工具,但如果播放了不想要的声音,或者他们认为由于不需要的视频播放而导致不必要的资源使用(例如数据、电池),它也会让用户感到厌烦。”

  • 是否有任何音频或视频可能会因自动播放而烦人?
  • 是否可以提供控件来停止、暂停或隐藏任何自动播放的音频或视频?
  • 视频是否有文字记录和/或字幕?

    彩色镜片

    颜色在设计中起着重要的作用。颜色唤起情感、感觉和想法。颜色还可以帮助加强品牌的信息和认知。然而,当用户看不到颜色或以不同方式感知颜色时,颜色的力量就会消失。

  • 如果从设计中去掉颜色,会失去什么意义?

  • 不使用颜色如何提供意义?
  • 是否有任何颜色过饱和或具有高对比度,可能导致用户过度刺激或不舒服?
  • 所有文本、图标和焦点指示器的前景色和背景色是否符合 4.5:1 的对比度准则?

    控制镜头-间距留白

  • 是否有任何控件不够大,让人无法触摸?

  • 是否有任何控件靠得太近而容易触错?
  • 另一个控件或可点击区域内是否有任何控件?
  • 所有控件都有可见的文本标签吗?

    字体

    对于许多用户来说,装饰性或草书字体样式更难阅读,但对于有阅读障碍的用户来说尤其成问题。小字体、斜体文本和全大写文本对用户来说也很困难。总体而言,更大的文本、更短的行长、更高的行高和增加的字母间距可以帮助所有用户获得更好的阅读体验。
    要使用Lens of Font,请问自己以下问题:

  • 设计是否足够灵活,字体可以被用户修改到舒适的阅读水平?

  • 字体样式是否易于阅读?

    图像和图标的镜头

    他们说,一张图片胜过千言万语。” 不过,你看不到的照片是无语的,对吧?
    图像可用于设计以传达特定的含义或感觉。其他时候,它们可以用来简化复杂的想法。无论图像是哪种情况,都需要告知使用屏幕阅读器的用户图像的含义。
    作为设计师,您最了解图像所传达的含义或信息。因此,您应该使用此信息对设计进行注释,以便以后不会遗漏或误解。这将用于为图像创建替代文本。

  • 是否有任何图像包含如果不可见会丢失的信息?

  • 我如何以非视觉方式提供信息?
  • 如果图像由用户控制,是否可以为他们提供一种输入替代文本描述的方法?

    键盘

    用户使用键盘而不是鼠标的原因有很多。使用屏幕阅读器的用户使用键盘阅读页面。颤抖的用户可能会使用键盘,因为它比鼠标提供更好的准确性。即使是高级用户也会使用键盘,因为它更快、更高效。
    使用键盘的用户通常使用 tab 键按顺序导航到每个控件。Tab 键的逻辑顺序极大地帮助用户了解下一次按键将把他们带到哪里。在西方文化中,这通常意味着从左到右,从上到下。意外的标签顺序会导致用户迷失方向,不得不疯狂地扫描焦点所在的位置。

  • 什么样的键盘导航顺序对设计最有意义?

  • 键盘用户如何以最快的方式获得他们想要的东西?
  • 焦点指示器是否始终可见且视觉上不同?

    布局的镜头

  • 布局是否具有有意义且合乎逻辑的顺序?

  • 当在小屏幕上查看或放大到 400% 时,布局会发生什么情况?
  • 由于用户交互而相关或更改的内容是否彼此靠近?

    可读性的镜头

    您还应该用标题、列表或图像来分解内容,以便让读者在精神上休息并支持不同的学习方式。使用标题对信息进行逻辑分组和总结。标题、链接、控件和标签应清晰且具有描述性,以增强用户的理解能力。
    要使用可读性镜头,请问自己以下问题:

  • 语言是否简单明了?

  • 每个段落都集中在一个想法上吗?
  • 是否有任何长段落或长段不间断的文本?
  • 所有标题、链接、控件和标签是否清晰且具有描述性?

结构的镜头

  • 地标元素(页眉、导航、主要和页脚)
    允许屏幕阅读器跳转到设计中的重要部分。
  • 标题( h1→ h6)
    允许屏幕阅读器扫描页面并获得高级概览。屏幕阅读器也可以跳转到任何标题。
  • 列表(ul和ol)
    将相关项目组合在一起,并允许屏幕阅读器轻松地从一个项目跳转到另一个项目。
  • 按钮
    触发当前页面上的交互。
  • 链接
    导航或检索信息。
  • 表单标签
    告诉屏幕阅读器每个表单输入是什么。

要使用结构透镜,请问自己以下问题:

  • 我可以勾勒出我设计的粗略 HTML 结构吗?
  • 如何构建设计以更好地帮助屏幕阅读器理解内容或找到他们想要的内容?
  • 我如何帮助实施设计的人理解预期的结构?

    时间的镜头

    在设计中,您可能需要定期限制用户可以花费在任务上的时间。有时可能是出于安全原因,例如会话超时。其他时候可能是由于非功能性要求,例如时间受限的测试。
    无论是什么原因,您都应该了解某些用户可能需要更多时间才能完成任务。一些用户可能需要更多时间来理解内容,其他用户可能无法快速执行任务,而且很多时候他们可能只是被打断了。
    “设计师应该假设人们在活动中会被打断”
    — 日常用品的设计