mobile/userinput.zh.html

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <title>用户交互</title>
  </head>
  <body>
    <header>
      <h1>用户交互</h1>
      <p>用户使用移动设备时注意力受限的可能性，再加上这些设备的规格，使触摸成为交互的主要手段，这意味着当开发移动设备上的应用时，Web开发者需要特别关注交互功能。</p>
      <p>解决这些交互的可访问性需要从多个层次来入手。在设备层面，操作系统和辅助技术提供的信息无障碍支持在过去几年中取得了很大进展。在浏览器层面，用户代理需要与辅助技术交互以利用Web内容的语义。在应用层面，Web内容开发人员需要遵循一套无障碍原则，以帮助残疾用户与内容交互。有趣的是，上述的移动限制可以使移动用户和残疾人体验到类似的障碍，而相似的解决方案可以用来解决这两个问题。</p>
    </header>
    <main>
      <section class="featureset well-deployed">
        <h2 id="well-deployed-technologies">广泛部署的技术</h2>
        <div data-feature="基于触控的交互">
          <p>越来越多的移动设备依赖于触控。尽管在Web平台中公认的传统交互方式（键盘、鼠标输入）仍然可以在这种情况下应用，但更具针对性地处理触控输入是创建适应性良好的用户体验的关键因素，<a data-featureid="touchevent">文档对象模型中的触摸事件</a>可以解决这个问题。</p>
          <p><a data-featureid="pointer-events">指针事件</a>规范定义了一个鼠标、触摸和笔事件的统一模型。它为触摸事件提供了一种互补且更加统一的方法。指针事件包括允许过滤元素上的手势事件的 CSS 属性 <a data-featureid="css-touch-action"><code>touch-action</code></a>，并在浏览器中广泛实现。</p>
        </div>

        <p data-feature="振动"><a data-featureid="vibration">振动 API</a> 让移动开发者利用触觉反馈来创建新的交互形式（例如在游戏中）。</p>

        <p data-feature="通知">移动设备被用户随身携带，许多移动用户依赖它们去提醒和通知自己事件，如消息。<a data-featureid="notifications">Web通知</a>规范使这种特性在 Web 环境中可用。</p>

        <div data-feature="信息无障碍">
          <p><a data-featureid="uaag20">用户代理无障碍指南（UAAG）2.0</a>文档包含了用户代理设计接口时与辅助技术交互的原则。支持性文档<a data-featureid="uaag20-reference">UAAG 2.0参考</a>介绍了UAAG 2.0的目的和成功标准的最佳实践，并举了很多例子。针对移动设备的举例在<a href="https://www.w3.org/TR/UAAG20-Reference/mobile.html">UAAG 2.0参考中的移动信息无障碍实例</a>中有总结。</p>
          <p>遵从<a data-featureid="wcag21">Web内容无障碍指南（WCAG）2.1</a>将使内容能够让更多的残疾人访问。相比2.0版本，2.1版本增加了新的成功标准和指导方针，包括在移动环境中特有的<a href="https://www.w3.org/TR/WCAG21/#pointer-gestures">指针手势</a>、<a href="https://www.w3.org/TR/WCAG21/#target-size">目标大小</a>和<a href="https://www.w3.org/TR/WCAG21/#orientation">方向</a>等。</p>
          <p>Web开发者可从遵从<a data-featureid="atag20">编辑工具可访问性指南（ATAG）2.0</a>的编辑工具中获益，ATAG提供了改善编辑工具本身的可访问性的指南和帮助编辑工具生成的内容符合WCAG标准的指南。</p>
          <p><a data-featureid="mobile-accessibility-mapping">移动信息无障碍</a>文档解释了将WCAG和其他无障碍指南应用于移动Web应用、原生应用和在原生应用中包含Web应用组件的混合应用的方法。</p>
          <p><a data-featureid="wai-aria11">可访问富互联应用（WAI-ARIA）1.1</a>标准提供了一个角色、状态和属性的本体，这个本体定义了可访问的用户界面元素，并可用于改进Web内容和应用的可访问性和互操作性。<a data-featureid="core-aam11">核心可访问API映射1.1</a>标准描述了用户代理如何将这些语义映射到无障碍API中。但是，移动平台还没有全面的可访问性API映射，这些映射目前只在桌面平台上才可使用。</p>
        </div>
      </section>

      <section class="featureset in-progress">
        <h2 id="technologies-in-progress">开发中的技术</h2>

        <div data-feature="游戏控制器">
          <p><a data-featureid="gamepad">游戏手柄</a>规范定义了一个与连接到设备的游戏手柄（例如通过蓝牙与智能手机配对的游戏手柄设备）交互的底层接口。</p>
        </div>

        <div data-feature="平滑滚动">
          <p>随着越来越多的内容被呈现为很长的可滚动列表，越来越多的逻辑被附加到滚动事件上，而且这些动作的用户体验的质量高度依赖于它们的性能。<a data-featureid="cssom-view">CSSOM 视图模块</a>确定滚动事件何时被触发，并让开发者指定他们想要的滚动行为的类型。</p>
          <p><a data-featureid="css-scroll-snap">CSS 滚动捕捉点</a>的提议通过定义当用户移动页面时应用视图捕捉的点，大大增加了控制平移和滚动行为的能力。</p>
          <p><a data-featureid="css-will-change">CSS 的 <code>will-change</code></a> 属性也可以向浏览器指示将会很快被滚动到的部分并指示这部分应该被预渲染。</p>
        </div>

        <div data-feature="通知">
          <p><a data-featureid="push">推送API</a>使服务器端的通知可以提醒用户，即使是在浏览器没有运行的情况下。</p>
          <p>除了<a href="https://www.w3.org/TR/notifications/">Web通知</a>以外，<a data-featureid="badging">标记 API</a>定义了另一种通知机制，允许已经安装在设备上的 Web 应用（例如通过清单文件）设置一个标记，通常显示在主屏幕上应用程序的图标旁边，在应用程序的状态发生变化时通知用户可能需要注意的信息（如新消息）。</p>
        </div>

        <p data-feature="屏幕唤醒">不论用户使用语音向它们的应用设备下达命令还是通过非触觉交互来处理这些命令，他们都面临着由于屏幕保护程序导致的屏幕自动关闭的风险。<a data-featureid="screen-wake-lock">屏幕唤醒锁 API</a> 让开发者在这种情况下保持屏幕不锁定。</p>
      </section>

      <section class="featureset exploratory-work">
        <h2 id="exploratory-work">探索性工作</h2>

        <p data-feature="基于语音的交互">移动设备，特别是手机，在很多情况下也非常适合语音交互；<a href="https://www.w3.org/community/speech-api/">语音 API 社区组</a>开发了一个JavaScript API 来支持通过口头命令与网页进行交互。<a data-featureid="speech-api/synthesis">语音合成</a>在浏览器中有很好的支持。对<a data-featureid="speech-api/recognition">语音识别</a>的支持仍在进行中。</p>

        <p data-feature="输入法"><a data-featureid="ime-api">输入法 API</a> 允许脚本通过用户代理访问输入法。该规范目前需要更多的编辑工作。</p>

        <div data-feature="基于触控的交互">
          <p><a data-featureid="inputdevice">输入设备能力API</a>提供了“鼠标”事件是否来自触摸设备的信息。</p>
        </div>

        <div data-feature="游戏控制器">
          <p>游戏手柄有各种各样的类型，从一般的游戏机手柄到如吉他、踏板、跳舞毯、魔术棒、VR/AR控制器等定制设备，这些设备中的每一种都有自己的输入和输出方式，需要映射到操作系统的原生API，以便 Web 应用使用他们。<a data-featureid="webhid">WebHID</a> 提议将大多数设备使用的 <abbr title="Human Interface Device">HID</abbr> 协议暴露给 Web 应用，使他们在浏览器缺乏支持时通过基于 JavaScript 的逻辑实现。展望未来，该提案还可以简化智能手机与各种有形用户界面之间的集成。</p>
        </div>

        <div data-feature="反应性">
          <p>需要运行长任务的应用（例如在加载页面时）需要在快速加载页面（或减少任务执行时间）与快速响应输入之间进行权衡。<a data-featureid="is-input-pending">输入事件的早期检测</a>规范提出了 <code>isInputPending</code> 方法，长时间运行的脚本可以同步调用，而不会浪费时间在其他脚本和事件处理上，以检测是否有未处理的输入事件，这些事件的执行可能会延迟触发。
          </p>
        </div>

        <div data-feature="输入延迟">
            <p>目前，所有的 DOM 事件都需要通过主线程，因为主线程是唯一可以访问 DOM 元素的线程。<a data-featureid="input-for-workers">Input for Workers and Worklets</a> 规范为 worker 提供了一个没有 DOM 访问权限的 event delegation scheme。这种机制将启用对延迟敏感的事件逻辑，该逻辑将不被主线程阻止。这个特性的用例包括在 <a data-featureid="offscreencanvas" data-linkonly><code>OffscreenCanvas</code></a> 上绘制、需要将输入事件转发到服务器以最小延迟进行处理的云场景（如云游戏）、与 <a data-featureid="animation-worklet" data-linkonly>CSS Animation Worklet</a> 结合的交互式动画（其中动画由用户输入驱动）和与 <a data-featureid="webaudio/worklet" data-linkonly><code>AudioWorklet</code></a> 结合使用的交互式音频。</p>
          </div>
      </section>

      <section>
          <h2 id="features-not-covered-by-ongoing-work">目前尚未覆盖的工作</h2>
          <dl>
            <dt>手势事件</dt>
            <dd>如上所述，基于触摸的交互在移动设备上很常见，并且可通过<a data-featureid="touchevent">触摸事件</a>提供给 Web 应用。<strong>基于手势的交互</strong>（包括捏合、旋转和滑动等）也是移动设备上的常见交互范例。Web开发者可在某种程度上从触摸事件中获取手势事件，但可能需要为不同的浏览器开发多个版本。对这些交互的原生支持将降低碎片化程度并提高性能。早期关于定义<a href="https://github.com/JuntaoPeng/GestureEvents/blob/master/GestureEvents.md#gesture-events">手势事件</a>的讨论已经在<a href="https://www.w3.org/community/mwma/">合并 Web 和移动应用社区组</a>中开始了讨论。</dd>
          </dl>
      </section>

      <section>
        <h2 id="discontinued-features">不再进行的工作</h2>
        <dl>
          <dt>基于意图的事件</dt>
          <dd>随着 Web 来到新的设备上，并且随着设备获得新的用户交互机制，允许 Web 开发者对更抽象的用户交互集合作出响应似乎是有用的：Web 应用无需再对“点击”、“按键”或“触摸事件“进行响应，而转为对“撤消“或“下一页”的作出响应（无论用户如何给设备发出这些指令）。<a data-featureid="indie-ui-events">IndieUI Events</a> 规范就是为了解决这个需求。由于缺乏实现，目前这项工作已经停止。</dd>
        </dl>
      </section>
    </main>
    <script src="../js/generate.js"></script>
  </body>
</html>