Atom/Electron/Web应用程序和辅助功能API (macOS和Windows)

基础概念

Atom 是一个开源的文本编辑器，由GitHub开发，它允许开发者使用HTML、CSS和JavaScript来构建自定义的编辑器插件。

Electron 是一个使用JavaScript、HTML和CSS构建跨平台桌面应用程序的开源框架。它结合了Chromium渲染引擎和Node.js运行环境，使得开发者可以利用Web技术来开发桌面应用。

Web应用程序 是基于Web的应用程序，用户通过浏览器访问，不需要安装额外的软件。

辅助功能API (Accessibility API) 是为了让应用程序对所有用户，包括残障用户，都易于访问而设计的接口。在macOS和Windows上，这些API允许开发者创建可以描述UI元素及其行为的程序，从而使辅助技术（如屏幕阅读器）能够正确地解释和传达这些信息。

类型

桌面应用程序：使用Electron构建的应用程序，具有原生应用的体验。
混合应用程序：结合了Web应用程序和原生应用程序的特点。

应用场景

开发工具：如代码编辑器、IDE等。
办公软件：如文字处理、电子表格等。
通讯工具：如即时消息、邮件客户端等。
游戏：基于Web技术的游戏也可以打包成桌面应用程序。

常见问题及解决方案

问题：为什么我的Electron应用在macOS上的辅助功能表现不佳？

原因：可能是由于没有正确实现或配置辅助功能API，或者是因为某些Web组件不支持macOS的辅助功能标准。

解决方案：

确保你的应用程序使用了适当的ARIA（Accessible Rich Internet Applications）属性来标记UI元素。
使用Electron的webContents.setAccessibilitySupportEnabled(true)方法来启用辅助功能支持。
测试你的应用程序使用屏幕阅读器时的表现，并根据反馈进行调整。
参考Apple的官方文档来了解如何在macOS上实现辅助功能：macOS Human Interface Guidelines - Accessibility

示例代码

const { app, BrowserWindow } = require('electron');

app.on('ready', () => {
  const mainWindow = new BrowserWindow({
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
    },
  });

  mainWindow.loadURL('file://' + __dirname + '/index.html');

  // 启用辅助功能支持
  mainWindow.webContents.setAccessibilitySupportEnabled(true);
});