原文：https://developer.spotify.com/documentation/accessibility
原文日期：无日期
翻译日期：05/17/23 10:29:16 Wed CST
翻译更新日期：05/21/23 11:07:50 May CST
可访问性 Accessibility（以下缩写为 A11y——表示，字母 “a”，后跟 11 个字符，最后是“y”）是指（一）让所有人都能使用应用，并且（二）为用户提供平等的体验，无论场景和行动能力。
Spotify 的使命是让数十亿的粉丝有机会享受到艺术家的作品，并受其启发。我们的应用面向每个人，所以可访问性是 Spotify 的核心关注点。作为将 Spotify 体验扩展到其它社区的开发者，无论用户通过它们的设备如何使用我们的应用和接口，我们都有责任为用户创造一个安全、公平的空间。
The WCAG map by Intopia 的摘要版本
“哪些人的体验会被排除在外？”，每当我们在应用里决策如何实现某功能的时候都要回答这个问题。在日常生活中，那些只能通过楼梯进入的商店已经积极地做了选择，它们排除了轮椅使用者、带婴儿车的父母，以及带着轮子背包的购物者。每一个设计决策都是关于包容和缺乏包容的态度。
《Play for All Guidelines》和《The Inclusive City》的合著者，Susan Goltsman，一般把包容性描述为允许用户以多种方式体验一个事物（比如你的应用），而不是为所有人提供一种体验。
如果你对于问题“哪些人的体验会被排除在外？”，终极目标是得到“没有人会被排除。”的回答——那么这篇文章就是您用来提供高质量应用程序的指南，您的应用程序会有和 Spotify 平等包容性相当的价值观。
人工测试可访问性是必不可少的，因为自动化测试只能捕捉到一小部分问题，而且不能从整体进行有效的体验。
作为应用程序的开发者，请记住，在你开发应用程序的时候，你要可以无缝地切换控件的 a11y 的打开和关闭，就像电灯开关让用户可以自主决定灯泡的开关一样。
配置您的设备以便快速简单地使用辅助技术进行测试，克服不适感、节省准备时间。你会发现你的测试将越来越频繁。
正确的 A11y 可以带来高质量应用。越早考虑 a11y 就会有越少的回归过程，并且能保证您的应用从最开始就照顾到了每个人。
本指南假设您已经对 a11y 有了基本了解。如果您需要进一步的参考资料，万维网联盟（W3C）的 Web A11y 机构已经发布了 A11y 基础资源，内容包含一系列主题和更深入的内容，而且也和本指南相关联。
下面的图片是 Jason Dippel 关于可访问性纳入软件开发生命周期（SDCL）的早期阶段的一些看法。我们同意像下面这样关于可访问性应该被纳入 SDCL 的建议：1. 在 Wireframe 和 Product Backlog 阶段之间，作为用户体验设计（UX Design）的一部分，2. 作为 Sprints 的一部分，然后通知 Sprints Backlog，并且作为 Product Backlog 和 Deployed product 之间的用户体验研究（UX Research）的一部分，这样能有效节省您的成本。
本指南的重点是提高您的技能，以便您可以在已经开发的应用里找到 a11y 的问题，并且进行修复，让您在开发新应用的时候能够使用本指南提供的工具。
本指南分为 3 个章节，都以任务清单的方式引导你创建高质量和可访问的应用。章节都是按照易于实现的顺序排布，但是每一条建议同等重要，都应该在开发里优先考虑。它们是：
可访问性 quick wins 是指只需要很短时间实施的修改，是所有人都能做到的第一步。
在你应用中，所有的视觉、非文字元素（图片、gif、图形、图表）都应该附有可替换文字描述（替代文字），这些文字描述非文字元素的细节，这些文字为辅助技术用户的提供了必要的环境和背景。
A11y 行动：
- 为所有的图片元素添加文字描述属性，例如，
<img src="https://developer.spotify.com/cats.gif" alt="两只小猫玩毛线球">（这样，如果请求失败，将会在原图片展示的区域展示文字“两只小猫玩毛线球”）； - 或者，在非文本元素之下添加一些细节标注；
- 对于完全装饰性图片，添加空的
<alt="">属性，以便于屏幕阅读器跳过它们。
资源：
作为应用程序开发者，遵守系统设定是很重要的。应用内设定同样重要，但是应该要被用户设定的系统首选项所覆盖。
大家知道动画会导致癫痫，包括恶心、头痛等等。对用户来说，根据偏好关闭动画很常见，例如优化设备性能和为电池省电。所以，以包容、避免伤害的方式引入动画是很重要的。
A11y 行动：
- 采用来自 WCAG 的建议，动画的时候小于 3 次闪动，该建议规定在一秒内动画不能超过最多 3 次闪动；
- 让用户有完全能力控制应用的动画，让他们可以暂停动画，或者按照用户的意愿完全关闭动画；
- 如果用户交互页面（例如上下滚动）会导致动画，添加可以禁用或者减少运动引起的动画的限制选项。
资源：
按钮是应用的用户触发行为的重要方式。
A11y 行动：
- 纯图标按钮应该包含标注信息，用来提供按钮操作的上下文场景；
- 禁用状态的按钮通常用来表示，在进入下一步前需要完成当前的操作。然而，屏幕阅读器不能访问禁用按钮，而且对于辅助技术用户，往往不清楚完成一系列操作之后会发生什么。添加标注信息来描述按钮为什么被禁用，以及需要做什么才能激活按钮；
- 关于按钮的尺寸，确保为用户提供了宽松的操作区域，例如，iOS 的最小触摸尺寸是 44x44 点，安卓则是 48x48 点；
- 默认考虑使用内置按钮（网页和移动端），因为它们有预设的样式和 a11y 特性，例如触摸尺寸、tab 聚焦、聚焦高亮以及交互快捷键（不是每个人都使用指针设备进行交互）。
资源：
- 链接、图片和其它可点击元素的可访问性指南
- 访问本指南的分享按钮章节来查看关于分享按钮的细节和最佳实践。
色彩对比度衡量颜色之间的差异程度——相对的颜色有最高的对比度，色轮上相邻的颜色有最小的对比度。
A11y 行动：
WCAG 推荐
- 背景和前景的色彩对比度应该要达到 4.5:1；
- 图标和背景的对比度要达到 3:1。
资源：
- 你可以查看这个 WebAIM 的色彩对比度资源来指导应该达到什么对比度；
- 你可以用 WebAIM 的色彩对比度工具来确认您有合适的对比度。
页面标题是屏幕阅读器和其它辅助技术在页面导航的主要方式。有效识别标题有利于辅助技术用户快览内容，并跳转到感兴趣的区域。
A11y 行动：
- 使用 HTML 标签来标注标题。例如，这是一份在 web 使用
<header>标签的指南； - 按层次组织标题，不要跳级，比如 H1 后面是 H2，不要跳到 H3，也不要跳到 H4；
- 在原生移动端应用里，您也可以配置标题，让用户快速探索并快速导航，通过使用简单的手势在标题间跳转。
资源：
模态弹窗是弹出的一段信息，通常用于促使用户完成指定操作，或者提供更多的内容信息。
A11y 行动：
由于模态弹窗同样提供了有效信息，但是同时也破坏了页面原先的信息流，所以为用户提供完全可控的打开和关闭功能是很重要的。一个可访问的模态弹窗是这样的
- 为屏幕阅读器提供正确信息；
- 正确管理键盘焦点，您可以使用 HTML 和 ARIA 来提供语义信息，使用 JavaScript 来改变行为，使用 CSS 来指定样式。
一个常见错误是，打开模态弹框后焦点没有聚焦在弹框之上，又或者聚焦到了模态弹窗之后的内容里。请测试应用的模态弹框，并且修复纠正行为。
资源：
重要的信息应该被以多种方式传递，例如——色彩、触觉、声音、文本与图标——人人可感知。
考虑表单里的一个文本框，当用户输入非法信息，文本框就会高亮红色：如果开发者没有积极适配，色盲用户也许无法感知，屏幕阅读器也许无法识别。在出问题处旁添加一些信息，来说明问题的缘由和解决问题的办法，让每个人都能理解问题。冗余在这种情况反而更有帮助。你呈现信息的方式越多，越方便用户理解。
资源：
如果你的应用程序为用户提供操作选择，确保首先在这些选项中展示伤害程度最小的选项。例如，当要求用户确认选中的删除播放列表的操作的时候，首先应该高亮OK，而不是返回；或者如果有返回和确认作为选项，首先应该高亮返回，因为返回更容易做补救措施（返回之后可以撤销重做）。
出于时间成本考虑，如果用户选择了取消，考虑回到最近的状态，也就是表单被填满的状态，而不是丢弃所有输入、清空表单的状态。
为用户提供在不同社交媒体上分享应用程序的方法，是传播应用、吸引用户的常见办法。一个极简常用的方法是用一个带有社交媒体图标的超链接。
可访问性图标是指能够被平等访问的图像，并且它的功能能够被所有用户理解。这样做让您的图标可访问：
A11y 行动：
- 为图标添加替代文字，来描述图标的意义，例如，点击之后的预期。阅读更多关于替代文字的最佳实践，查看图片和替代文字章节；
- 为图标选用和背景颜色具有高对比度的颜色，阅读色彩对比度一节，查看最佳实践；
- 通过在图标旁边加上伴随文字，保持意义清晰，通常是类似图标旁边的一个文字标签。
给图标添加替代文字或者在图标旁添加伴随文字，都是无障碍实践。
资源：
Medium-term wins 是指要比可访问性 quick wins花费更多的时间来实现的修改。非常关键，所以我们强烈建议您能够把这些修改优先纳入应用程序中。
菜单和它的子项目（列表）的结构化展示为辅助技术提供了良好基础，方便了辅助技术用户访问某个子项和相应功能。用语义对菜单编码，让其适应不同的场景，例如不同尺寸的屏幕、不同缩放级别、不同的辅助技术。
A11y 行动：
- 把菜单放在您应用程序所有页面的固定一致的位置上；
- 文本标注您的菜单，这样用户能够轻易理解和区分；
- 使用 HTML 或 ARIA 来高亮当前被选中/激活的选项；
- 阅读列表与分组来查看菜单选项的列表和分组的最佳实践。
检测无障碍导航最好的方法之一，就是挑战只用键盘或者不用鼠标访问网页，或者用屏幕阅读器访问手机应用。
在应用程序里对有联系的部分进行分组，这可以让使用屏幕阅读器进行导航的用户更容易跟进流程、把控全局。任何在视觉上是分组的部分，在语义上也要同样如此。
A11y 行动：
- 关于有序和无序列表，
- 对于菜单的每一个子项使用无序列表，这样可以用随机顺序进行访问和消费菜单，
- 如果是重要的系统性导航，使用有序列表实现菜单，
- 遵守列表规则，
- 有序或无序列表的子元素只有 list 标签（
<li>），避免添加其它元素。
资源：
语义元素是指提供了上下文以及内容性质的元素，例如<header>、cite、section、p、footer，等等，例如<div>、<span>这样的非语义元素则不提供目标内容的上下文。
构成语义元素的四个属性是
- name（一个元素的标签）；
- role（描述元素的功能，例如输入 input 和按钮 button）；
- value（对 role 进行补充，例如 input=text）
- state（表达元素的配置情况，例如已打开 enabled、已收起 collapsed 等等）。
A11y 行动：
- 把所有
<div>、<span>之类的非语义标签替换为语义标签。
资源：
Intensive Wins 是指那些比 quick wins 和 medium-term wins 需要做更多时间进行实现的改进。都很重要，我们强烈建议优先纳入您的应用里。
挑选和熟练一种辅助技术，例如语音对讲技术，例如 voice-over 或者 NVDA 这种提供了很多免费范例的开源软件（OSS）。
正如在语义提到的，states 是分配给元素的语义属性，用来指定元素内容的配置状态，例如已选中、已打开、已展开、已隐藏等等。
状态和属性归为四类：(i) 拖放属性；(ii) 实时区域（live-region）属性；(iii) 组件属性；(iv) 关系属性。
A11y 行动：
- 定义元素时，尽管声明状态是可选的，但是便于辅助技术使用，声明状态仍是最佳实践。
资源：