广泛部署的技术

基于触控的交互

越来越多的移动设备依赖于触控。尽管在Web平台中公认的传统交互方式(键盘、鼠标输入)仍然可以在这种情况下应用,但更具针对性地处理触控输入是创建适应性良好的用户体验的关键因素,文档对象模型中的触摸事件可以解决这个问题。

指针事件规范定义了一个鼠标、触摸和笔事件的统一模型。它为触摸事件提供了一种互补且更加统一的方法。指针事件包括允许过滤元素上的手势事件的 CSS 属性 touch-action,并在浏览器中广泛实现。

振动

振动 API 让移动开发者利用触觉反馈来创建新的交互形式(例如在游戏中)。

通知

移动设备被用户随身携带,许多移动用户依赖它们去提醒和通知自己事件,如消息。Web通知规范使这种特性在 Web 环境中可用。

信息无障碍

用户代理无障碍指南(UAAG)2.0文档包含了用户代理设计接口时与辅助技术交互的原则。支持性文档UAAG 2.0参考介绍了UAAG 2.0的目的和成功标准的最佳实践,并举了很多例子。针对移动设备的举例在UAAG 2.0参考中的移动信息无障碍实例中有总结。

遵从Web内容无障碍指南(WCAG)2.1将使内容能够让更多的残疾人访问。相比2.0版本,2.1版本增加了新的成功标准和指导方针,包括在移动环境中特有的指针手势目标大小方向等。

Web开发者可从遵从编辑工具可访问性指南(ATAG)2.0的编辑工具中获益,ATAG提供了改善编辑工具本身的可访问性的指南和帮助编辑工具生成的内容符合WCAG标准的指南。

移动信息无障碍文档解释了将WCAG和其他无障碍指南应用于移动Web应用、原生应用和在原生应用中包含Web应用组件的混合应用的方法。

可访问富互联应用(WAI-ARIA)1.1标准提供了一个角色、状态和属性的本体,这个本体定义了可访问的用户界面元素,并可用于改进Web内容和应用的可访问性和互操作性。核心可访问API映射1.1标准描述了用户代理如何将这些语义映射到无障碍API中。但是,移动平台还没有全面的可访问性API映射,这些映射目前只在桌面平台上才可使用。

特性规范 / 小组成熟度现有实现
选择浏览器…
基于触控的交互触摸事件 (Touch Events)
Web Events Working Group
正式推荐标准
指针事件 (Pointer Events)
指针事件工作组 (Pointer Events Working Group)
正式推荐标准
指针事件中的touch-action (touch-action in Pointer Events)
指针事件工作组 (Pointer Events Working Group)
正式推荐标准
振动振动 API (Vibration API (Second Edition))
设备与传感器工作组 (Devices and Sensors Working Group)
正式推荐标准
通知Notifications API Standard
Web 超文本应用技术工作小组 (WHATWG)
持续更新标准
信息无障碍用户代理无障碍指南(UAAG)2.0 (User Agent Accessibility Guidelines (UAAG) 2.0)
用户代理无障碍指南工作组 (User Agent Accessibility Guidelines Working Group)
工作组备忘 - informative
UAAG 2.0 参考 (UAAG 2.0 Reference: Explanations, Examples, and Resources for User Agent Accessibility Guidelines 2.0)
用户代理无障碍指南工作组 (User Agent Accessibility Guidelines Working Group)
工作组备忘 - informative
Web 内容可访问性指南(WCAG)2.1 (Web Content Accessibility Guidelines (WCAG) 2.1)
无障碍指南工作组 (Accessibility Guidelines Working Group)
正式推荐标准
编辑工具可访问性指南(ATAG)2.0 (Authoring Tool Accessibility Guidelines (ATAG) 2.0)
编辑工具可访问性指南工作组 (Authoring Tool Accessibility Guidelines Working Group)
正式推荐标准
移动无障碍性:WCAG 2.0和其他 W3C 无障碍计划如何应用到移动设备 (Mobile Accessibility: How WCAG 2.0 and Other W3C/WAI Guidelines Apply to Mobile)
无障碍指南工作组 (Accessibility Guidelines Working Group)
用户代理无障碍指南工作组 (User Agent Accessibility Guidelines Working Group)
工作草案 - informative
可访问富互联应用 1.1 (Accessible Rich Internet Applications (WAI-ARIA) 1.1)
可访问富互联应用工作组 (Accessible Rich Internet Applications Working Group)
正式推荐标准
核心可访问API映射 1.1 (Core Accessibility API Mappings 1.1)
可访问富互联应用工作组 (Accessible Rich Internet Applications Working Group)
正式推荐标准

开发中的技术

游戏控制器

游戏手柄规范定义了一个与连接到设备的游戏手柄(例如通过蓝牙与智能手机配对的游戏手柄设备)交互的底层接口。

平滑滚动

随着越来越多的内容被呈现为很长的可滚动列表,越来越多的逻辑被附加到滚动事件上,而且这些动作的用户体验的质量高度依赖于它们的性能。CSSOM 视图模块确定滚动事件何时被触发,并让开发者指定他们想要的滚动行为的类型。

CSS 滚动捕捉点的提议通过定义当用户移动页面时应用视图捕捉的点,大大增加了控制平移和滚动行为的能力。

CSS 的 will-change 属性也可以向浏览器指示将会很快被滚动到的部分并指示这部分应该被预渲染。

通知

推送API使服务器端的通知可以提醒用户,即使是在浏览器没有运行的情况下。

除了Web通知以外,标记 API定义了另一种通知机制,允许已经安装在设备上的 Web 应用(例如通过清单文件)设置一个标记,通常显示在主屏幕上应用程序的图标旁边,在应用程序的状态发生变化时通知用户可能需要注意的信息(如新消息)。

屏幕唤醒

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

特性规范 / 小组成熟度现有实现
选择浏览器…
游戏控制器游戏手柄 (Gamepad)
Web 应用工作组 (Web Applications Working Group)
工作草案
平滑滚动CSSOM视图模块 (CSSOM View Module)
CSS 工作组 (CSS Working Group)
工作草案

已有稳定实现:
在 Chrome(桌面, 移动)中已有稳定实现。 特性支持可能不完整。 来源:Can I use在 Microsoft Edge(桌面)中已有稳定实现。 特性支持可能不完整。 来源:Can I use在 Firefox(桌面, 移动)中已有稳定实现。 特性支持可能不完整。 来源:Can I use在 Safari(桌面, 移动)中已有稳定实现。 特性支持可能不完整。 来源:Can I use在 百度浏览器(移动)中已有稳定实现。 特性支持可能不完整。 来源:Can I use在 Opera(桌面, 移动)中已有稳定实现。 特性支持可能不完整。 来源:Can I use在 QQ浏览器(移动)中已有稳定实现。 特性支持可能不完整。 来源:Can I use在 三星浏览器(移动)中已有稳定实现。 特性支持可能不完整。 来源:Can I use在 UC浏览器(移动)中已有稳定实现。 特性支持可能不完整。 来源:Can I use

CSS 滚动捕捉点第一版 (CSS Scroll Snap Module Level 1)
CSS 工作组 (CSS Working Group)
候选推荐标准
CSS Will Change Module Level 1
CSS 工作组 (CSS Working Group)
候选推荐标准
通知推送 API (Push API)
Web 应用工作组 (Web Applications Working Group)
工作草案
标记 API (Badging API)
Web 应用工作组 (Web Applications Working Group)
工作草案
屏幕唤醒屏幕唤醒锁 API (Screen Wake Lock API)
设备与传感器工作组 (Devices and Sensors Working Group)
工作草案

探索性工作

基于语音的交互

移动设备,特别是手机,在很多情况下也非常适合语音交互;语音 API 社区组开发了一个JavaScript API 来支持通过口头命令与网页进行交互。语音合成在浏览器中有很好的支持。对语音识别的支持仍在进行中。

输入法

输入法 API 允许脚本通过用户代理访问输入法。该规范目前需要更多的编辑工作。

基于触控的交互

输入设备能力API提供了“鼠标”事件是否来自触摸设备的信息。

游戏控制器

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

反应性

需要运行长任务的应用(例如在加载页面时)需要在快速加载页面(或减少任务执行时间)与快速响应输入之间进行权衡。输入事件的早期检测规范提出了 isInputPending 方法,长时间运行的脚本可以同步调用,而不会浪费时间在其他脚本和事件处理上,以检测是否有未处理的输入事件,这些事件的执行可能会延迟触发。

输入延迟

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

特性规范 / 小组实现意向
选择浏览器…
基于语音的交互Web 语音 API中的语音合成 (Speech synthesis in Web Speech API)
Web 平台孵化社区组 (Web Platform Incubator Community Group)

已有稳定实现:
在 Chrome(桌面, 移动)中已有稳定实现。 来源:Can I use在 Microsoft Edge(桌面)中已有稳定实现。 来源:Can I use在 Firefox(桌面, 移动)中已有稳定实现。 来源:Can I use在 Safari(桌面, 移动)中已有稳定实现。 来源:Can I use在 Opera(桌面)中已有稳定实现。 来源:Can I use在 QQ浏览器(移动)中已有稳定实现。 来源:Can I use在 三星浏览器(移动)中已有稳定实现。 来源:Can I use

已有实验性实现:
在 百度浏览器(移动)中已有实验性实现。 特性需要使用浏览器引擎前缀。 特性支持可能不完整。 来源:Can I use在 UC浏览器(移动)中已有实验性实现。 特性需要使用浏览器引擎前缀。 特性支持可能不完整。 来源:Can I use

Web 语音 API中的语音识别 (Speech recognition in Web Speech API)
Web 平台孵化社区组 (Web Platform Incubator Community Group)

已有稳定实现:
在 Microsoft Edge(桌面)中已有稳定实现。 特性支持可能不完整。 来源:Can I use在 Firefox(移动)中已有稳定实现。 特性支持可能不完整。 来源:Can I use在 Opera(桌面)中已有稳定实现。 特性支持可能不完整。 来源:Can I use

已有实验性实现:
在 Chrome(桌面, 移动)中已有实验性实现。 特性需要使用浏览器引擎前缀。 来源:Can I use在 Firefox(桌面)中已有实验性实现。 特性需要开启浏览器实验性功能。 来源:Can I use在 Safari(桌面, 移动)中已有实验性实现。 特性需要使用浏览器引擎前缀。 来源:Can I use在 百度浏览器(移动)中已有实验性实现。 特性需要使用浏览器引擎前缀。 来源:Can I use在 QQ浏览器(移动)中已有实验性实现。 特性需要使用浏览器引擎前缀。 来源:Can I use在 三星浏览器(移动)中已有实验性实现。 特性需要使用浏览器引擎前缀。 来源:Can I use在 UC浏览器(移动)中已有实验性实现。 特性需要使用浏览器引擎前缀。 来源:Can I use

输入法输入法 API (Input Method Editor API)
Web 平台工作组 (Web Platform Working Group)
基于触控的交互输入设备能力 (Input Device Capabilities)
Web 平台孵化社区组 (Web Platform Incubator Community Group)
游戏控制器WebHID API
Web 平台孵化社区组 (Web Platform Incubator Community Group)
反应性isInputPending
Web 平台孵化社区组 (Web Platform Incubator Community Group)
输入延迟Input for Workers and Worklets
Web 平台孵化社区组 (Web Platform Incubator Community Group)

目前尚未覆盖的工作

手势事件
如上所述,基于触摸的交互在移动设备上很常见,并且可通过触摸事件提供给 Web 应用。基于手势的交互(包括捏合、旋转和滑动等)也是移动设备上的常见交互范例。Web开发者可在某种程度上从触摸事件中获取手势事件,但可能需要为不同的浏览器开发多个版本。对这些交互的原生支持将降低碎片化程度并提高性能。早期关于定义手势事件的讨论已经在合并 Web 和移动应用社区组中开始了讨论。

不再进行的工作

基于意图的事件
随着 Web 来到新的设备上,并且随着设备获得新的用户交互机制,允许 Web 开发者对更抽象的用户交互集合作出响应似乎是有用的:Web 应用无需再对“点击”、“按键”或“触摸事件“进行响应,而转为对“撤消“或“下一页”的作出响应(无论用户如何给设备发出这些指令)。IndieUI Events 规范就是为了解决这个需求。由于缺乏实现,目前这项工作已经停止。