当像 Deque 这样专注于无障碍性的主要公司的博客发布一篇名为 揭穿迷思：无障碍性和 React 的文章时，我发现它值得注意。 Mark Steadman 基本上是在说，如果一个网站的无障碍性很差，那不是 React 的问题……而是你的问题。 拥有实现良好无障碍性的工具。
不是 React 使用了 <div> 而不是 <button>，而是你使用了。 当你决定不使用 Fragment 时，React 并没有强迫在页面上到处添加额外的标记。 React 并没有忘记更改页面标题，因为那是你忽略的事情。
在 React 中执行操作的方式与在其他框架或 CMS 中执行操作的方式是否有所不同？ 是的，确实不同。 不同，但既不更糟也不更难。
我乐观地认为，专注于无障碍性的精心制作的 React 组件可以对网络产生积极的影响。 就在今天，我正在结对编程，并查看 Rails 模板中切换 UI 的一些 HTML 代码。 它有一个我们想修复的小错误，这需要更改 HTML 代码。 但是这个切换不是一个组件，而是在网站上数十个地方使用的 HTML 代码块。 哎呀，我多么希望网站的这部分使用正确的组件进行架构，这样更改就能一次性修复网站上的所有切换。 所有 JavaScript 框架都鼓励这种组件构建，如果你问我，这只是明智的前端架构。
React 的负面评价从哪里来的？ 好吧，我们可以就此争论几天。 是不是 JavaScript 开发人员从未接受过他们需要的 HTML 训练？ 也许吧。 是不是早期编写的/共享的复杂且无意义的 React 代码被其他人复制粘贴了太多次？ 也许吧。 我不确定我们是否能知道答案。 重要的是，我们现在都做得更好。
我认为这在很大程度上是这样的
在许多讨论无障碍性的资源中，它们展示了标准的、纯净的方式来执行操作。 因此，React 开发人员不能仅仅在真空中分别学习 React 和无障碍性。 他们必须学习 React 风格的无障碍性。 也许是无障碍性风格的 React。 我并不是说他们不应该在没有 React 的情况下学习无障碍性的基础知识，他们绝对应该学习。 但是，React 有不同的无障碍性要求，这使得 React 在无障碍性方面感觉不太好。
它并不像仅仅应用语义标记那么简单。
WAI Aria 并不是开发人员可以接受的权宜之计。 它仅仅添加提示，但是，其中一些谓词存在争议，并且并非所有屏幕阅读器和无障碍性插件都采用它。
测试将永远是，你是否可以仅使用键盘在所有浏览器、无障碍性插件和屏幕阅读器中使用你的应用程序。 在你导航时，你是否告知用户位置和操作？ 用户能否继续并撤消他们的操作？ 所有交互是否都可通过键盘使用和访问？
你可能能够创建一个无障碍的 Web 应用程序，但是，你将不得不做出一些妥协，并可能强迫用户使用一组特定的浏览器/插件。
为了强迫用户这样做，你必须提供一个非常有吸引力的产品，否则他们就会简单地离开，或者更糟糕的是，如果他们对缺乏访问权限感到特别不满，他们可能会采取法律行动。
它并不像仅仅应用语义标记那么简单。
WAI Aria 并不是开发人员可以接受的权宜之计。 它仅仅添加提示，但是，其中一些谓词存在争议，并且并非所有屏幕阅读器和无障碍性插件都采用它。
测试将永远是，你是否可以仅使用键盘在所有浏览器、无障碍性插件和屏幕阅读器中使用你的应用程序。 在你导航时，你是否告知用户位置和操作？ 用户能否继续并撤消他们的操作？ 所有交互是否都可通过键盘使用和访问？
你可能能够创建一个无障碍的 Web 应用程序，但是，你将不得不做出一些妥协，并可能强迫用户使用一组特定的浏览器/插件。
为了强迫用户这样做，你必须提供一个非常有吸引力的产品，否则他们就会简单地离开，或者更糟糕的是，如果他们对缺乏访问权限感到特别不满，他们可能会采取法律行动。
在 React 中使用语义 HTML 实际上并不比创作“传统”网站更难……也就是说，如果你知道自己在做什么。
我认为问题有两个方面。
使用 React 构建 UI 的 JavaScript、后端或全栈开发人员可能没有扎实的传统前端技能基础（HTML/CSS 等）。 这会导致无障碍性应用。
React 库有数千个，它们非常容易使用 npm 安装，因此你很可能最终会在你的应用程序中的某个地方使用无障碍性代码。 如果你不知道任何更好的方法，它最终会进入生产代码。
我们有责任进行教育，对无障碍性 React 库代码提出错误报告等。
顺便说一句，无障碍性不仅仅是开发人员的责任。 它是整个团队的责任……设计/用户体验、质量保证、利益相关者。
是的，我对此也表示同意，不应该仅仅将责任归咎于 React。
这是一个困扰我一段时间的说法。
JSX 和 React 只是 HTML 的 SCSS。 如果它是考虑到 A11y 而构建的，那么它将是无障碍的。 我认为其中一个最大的问题是 JS/React 开发人员不关心在他们的组件中考虑未知因素。 一个好的 React 组件应该在接受它将以你无法预测的方式使用时，做出智能的默认设置。 通常，这就像传递你不需要的 props 一样简单。
https://codesandbox.io/s/flamboyant-sun-4rb2j?fontsize=14&hidenavigation=1&theme=dark