可访问性——提供在交互部分之间轻松导航的机制
Accessibility - provide mechanism for easy navigation between interactive sections
我们有一个基于网络的应用程序，它为桌面用户提供并排体验，其中屏幕左侧是文件浏览器和编辑器，屏幕右侧是交互式预览。我们应用程序的用户将在左侧进行不断的迭代更改，然后与右侧的预览进行交互，快速连续地来回切换多次。
是否有允许在这两个交互区域之间快速轻松导航的“最佳实践”？我知道这可能属于“意见”类别，但我觉得可访问性是一个被忽视的主题，它有助于获得尽可能多的资源。
在任何给定时间都只有一个焦点。所以没有任何真正的奇迹解决方案，屏幕 reader 和其他纯键盘用户将不得不反复来回。
事实上，最重要的不是能够在不同部分之间快速切换（您必须以某种方式提供一种仅通过键盘进行切换的方法），而是在切换时不要丢失光标位置。
例如，如果我在左侧编辑某些内容，然后转到右侧检查结果，然后返回左侧，我希望能准确地在我离开的位置找到插入点。
您确实必须确保这始终是正确的，并且在发生更改时尽可能接近（尤其是异步时，即当您在左侧时右侧发生更改）。
最相似的辅助功能配方或组件可能是拆分视图。
在windows世界中，最常用的在不同拆分部分之间循环的快捷键是F6，Shift+F6反向循环。
如果必须非常频繁地切换，请不要犹豫添加其他更简单或额外的快捷方式，例如 Ctrl+Tab，如果此类快捷方式尚未用于其他用途。
F6 和 Shift+F6 并不是最容易执行的快捷键，尤其是在所有 F1-12 键可能根本不可用或只能使用额外的 FN 键的笔记本电脑上。我个人总是觉得 F6 是一个有问题的选择，但这只是一个意见；至少我们有一些东西，当然总比没有好。
但是，不要替换现有的常用快捷方式。 （例如 Ctrl+Tab = 在不同的选项卡之间切换，如果您的应用程序中有选项卡，请不要使用它在视图之间循环并保留它用于选项卡）
您有一些工具可供使用。
标题
标题是在一些超级简单的部分切换中烘焙的最简单方法之一。屏幕 reader 用户将使用 1 到 6 键按标题级别导航，因此如果您的两个面板都是 <h2>（例如），他们可以简单地使用标题循环定位。
键盘快捷键
可以设置键盘快捷键。
但是你永远不应该孤立地这样做。我的意思是如果你说切换 window 就是说 Alt + 0 您 必须 允许用户能够根据自己的喜好更改这些键绑定。
这样您的快捷键就不会干扰他们的屏幕 reader 键（因为他们可能已经设置了自定义键盘快捷键）。
请注意：正如评论中指出的那样，这不是 WCAG requirement for key combinations（仅适用于单键），而是一种可用性最佳实践并受到高度鼓励，尤其是在某些屏幕上reader 用户使用修饰键而不是切换键进行屏幕 reader 导航。
然后我们进入一个有趣的领域，我想用“单手用户如何使用您的页面？”来说明这一点。
这个例子让你意识到某种粘滞键解决方案也可以被考虑，其中键组合可以通过一系列键来完成，任何时间间隔（因为你可能有没有手的人使用眼睛注视技术或例如一个开关，这样你就不想施加时间限制。）
显然以上是极端示例，但您可能需要考虑一些事情（实际上任何使用眼睛注视的人都能够在视觉上切换面板等）
语音指令
能够通过语音切换面板（例如 Dragon Naturally Speaking）也是必不可少的。
现在您可以使用语音软件进行组合键，这样可以解决大多数问题，但它们可能会很烦人而且很烦人。
在大多数语音软件上可以快速使用的一件事是单击具有唯一名称的页面上的任何按钮。
因此，在每个面板上方都有一个按钮可以激活它，这对语音用户来说是有益的。
假设这些按钮具有唯一名称，我可以简单地说“单击激活面板 2”（其中“激活面板 2”是按钮名称）并立即切换。
你需要管理焦点吗？
请记住，当您切换面板时，默认情况下每次都会从顶部开始。
这可能正是您想要的，但这很可能是糟糕的用户体验。
相反，您可能想要记住之前的焦点位置。然后，如果我使用键盘快捷键，它会跳回到面板中的相同位置。如果我再次使用语音/按钮点击更改位置。
但是，如果有人使用标题来导航，这显然是行不通的。然后，您可以在“从以前的位置恢复”标题后直接给他们一个按钮来解决这个问题并使用它来管理焦点。
用户设置
如您所见，有很多不同需求的人可能需要也可能不需要。
因此，默认情况下添加所有功能可能会使大多数用户更难使用该应用程序。
取而代之的是设置屏幕，让用户可以打开对他们有利的功能、设置自己的快捷键、打开或关闭粘滞键、决定他们是否希望您为他们管理焦点等。
这是一道难题！我一直在思考类似的问题。我已经概述了一个使用 ARIA 实时区域的想法，以及一个在 quick-jump 键盘支持至关重要的情况下可能会更好的替代想法。
- 实时区域公告作为
<form> 的一部分
<output> tag may be what you're looking for. It is mapped to the ARIA role of status 因此对其内容的任何更改都将在不更改任何焦点的情况下公布。这样一来，用户可以继续在左侧导航和进行更改，而不必总是翻到右侧来了解所做的更改。
角色 status 有一个隐含的 aria-live 值“polite”，因此通知将等到任何其他描述性通知完成。
它有一个隐含的 aria-atomic 值“true”，这意味着任何更改都会触发元素的全部内容的通告——这可能适合也可能不适合该内容。如果没有，添加aria-atomic="false"只读出变化的节点。
如果 <output> 中的内容可以是 phrasing content 以外的任何内容（包括 <div> 或标题标签），那么您应该使用 <div> 和角色改为“状态”属性。
自定义键盘控件可能会因各种类型的辅助技术 (AT) 而变得棘手 software/hardware。另外，这些命令可能不容易被发现。一些 AT 提供了一个键盘命令，可以在控制元素和通过其 aria-controls 属性分配的元素之间切换。不幸的是，此功能是 poorly supported，但它是当前标准，因此支持可能会随着时间的推移而变得更好。目前只有 Windows 上的 NVDA 支持它，使用键盘命令 Insert + Alt + M.
添加 aria-controls 到控制 <output>/status 的元素无论如何都是强制性的，所以给它一个唯一的 id 属性并将其设置为 aria-controls 的值在 <form>.
中的每个表单元素上
如果 <output>/status 被包装在 <fieldset> 中并且输入都被包装在包含 <fieldset> 中，那么每个 <fieldset> 行为作为分组容器，因此用户可以在它们之间快速导航。作为其中的一部分，确保包含 <output> 的 <fieldset> 直接跟在包含源顺序中表单元素的 <fieldset> 之后。如果这不可能，请将 aria-owns 属性添加到包含 <form> 并引用两个 <fieldset> 的 id 属性，中间有一个 space。
- Always-open non-modal
<dialog>
您可以考虑将右侧窗格设为 always-open non-modal <dialog>。左窗格中每个交互元素旁边的 <button> 会将焦点移至 <dialog>，而 Escape 键会将焦点 return 移回 <button>。焦点不在 non-modal <dialog> 内，因此用户仍然可以使用正常的导航方法在每个窗格之间移动。 <dialog> 需要有一个 open 属性才能出现，它还需要有 aria-modal="false".
每个 <button> 都需要一个 aria-controls 值引用 <dialog> 的 id 属性，以及一个 aria-haspopup 值“dialog”。 <button> 在聚焦之前可能是不可见的。
我们有一个基于网络的应用程序，它为桌面用户提供并排体验，其中屏幕左侧是文件浏览器和编辑器，屏幕右侧是交互式预览。我们应用程序的用户将在左侧进行不断的迭代更改，然后与右侧的预览进行交互，快速连续地来回切换多次。
是否有允许在这两个交互区域之间快速轻松导航的“最佳实践”？我知道这可能属于“意见”类别，但我觉得可访问性是一个被忽视的主题，它有助于获得尽可能多的资源。
在任何给定时间都只有一个焦点。所以没有任何真正的奇迹解决方案，屏幕 reader 和其他纯键盘用户将不得不反复来回。
事实上，最重要的不是能够在不同部分之间快速切换（您必须以某种方式提供一种仅通过键盘进行切换的方法），而是在切换时不要丢失光标位置。 例如，如果我在左侧编辑某些内容，然后转到右侧检查结果，然后返回左侧，我希望能准确地在我离开的位置找到插入点。 您确实必须确保这始终是正确的，并且在发生更改时尽可能接近（尤其是异步时，即当您在左侧时右侧发生更改）。
最相似的辅助功能配方或组件可能是拆分视图。 在windows世界中，最常用的在不同拆分部分之间循环的快捷键是F6，Shift+F6反向循环。
如果必须非常频繁地切换，请不要犹豫添加其他更简单或额外的快捷方式，例如 Ctrl+Tab，如果此类快捷方式尚未用于其他用途。 F6 和 Shift+F6 并不是最容易执行的快捷键，尤其是在所有 F1-12 键可能根本不可用或只能使用额外的 FN 键的笔记本电脑上。我个人总是觉得 F6 是一个有问题的选择，但这只是一个意见；至少我们有一些东西，当然总比没有好。
但是，不要替换现有的常用快捷方式。 （例如 Ctrl+Tab = 在不同的选项卡之间切换，如果您的应用程序中有选项卡，请不要使用它在视图之间循环并保留它用于选项卡）
您有一些工具可供使用。
标题
标题是在一些超级简单的部分切换中烘焙的最简单方法之一。屏幕 reader 用户将使用 1 到 6 键按标题级别导航，因此如果您的两个面板都是 <h2>（例如），他们可以简单地使用标题循环定位。
键盘快捷键
可以设置键盘快捷键。
但是你永远不应该孤立地这样做。我的意思是如果你说切换 window 就是说 Alt + 0 您 必须 允许用户能够根据自己的喜好更改这些键绑定。
这样您的快捷键就不会干扰他们的屏幕 reader 键（因为他们可能已经设置了自定义键盘快捷键）。
请注意：正如评论中指出的那样，这不是 WCAG requirement for key combinations（仅适用于单键），而是一种可用性最佳实践并受到高度鼓励，尤其是在某些屏幕上reader 用户使用修饰键而不是切换键进行屏幕 reader 导航。
然后我们进入一个有趣的领域，我想用“单手用户如何使用您的页面？”来说明这一点。
这个例子让你意识到某种粘滞键解决方案也可以被考虑，其中键组合可以通过一系列键来完成，任何时间间隔（因为你可能有没有手的人使用眼睛注视技术或例如一个开关，这样你就不想施加时间限制。）
显然以上是极端示例，但您可能需要考虑一些事情（实际上任何使用眼睛注视的人都能够在视觉上切换面板等）
语音指令
能够通过语音切换面板（例如 Dragon Naturally Speaking）也是必不可少的。
现在您可以使用语音软件进行组合键，这样可以解决大多数问题，但它们可能会很烦人而且很烦人。
在大多数语音软件上可以快速使用的一件事是单击具有唯一名称的页面上的任何按钮。
因此，在每个面板上方都有一个按钮可以激活它，这对语音用户来说是有益的。
假设这些按钮具有唯一名称，我可以简单地说“单击激活面板 2”（其中“激活面板 2”是按钮名称）并立即切换。
你需要管理焦点吗？
请记住，当您切换面板时，默认情况下每次都会从顶部开始。
这可能正是您想要的，但这很可能是糟糕的用户体验。
相反，您可能想要记住之前的焦点位置。然后，如果我使用键盘快捷键，它会跳回到面板中的相同位置。如果我再次使用语音/按钮点击更改位置。
但是，如果有人使用标题来导航，这显然是行不通的。然后，您可以在“从以前的位置恢复”标题后直接给他们一个按钮来解决这个问题并使用它来管理焦点。
用户设置
如您所见，有很多不同需求的人可能需要也可能不需要。
因此，默认情况下添加所有功能可能会使大多数用户更难使用该应用程序。
取而代之的是设置屏幕，让用户可以打开对他们有利的功能、设置自己的快捷键、打开或关闭粘滞键、决定他们是否希望您为他们管理焦点等。
这是一道难题！我一直在思考类似的问题。我已经概述了一个使用 ARIA 实时区域的想法，以及一个在 quick-jump 键盘支持至关重要的情况下可能会更好的替代想法。
- 实时区域公告作为
<form> 的一部分
<output> tag may be what you're looking for. It is mapped to the ARIA role of status 因此对其内容的任何更改都将在不更改任何焦点的情况下公布。这样一来，用户可以继续在左侧导航和进行更改，而不必总是翻到右侧来了解所做的更改。
角色 status 有一个隐含的 aria-live 值“polite”，因此通知将等到任何其他描述性通知完成。
它有一个隐含的 aria-atomic 值“true”，这意味着任何更改都会触发元素的全部内容的通告——这可能适合也可能不适合该内容。如果没有，添加aria-atomic="false"只读出变化的节点。
如果 <output> 中的内容可以是 phrasing content 以外的任何内容（包括 <div> 或标题标签），那么您应该使用 <div> 和角色改为“状态”属性。
自定义键盘控件可能会因各种类型的辅助技术 (AT) 而变得棘手 software/hardware。另外，这些命令可能不容易被发现。一些 AT 提供了一个键盘命令，可以在控制元素和通过其 aria-controls 属性分配的元素之间切换。不幸的是，此功能是 poorly supported，但它是当前标准，因此支持可能会随着时间的推移而变得更好。目前只有 Windows 上的 NVDA 支持它，使用键盘命令 Insert + Alt + M.
添加 aria-controls 到控制 <output>/status 的元素无论如何都是强制性的，所以给它一个唯一的 id 属性并将其设置为 aria-controls 的值在 <form>.
如果 <output>/status 被包装在 <fieldset> 中并且输入都被包装在包含 <fieldset> 中，那么每个 <fieldset> 行为作为分组容器，因此用户可以在它们之间快速导航。作为其中的一部分，确保包含 <output> 的 <fieldset> 直接跟在包含源顺序中表单元素的 <fieldset> 之后。如果这不可能，请将 aria-owns 属性添加到包含 <form> 并引用两个 <fieldset> 的 id 属性，中间有一个 space。
- Always-open non-modal
<dialog>
您可以考虑将右侧窗格设为 always-open non-modal <dialog>。左窗格中每个交互元素旁边的 <button> 会将焦点移至 <dialog>，而 Escape 键会将焦点 return 移回 <button>。焦点不在 non-modal <dialog> 内，因此用户仍然可以使用正常的导航方法在每个窗格之间移动。 <dialog> 需要有一个 open 属性才能出现，它还需要有 aria-modal="false".
每个 <button> 都需要一个 aria-controls 值引用 <dialog> 的 id 属性，以及一个 aria-haspopup 值“dialog”。 <button> 在聚焦之前可能是不可见的。