ios web应用程序_使用ios 13改善应用程序的可访问性

I know, iOS 13 has been with us for quite some time now, WWDC 2020 is just around the corner and we hope Apple will present again a ton of new accessibility features and improvements coming with iOS 14.

我知道，iOS 13已经存在了很长一段时间，WWDC 2020即将来临，我们希望苹果能够再次展示iOS 14带来的大量新的辅助功能和改进。

But it is almost Global Accessibility Awareness Day! And it is still a great time to catch up and implement everything new that was presented around accessibility in iOS 13 - it was a packed year! - so you are even readier to adapt your apps and fully embrace iOS 14. So I just thought it is a great moment to quickly remember all we can do to improve our app’s accessibility with iOS 13.

但这几乎是全球无障碍意识日！ 现在仍然是赶上并实施iOS 13中有关辅助功能的所有新功能的好时机-整整一年！ -因此，您甚至更愿意适应您的应用程序并完全采用iOS14。因此，我认为这是一个绝佳的时机，可以快速记住我们为改善iOS 13对应用程序的可访问性所做的一切。

Platforms State of the Union

平台联盟国

We all know how much Apple cares about accessibility. Last year it was packed of new features, and accessibility was one of the core topics they covered in the Platforms State of the Union session.

我们都知道Apple非常关心可访问性。 去年，它挤满了新功能，而可访问性是他们在国际电联平台国会议上涵盖的核心主题之一。

The first thing they talked about was Discoverability. Apple really wants everyone to use any of their devices right out of the box, so they made possible to configure your accessibility preferences on iOS’ Quick Start onboarding process. And they also moved Accessibility to the top level of Settings so it gives it visibility and it makes it easier to find.

他们谈论的第一件事是可发现性。 Apple确实希望每个人都可以立即使用他们的任何设备，因此他们可以在iOS的快速入门入职流程中配置您的辅助功能首选项。 他们还将“辅助功能”移到“设置”的顶层，以使其具有可见性，并且更易于查找。

But star of the show was Voice Control. Apple presented this new mechanism that lets you use your device with a series of voice commands. You’ll probably think immediately what is new about it if we have Siri already. But Voice Control is a more generic tool that lets you completely interact with any part of the system and with any app you have installed. And more importantly, it runs fully on-device, so it will work even if you are offline.

但是节目的明星是语音控制。 苹果公司介绍了这种新机制，使您可以通过一系列语音命令来使用设备。 如果我们已经有了Siri，您可能会立即想到关于它的新功能。 但是语音控制是一种更为通用的工具，可让您与系统的任何部分以及已安装的任何应用程序完全交互。 更重要的是，它可以在设备上完全运行，因此即使您处于离线状态也可以使用。

You can refer to items in the screen by name, by number, or you can use a grid-based layout for finer control. You can edit text, you can speak gestures… It uses the camera to check if you are speaking to the device or if you are looking somewhere else. It works like magic!

您可以按名称，按编号引用屏幕中的项目，也可以使用基于网格的布局进行更好的控制。 您可以编辑文本，可以说手势...它使用相机检查您是否在与设备说话或在其他地方看。 它像魔术一样工作！

If your app supports VoiceOver well, chances are that it will already be pretty good with Voice Control. But we are not happy with “pretty good”, we want it to be excellent, so we’ll see how you can improve your app’s experience with Voice Control in a minute.

如果您的应用程序很好地支持VoiceOver，则很有可能已经有了Voice Control了。 但是我们对“非常好”并不满意，我们希望它表现出色，因此我们将在一分钟内看到如何改善您的应用程序的语音控制体验。

语音控制 (Voice Control)

A great thing I quickly realised about Voice Control is that it is a great way for testing your apps for accessibility. Open your app, go to a screen you want to test and say “Show names”. Voice Control will overlay all the accessibility labels you’ve configured. A quick way to check if they make sense or if there are any missing.

我很快就认识到语音控制的一大优点是，这是测试应用程序可访问性的好方法。 打开您的应用，转到您要测试的屏幕，然后说“显示名称”。 语音控制将覆盖您已配置的所有辅助功能标签。 快速检查它们是否有意义或缺失的快速方法。

What can you do to further support Voice Control? If your app is accessible, you’ll see that it already works quite well. But the accessibility labels you’ve configured might not be the best for Voice Control. This can be because you may want them to be shorter and easier to say. Or, to make it a bit more intuitive, you may want to provide different alternatives of what the user can say so they don’t have to remember a specific label.

您可以怎么做才能进一步支持语音控制​​？ 如果您的应用可以访问，您会发现它已经可以很好地运行了。 但是，您配置的辅助功能标签可能不是语音控制的最佳选择。 这可能是因为您可能希望它们更短并且更容易说。 或者，为了使其更加直观，您可能希望提供用户可以说的不同选择，从而使他们不必记住特定标签。

For this, you can provide an array of alternative input labels like this:

为此，您可以提供一系列替代输入标签，如下所示：

// Provide input alternatives for Voice Control
settingsButton.accessibilityUserInputLabels = ["settings", "configuration", "cog"]

This also comes handy for cells in table and collection views where accessibility labels are pretty descriptive. And that is ok, but you may want to provide a more concise label to select them. For example, a banking app may show the merchant, amount, and date for each transaction. A good accessibility label describes all that information. But for easily selecting one transaction with Voice Control, you can provide an accessibility user input label that could be just the merchant.

对于可访问性标签非常具有描述性的表和集合视图中的单元格，这也很方便。 没关系，但是您可能想要提供一个更简洁的标签来选择它们。 例如，银行应用可以显示每笔交易的商人，金额和日期。 良好的可访问性标签描述了所有这些信息。 但是，为了通过Voice Control轻松选择一项交易，您可以提供一个可访问性用户输入标签，该标签可能只是商家。

Apple documentation: https://developer.apple.com/documentation/objectivec/nsobject/3197989-accessibilityuserinputlabels

Apple文档： https : //developer.apple.com/documentation/objectivec/nsobject/3197989-accessibilityuserinputlabels

大型内容查看器 (Large Content Viewer)

In iOS 11 Apple introduced Large Content Viewer. When using Larger Accessibility Text Sizes, even if an app supports Dynamic Type, the size of the content in navigation bars and tab bars will not grow. That would take too much real estate from the screen. But if you hold your finger on those elements, a large preview will show in the middle of the screen. This used to only work for iOS native components. But now, iOS 13 lets you implement this for your custom components too.

苹果在iOS 11中引入了大内容查看器。 使用较大的辅助功能文本大小时，即使应用程序支持动态类型，导航栏和选项卡栏中的内容大小也不会增加。 屏幕将占用太多房地产。 但是，如果您将手指放在这些元素上，则会在屏幕中间显示一个较大的预览。 这过去仅适用于iOS本机组件。 但是现在，iOS 13也允许您为自定义组件实现此功能。

You can support it by adding a Large Content Viewer Interaction to your custom view, and setting the property showLargeContentViewer to true to the elements within your custom view that you can select and want to provide the preview option to.

您可以通过向自定义视图添加大内容查看器交互，并将属性showLargeContentViewer设置为true来支持自定义视图中的元素(可以选择并向其提供预览选项)来支持它。

Assuming customBarView is your custom view that contains a button called customBarTabButton and another custom view called customBarTabView, as subviews, the code would look something like this:

假设customBarView是您的自定义视图，其中包含一个名为customBarTabButton的按钮和另一个名为customBarTabView的自定义视图，作为子视图，代码将如下所示：

// Create a Large Content Viewer Interaction
let largeContentViewerInteraction = UILargeContentViewerInteraction()
 
 
// Add it to your view
customBarView.addInteraction(largeContentViewerInteraction)
 
 
// Enable Large Content Viewer in the buttons or labels you want
customBarTabButton.showsLargeContentViewer = true
 
 
// If it is a custom view that you want to enable for Large Content Viewer,
// you can provide an image and title
customBarTabView.showsLargeContentViewer = true
customBarTabView.largeContentImage = UIImage(systemName: "play.circle")
customBarTabView.largeContentTitle = "Play"

If you configure the Large Content Viewer for a button, the image and title of the icon will automatically be used to preview the element. If it is a label, the title will be used too. If it is a custom view, you can configure both the large content image and the large content title.

如果为按钮配置了大内容查看器，则图标的图像和标题将自动用于预览元素。 如果是标签，则标题也将使用。 如果是自定义视图，则可以配置大内容图像和大内容标题。

Apple documentation: https://developer.apple.com/documentation/uikit/uilargecontentviewerinteraction

Apple文档： https : //developer.apple.com/documentation/uikit/uilargecontentviewerinteraction

无色区分 (Differentiate Without Color)

You should not rely just in colors to signal something in your app. There are users that may not be able to notice differences in the colors you are using and you should accompany this with proper messaging too, for example. But if you really need to - that can probably happen with some games - you can now use this new option in iOS 13.

您不应该仅仅依靠颜色来在应用程序中发出信号。 有些用户可能无法注意到您所使用的颜色的差异，例如，您还应该将其与适当的消息传递一起使用。 但是，如果您确实需要(某些游戏可能会发生这种情况)，现在可以在iOS 13中使用此新选项。

// Check if the user needs differentiation without color
if UIAccessibility.shouldDifferentiateWithoutColor {
  card.colorSymbolImageView.hidden = false
} else {
  card.colorSymbolImageView.hidden = true
}

Imagine you are developing an UNO-like game where each card has numbers and colors, and the next player chooses its card based on the number or color of the previous player’s card. You could check if the user has enabled the Differentiate Without Color option and show an extra symbol in the card that represents the color. Actually UNO has a color-blind friendly version, UNO ColorADD, that uses the Colorblind Alphabet.

假设您正在开发类似UNO的游戏，其中每张卡都有数字和颜色，下一位玩家将根据前一张玩家的卡的数量或颜色来选择其卡。 您可以检查用户是否已启用“无颜色差异”选项，并在卡中显示一个代表颜色的额外符号。 实际上，UNO有一个色盲友好版本UNO ColorADD，它使用了色盲字母表。

Apple documentation: https://developer.apple.com/documentation/uikit/uiaccessibility/3043553-shoulddifferentiatewithoutcolor

Apple文档： https : //developer.apple.com/documentation/uikit/uiaccessibility/3043553-shoulddifferentiatewithoutcolor

自动播放视频预览 (Auto-Play Video Previews)

In a similar way, a user can now decide to disable auto-play for video previews. You should always try to honor the user’s preferences.

以类似的方式，用户现在可以决定对视频预览禁用自动播放。 您应该始终尝试遵守用户的首选项。

// Check if the user has Video Autoplay enabled
if UIAccessibility.isVideoAutoplayEnabled {
  video.play()
} else {
  video.pause()
}

Apple documentation: https://developer.apple.com/documentation/uikit/uiaccessibility/3238036-isvideoautoplayenabled

Apple文档： https : //developer.apple.com/documentation/uikit/uiaccessibility/3238036-isvideoautoplayenabled

Note: For both Differentiate Without Color and Auto-Play Video Previews, you can listen to their corresponding ‘did change’ notifications.

注意：对于“无色差异”和“ 自动播放视频预览” ，您可以收听其相应的“更改后”通知。

具有动作处理程序的自定义动作 (Custom Actions with action handlers)

You can add custom actions to views. This improves navigation with VoiceOver and Switch Control. A common use case is when a cell in a table view has multiple buttons that let you execute multiple actions. It used to be that you had to provide the name of the action, and also a target and selector, for each one of these custom actions. In iOS 13, Apple introduced a Swiftier way of doing it where you can just provide a closure (instead of the target and action) with the code that will be executed when you trigger the custom action.

您可以向视图添加自定义操作。 这可以改善VoiceOver和Switch Control的导航。 常见的用例是表视图中的单元格具有多个按钮，这些按钮可让您执行多个操作。 过去，您必须为每个自定义操作提供操作的名称，以及目标和选择器。 在iOS 13中，Apple引入了一种更快捷的方法，您只需在触发自定义操作时执行的代码即可提供闭包(而不是目标和操作)。

// Create Custom Actions
let artistCustomAction = UIAccessibilityCustomAction(name: userName) { _ in
  self.navigationController?.present(artistViewController, animated: true, completion: nil)
  return true
}
 
 
let likeCustomAction = UIAccessibilityCustomAction(name: "like") { _ in
  likedSongs.append(song)
  return true
}
 
 
// Add Custom Actions to your view
accessibilityCustomActions?.append(contentsOf: [artistCustomAction, likeCustomAction])

Apple documentation: https://developer.apple.com/documentation/uikit/uiaccessibilitycustomaction/3043557-init

Apple文档： https : //developer.apple.com/documentation/uikit/uiaccessibilitycustomaction/3043557-init

环境覆盖和可访问性检查器 (Environment Overrides & Accessibility Inspector)

Testing your iOS apps for accessibility became much easier too.

测试您的iOS应用程序的可访问性也变得更加容易。

The Accessibility Inspector added a preview option for VoiceOver. Just click on the speaker button and use the player controls to play/pause or go to the previous/next element.

辅助功能检查器为VoiceOver添加了预览选项。 只需单击扬声器按钮，然后使用播放器控件播放/暂停或转到上一个/下一个元素。

And Xcode added a Environment Overrides menu that lets you customize a ton of options when running the app in the simulator, including some accessibility configurations like: Increase Contrast, Reduce Transparency, Reduce Motion, Smart Invert, Differentiate Without Color, and many more.

Xcode还添加了Environment Overrides菜单，可让您在模拟器中运行应用程序时自定义很多选项，包括一些可访问性配置，例如：增加对比度，减少透明度，减少运动，智能反转，无色差异等。

SwiftUI (SwiftUI)

Of course, SwiftUI was also presented in the WWDC19. Like everything that Apple does, accessibility is built-in right from the beginning. For sure you’ve noticed already that a lot of things in iOS are accessible by default. But this is even more true with SwiftUI thanks of its declarative nature and because it is state-driven. This probably deserves its own post, or even series of posts, so I totally recommend you Rob Whitaker’s great SwiftUI Accessibility Series: https://rwapp.co.uk/2019/11/06/SwiftUI-Accessibility/

当然，SwiftUI也出现在WWDC19中。 就像Apple所做的一切一样，可访问性从一开始就是内置的。 当然，您已经注意到默认情况下可以访问iOS中的许多内容。 但是，由于SwiftUI具有声明性，并且是受状态驱动的，因此对于SwiftUI而言更是如此。 这可能应该是值得的，甚至是一系列的帖子，所以我完全建议您罗伯·惠特克 ( Rob Whitaker )出色的SwiftUI可访问性系列： https ://rwapp.co.uk/2019/11/06/SwiftUI-Accessibility/

And there is more…

还有更多……

As I said, it was one of the WWDC editions that I remember with more news around accessibility. Apart from all the ones in this post, Apple also presented Full Keyboard Access for iPadOS, SF Symbols (making easier to support dynamic type with glyphs), when using color asset catalogues you can specify high contrast variants, etc.

正如我所说的，这是我记得的WWDC版本之一，其中包含有关可访问性的更多新闻。 除了这篇文章中的所有内容外，Apple还展示了iPadOS的完全键盘访问功能，SF Symbols(使使用字形支持动态类型更容易)，使用颜色资产目录时可以指定高对比度变体等。

Have I missed anything? Please let me know in the comments. And if you have any feedback, questions, etc, you can also find me on Twitter: @dadederk

我错过了什么吗？ 请在评论中让我知道。 如果您有任何反馈，问题等，也可以在Twitter上找到我： @dadederk

Let’s now hope for another WWDC full of accessibility improvements!

现在，让我们希望另一个WWDC全面改进了可访问性！

Thanks for reading!

谢谢阅读！

资源资源 (Resources)

• If you liked the post, I have a full book about Developing Accessible iOS Apps. Available in Amazon: https://www.amazon.co.uk/dp/1484253078

  如果您喜欢这篇文章，那么我有一本关于开发可访问iOS应用程序的完整书。 在亚马逊上可用： https : //www.amazon.co.uk/dp/1484253078

• You can find code examples for some of these and other accessibility features in my book’s repo: https://github.com/Apress/developing-accessible-iOS-apps

  您可以在我的书回购中找到其中一些功能以及其他辅助功能的代码示例： https : //github.com/Apress/developing-accessible-iOS-apps

• My previous post “Improving your App’s Accessibility with iOS 11”: https://medium.com/bbc-design-engineering/improving-your-apps-accessibility-with-ios-11-db8bb4ee7c9f

  我以前的文章“使用iOS 11改善应用程序的可访问性”： https : //medium.com/bbc-design-engineering/improving-your-apps-accessibility-with-ios-11-db8bb4ee7c9f

• Rob Whitaker’s post “Writing Great iOS Accessibility Labels”: https://mobilea11y.com/blog/writing-great-labels/

  罗伯·惠特克 ( Rob Whitaker )的帖子“撰写出色的iOS无障碍标签”： https : //mobilea11y.com/blog/writing-great-labels/

• WWDC Accessibility Videos: https://developer.apple.com/videos/frameworks/accessibility

  WWDC可访问性视频： https : //developer.apple.com/videos/frameworks/accessibility