【第2309期】包容性设计原则
前言
一名前端，有些是润物细无声的操作。今日前端早读课文章由@排骨翻译分享。
正文从这开始~~
These Inclusive Design Principles are about putting people first. It's about designing for the needs of people with permanent, temporary, situational, or changing disabilities — all of us really.
这些包容性设计原则是关于以人为本。它是关于为永久性、暂时性、情境性或改变性残疾的人的需求而设计的——我们所有人都是如此。
They are intended to give anyone involved in the design and development of websites and applications - designers, user experience professionals, developers, product owners, idea makers, innovators, artists and thinkers - a broad approach to inclusive design.
它们旨在为任何参与网站和应用程序设计和开发的人——设计师、用户体验专业人员、开发者、产品所有者、创意创造者、创新者、艺术家和思想家——提供广泛的包容性设计方法。
Provide comparable experience 提供类似的体验
Ensure your interface provides a comparable experience for all so people can accomplish tasks in a way that suits their needs without undermining the quality of the content.
确保你的界面为所有人提供了可比较的体验，这样人们就可以在不影响内容质量的情况下，以符合他们需求的方式完成任务。
Full description 完整描述
Whether out of circumstance, choice, or context people are diverse. As people use different approaches and tools to read and operate interfaces, what the interface offers each user should be comparable in value, quality, and efficiency.
不管有没有考虑到环境、选择与情境，人就是有各种不同的类型。因为人们使用不同的方法与工具来阅读和操作界面，界面应让每位使用者有相同的价值、品质与效率。
Examples 范例
Content for alternatives: Having a basic alternative, whether it's alt text, a transcript, audio description, or sign language, makes the content accessible but to be equivalent it needs to capture the essence of the original.
替代内容呈现：至少有些替代内容，不管是替代文本、文本、音频描述或手语，让内容触及更广泛，而且还要跟原本内容的精髓相当。
Ergonomic features: Providing synchronized closed captions makes your video accessible. But making them customizable, color coded, and repositionable provides a more comparable experience.
人体工程学功能：无障碍的影片提供同步字幕。如果还可以自订色码和位置，那就是更相等的体验。
Notifications: Notifications that appear in an interface are visually obvious but require proactive discovery by screen reader users. A comparable experience for blind users, can be achieved by using a live region. The notification then requires no explicit action on the part of the user.
通知：界面上出现的通知在视觉上很明显，但需要屏幕阅读器用户主动发现。盲人用户也可以通过使用活动区域获得类似的体验。这类的使用者就不必因为通知，而得进行与往常不同的动作。
Consider situation 考虑使用情境
People use your interface in different situations. Make sure your interface delivers a valuable experience to people regardless of their circumstances.
人们在各种不同的情境使用介面。请确保介面在任何环境，都能传递有价值的体验。
Full description 完整描述
People are first time users, established users, users at work, users at home, users on the move, and users under pressure. All of these situations can have an impact. For those who already find interaction challenging, such as those with disabilities, this impact may make usage particularly difficult.
人们会是初次使用者、习惯使用者；在工作场所、在家里、移动中还有感到压力的情况，这些情境都会造成影响。对于那些已经发现交互具有挑战性的人，比如残疾人，这种影响可能会使使用变得特别困难。
Examples 范例
Colour contrast: When using an interface outdoors, good contrast lessens the impact of bright sunshine.
色彩对比：在户外使用界面时，良好的对比度可以减少明亮阳光的影响。
Context sensitive help: Users may need help when they first encounter a complex form or interaction. This help may become redundant, even distracting, as a user becomes more familiar with the form or interaction. Context sensitive help provides the user with choice as to when they access help and better control over the page.
根据情境辅助：使用者首次遇到复杂的表单或交互时，可能需要帮忙；使用者熟悉表单或互动后，这些辅助变得多余，甚至觉得干扰。根据情境的辅助让使用者可以选择何时取得协助，更能掌握页面。
Captions on the go: You're aware that the video content you are providing will be consumed on mobile devices, which may be in public spaces where people might prefer to consume the content without being antisocial. For smaller viewports, sound is switched off and captions activated by default.
随时随地的字幕：你应该有注意过视频是在移动设备上观看，也就是人们通常不想观看时惹怒路人的公开场合。在比较小的屏幕上，默认情况下是静音且打开字幕。
Be consistent 保持一致
Use familiar conventions and apply them consistently.
使用易于理解的常规，并且一致地使用。
Full description 完整描述
Familiar interfaces borrow from well-established patterns. These should be used consistently within the interface to reinforce their meaning and purpose. This should be applied to functionality, behavior, editorial, and presentation. You should say the same things in the same way and users should be able to do the same things in the same way.
界面能够易于使用，来自于验证过的操作模式。它们在界面上的使用原则应该要一致，借以强化意义与目的。这样的作法必须在功能、行为、文体与展示时皆适用。你应该要用相同的方法讲相同的事，这样子，使用者才会以相同的方式做相同的事。
Examples 范例
Consistent design patterns: Use consistent web and platform design patterns to help build familiarity and understanding.
一致的设计模式：使用一致的设计模式，让网站与平台建立起熟悉感和理解。
Consistent editorial: Use plain language consistently across platforms including editorial that is relied on by screen reader users such as text alternatives, headings, labels for buttons and so on. Keeping editorial style consistent is also important, such as making sure the top of articles always have a clearly marked summary paragraph, or making sure bullets always start with a bolded definition.
一致的编辑：在每个平台都一致地使用简单的语言，尤其是屏幕阅读器的使用者依赖的替代文字、标题、表单标签与按钮⋯等。保持编辑风格的一致性也很重要，例如文章顶部都有标注清楚的概要，或清单的开头都是粗体字释义。
Consistent page architecture: Use consistent page architecture across templates to help people scan and navigate key content.
一致的页面结构：在每个范本使用一致的页面结构，让人易于扫视、切换重点内容。
Give control 赋予掌握感
Ensure people are in control. People should be able to access and interact with content in their preferred way.
确保人们是在掌握的情况。他们应该能够以自己偏好的方式看到内容、与其互动。
Full description 完整描述
Do not suppress or disable the ability to change standard browser and platform settings such as orientation, font size, zoom, and contrast. In addition, avoid content changes that have not been initiated by the user unless there is a way to control it.
请勿改写或关闭标准浏览器和平台设定可以改变的功能，例如方向、字体大小、缩放与对比。此外，除非有方法控制，避免不是使用者主动触发的内容改变。
Examples 范例
Scrolling control: 'Infinite scrolling' can be problematic, especially for users navigating by keyboard because they can't get past the stream of refreshing content. Give the option to turn off this feature and replace it with a 'load more' button.
滚动控制：「无限滚动」会带来许多麻烦，尤其是以键盘操作的使用者，他们无法跳过不断更新的内容。请提供关闭此功能的选项，改用「加载更多」按钮。
Make it stop: Some users find that animations or parallax scrolling cause nausea, and others find them plain distracting. Where they play automatically, they should at least be easy to stop, by providing prominent playback controls.
可以静止：有些使用者因为动画或视差滚动而造成晕眩，有些人则是单纯觉得看不到重点。自动播放的地方，应该至少能够轻松地透过明确的播放控制停止。
Allow zoom: There are many reasons why a user may want to operate the pinch-to-zoom gesture on their touch device. Make sure it is not suppressed, and that the content does not get obscured when it is put to use.
允许缩放：使用者在触控屏幕设备上以手指使用缩放(pinch-to-zoom)的原因千百种。请确认没有覆盖这功能的作用，内容也没有在使用后看起来是模糊的。
Offer choice 提供选择
Consider providing different ways for people to complete tasks, especially those that are complex or non standard.
请考虑让人们能够不只以一种方式完成事情，尤其是复杂或非标准的。
Full description 完整描述
There is often more than one way to complete a task. You cannot assume what someone's preferred way might be. By providing alternatives for layout and task completion, you offer people choices that suit them and their circumstances at the time.
通常，完成事情的方法不只一种，你无法假设某人的偏好。提供不同的布局与完成任务方式，就是让人们能挑选当下适合自己与情境。
Examples 范例
Multiple ways to complete an action: Where appropriate, provide multiple ways to complete an action. On mobile swipe to delete an item can be supported together with an edit button that allows you to select items then delete. An example of this is in iOS mail.
多种完成动作的方法：在适当时机，提供多种完成动作的方法。在手机上，拨动删除可以搭配编辑按钮，接着删除已选项目。这种方法的范例是iOS邮件。
Layout: Where there are long lists of content consider offering a grid or list layout option. This supports people who may want larger images on screen or smaller rows.
排版：如果有很长的内容列表，请考虑能够选择以网格状或列表布局呈现。想要在屏幕上呈现大一点的图片，或较小的排状都可以选择。
Accessible alternatives: Alternative ways of presenting data, such as data tables for info graphics, should be available to all users as an option rather than a hidden link just for screen reader users. Accessible alternatives can benefit not just a specific target group but all users as long as we offer the choice.
无障碍替代方案：可供选择的数据显示方式，例如每个人都应该可以看到资讯图表用的资料表格。而不是放个只有屏幕阅读器使用者专用的隐藏链接。无障碍替代方案并不仅仅只有特定对象获益，而是只要能提供选择，所有使用者受益。
Prioritise content 内容优先顺序
Help users focus on core tasks, features, and information by prioritising them within the content and layout.
以内容与排版安排核心任务、功能和信息进行优先顺序，有助于使用者专注其中。
Full description 完整描述
Interfaces can be difficult to understand when core features are not clearly exposed and prioritised. A site or application may provide lots of information and functionality, but people should be able to focus on one thing at a time. Identify the core purpose of the interface, and then the content and features needed to fulfill that purpose.
核心功能没有清楚地公开和优先显示时，界面就会变得难以理解。网站或应用程序里，可能会提供大量信息和功能，只不过，人们一次只能专注一件事。确定界面的核心目的，然后确定实现该目的所需的内容和特性。
Examples 范例
Keep task focused: Progressively reveal features and content when needed, not all in one go.
保持任务集中：有需要的时候，才逐步地显示功能与内容。而不是一口气全部呈现。
Prioritising tasks: An email application is principally for writing and reading email. The "compose" button is, therefore, present on all screens, and early in the focus order. The inbox is prioritised over other lists of email, such as "sent" and "spam" messages. Less used features such as tagging or organizing email into folders appear later in the focus order, as they will generally only be used when the primary task of reading the email is complete.
安排任务的优先顺序：基本上，电子邮件应用程序主要用于写作和阅读电子邮件。因此，「编辑」按钮就要在所有画面都看得到，专注顺序(focus order)也是很前面。收件箱会比其他类型的电子邮件列表重要，例如：已发送和垃圾邮件。像是标签和整理进资料夹这些比较少用到的功能，因为它们通常是主要任务完成之后才开始使用，就会在专注顺序比较低的地方才出现。
Prioritising content: The primary content on a news article page is the story, therefore it should come before other content, both visually and in the source order. Related content, such as similar articles, should follow it, and unrelated content after that.
对内容进行优先顺序：新闻型文章页面的主要内容是报导。因此，报导应该要在视觉与专注顺序安排在其他内容之前。接下来是类似文章的相关内容；不相关的内容放在更后面。
Prioritising editorial: Editorial for links, headings and buttons should use plain language and put the primary text first. This applies to both visible and hidden text. This makes the text easy to scan both visually and audibly for screen reader users. Plain language also benefits non native speakers and is easier to translate.
编辑的优先顺序：编辑的链接，标题和按钮应该使用简单的语言，且重点文字优先出现。看得到与隐藏的文字皆适用。对于屏幕阅读器的使用者来说，这不论是视觉还是听觉都可以轻易地扫视。通俗易懂的语言对于非母语人士也很有用，且易于翻译。
Add value 提升价值
Consider the value of features and how they improve the experience for different users.
考虑功能的价值，以及它们如何改善不同用户的体验。
Full description 完整描述
Features should add value to the user experience by providing efficient and diverse ways to find and interact with content. Consider device features such as voice, geolocation, camera and vibration API's, and how integration with connected devices or a second screen could provide choice.
特性应该通过提供高效、多样的方法找到内容、与之互动，使得功能可以为使用者体验提高价值。把语音、地理位置、相机和震动API 等功能纳入考量，还有跟连结设备或第二台屏幕所能提供的选择。
Examples 范例
Integration with connected devices or second screen: Using voice interfaces to control multimedia, search for content, output from music or TV adds value for people who struggle to use other interfaces.
与连结设备或第二台屏幕集成：使用语音界面控制多媒体、搜索内容、音乐或电视的输出，为使用其他界面有困难的人增加价值。
Integration with platform APIs: Enhance functionality using platform features. The vibration API makes notifications more usable by deaf and hard of hearing people while the geolocation API makes it easier for people with mobility impairments to use location based services.
与平台API整合：使用平台功能加强功能性。震动API使得通知功能对于听不见或听觉障碍人士来说，会更有用。而地理定位API让移动障碍的人可以使用根据位置的服务。
Make task completion easier: Add a 'Show password' button to input fields so users can verify they have correctly inputted text, or add touch identification for password protected areas.
更轻松完成任务：使用者可以通过「显示密码」按钮检查是否正确输入。或者，在密码保护区域使用指纹辨识。
关于本文
译者：@排骨
作者：@Henny Swan, @Ian Pouncey, @Heydon Pickering, @Léonie Watson
原文：https://inclusivedesignprinciples.org/
为你推荐
欢迎自荐投稿，前端早读课等你来。