在 header 元素上设置 `pointer-events: none;` 是否存在可访问性问题？
Is setting `pointer-events: none;` on header elements an accsssibility issue?
我正在更新网站以使其更易于访问。前一个站点在所有 <h1> 和 <h2> 元素上设置了 pointer-events: none;。
进行转换，此设置是否存在可访问性问题？
简答
删除它，它对标题没有任何好处，而且可能导致可访问性问题。
长答案
你应该问的问题是 为什么它首先出现在那里？
标题实际上不应该附加任何 JavaScript 事件处理程序，如果有，为什么还要添加 pointer-events: none 来取消它们？如果这就是它存在的原因，那么修复脚本。
显然我看不到该站点，但是在标题上添加 pointer-events: none; 就像在 <div> 中添加 role="presentation" 一样......没有任何用处......假设该站点没有需要使用它的潜在问题。
我能看到有人添加这个的唯一原因是如果网站有问题并且他们强行绕过它（因此由于 select 或例如）或者您有一些奇怪的功能在运行（也许是出于某种原因您不想在标题上工作的剪贴板复制功能？）。
虽然它不应该导致可访问性问题，因为项目不应该是交互式的，但我建议您尽可能删除它，但它没有任何实际用途。
关于您关于“我的目的是在用户单击网站上的 headers 时禁用文本 selection”的评论...pointer-events不会这样做，正如您在本答案末尾的 fiddle 中看到的那样...您仍然可以 select 文本 但它不会注册事件（单击顶部标题没有任何反应，底部标题将记录到控制台）。
正如您还指出的那样，user-select 可能会导致可能 select 向他们朗读文本（学习困难、第二语言等）或帮助他们的人的可用性问题一次专注于一个句子（例如阅读障碍）等
如果有人想要 select 文本使其更易于阅读，那就让他们吧！
pointer-events: none 只应真正用于允许人们通过点击一个项目进入其下方的互动项目。
fiddle 说明文本 selection 仍然可以使用 pointer-events: none
$('h2').on('click', function(e){
console.log(e.target);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2 style="pointer-events: none">test</h2>
<h2>test</h2>
pointer-events: none 阻止事件发出。如果您想稍后使用它们，这可能会导致问题。如果你想监听在你的 JavaScript 代码中发出的事件，你会感到奇怪的是它们被你的 css 阻止了。因此，如果没有充分的理由，我不会推荐使用它。
pointer-events: none 将禁止 child 元素上的事件。所以如果有例如header end-users 中的 link 将无法与 link 进行交互。那将是一个可访问性问题。
因此，只要最终用户在与元素或其后代交互时不希望发生任何事情，使用 pointer-events: none 就不会出现可访问性问题。
PS：既然您在评论中提到了：禁止用户使用 select 文本本身就是一种可访问性 issue/restriction。
以下是我如何防止用户使用 select 文本，而不是在指定的 HTML 元素上使用 pointer-events: none：
- 阻止全部用户selection在整个页面
- 仅在 selection 内容适用的情况下允许 selection
像这样：
/* prohibit user from selecting text (put in <body>), esp. convenient for 'click-happy' users... */
[no-select] { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none }
[do-select] { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: auto }
/* enable user to select text (put in specific elements) */
<body no-select>
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et
deleniti copiosae.</p>
<p>Cu vel debet nobis, repudiare deseruisse reprehendunt usu ad. Ex elit idque nam. Omnis munere detraxit mei te, eu labore appareat verterem
est. Mel ex oporteat consectetuer.</p>
<p><b do-select>THIS IS SELECTABLE, DO TRY WITH mouse or [Ctrl-A]</b> THE REST OF THE ENTIRE TEXT, HOWEVER, NOT!!! Pro ea nonumy integre, mel at solum corpora. Id viris audiam repudiare cum, pri dolore appareat ex, per propriae detracto tacimates ex.
Elitr sapientem quo et, usu suas porro tibique cu. Iusto causae eos et, tota principes interesset et eos. Similique intellegam cum ei, unum
qualisque mel et, regione verterem delicatissimi qui ut. Aliquam incorrupte ea pro, vel veritus consequat id.</p>
<p>Pri te amet electram. Tation commodo minimum cu pri, utamur minimum id pri. No legimus atomorum vim. Vix id putent iuvaret salutandi, mel
phaedrum conceptam ut.</p>
</body>
我正在更新网站以使其更易于访问。前一个站点在所有 <h1> 和 <h2> 元素上设置了 pointer-events: none;。
进行转换，此设置是否存在可访问性问题？
简答
删除它，它对标题没有任何好处，而且可能导致可访问性问题。
长答案
你应该问的问题是 为什么它首先出现在那里？
标题实际上不应该附加任何 JavaScript 事件处理程序，如果有，为什么还要添加 pointer-events: none 来取消它们？如果这就是它存在的原因，那么修复脚本。
显然我看不到该站点，但是在标题上添加 pointer-events: none; 就像在 <div> 中添加 role="presentation" 一样......没有任何用处......假设该站点没有需要使用它的潜在问题。
我能看到有人添加这个的唯一原因是如果网站有问题并且他们强行绕过它（因此由于 select 或例如）或者您有一些奇怪的功能在运行（也许是出于某种原因您不想在标题上工作的剪贴板复制功能？）。
虽然它不应该导致可访问性问题，因为项目不应该是交互式的，但我建议您尽可能删除它，但它没有任何实际用途。
关于您关于“我的目的是在用户单击网站上的 headers 时禁用文本 selection”的评论...pointer-events不会这样做，正如您在本答案末尾的 fiddle 中看到的那样...您仍然可以 select 文本 但它不会注册事件（单击顶部标题没有任何反应，底部标题将记录到控制台）。
正如您还指出的那样，user-select 可能会导致可能 select 向他们朗读文本（学习困难、第二语言等）或帮助他们的人的可用性问题一次专注于一个句子（例如阅读障碍）等
如果有人想要 select 文本使其更易于阅读，那就让他们吧！
pointer-events: none 只应真正用于允许人们通过点击一个项目进入其下方的互动项目。
fiddle 说明文本 selection 仍然可以使用 pointer-events: none
$('h2').on('click', function(e){
console.log(e.target);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2 style="pointer-events: none">test</h2>
<h2>test</h2>
pointer-events: none 阻止事件发出。如果您想稍后使用它们，这可能会导致问题。如果你想监听在你的 JavaScript 代码中发出的事件，你会感到奇怪的是它们被你的 css 阻止了。因此，如果没有充分的理由，我不会推荐使用它。
pointer-events: none 将禁止 child 元素上的事件。所以如果有例如header end-users 中的 link 将无法与 link 进行交互。那将是一个可访问性问题。
因此，只要最终用户在与元素或其后代交互时不希望发生任何事情，使用 pointer-events: none 就不会出现可访问性问题。
PS：既然您在评论中提到了：禁止用户使用 select 文本本身就是一种可访问性 issue/restriction。
以下是我如何防止用户使用 select 文本，而不是在指定的 HTML 元素上使用 pointer-events: none：
- 阻止全部用户selection在整个页面
- 仅在 selection 内容适用的情况下允许 selection
像这样：
/* prohibit user from selecting text (put in <body>), esp. convenient for 'click-happy' users... */
[no-select] { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none }
[do-select] { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: auto }
/* enable user to select text (put in specific elements) */
<body no-select>
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et
deleniti copiosae.</p>
<p>Cu vel debet nobis, repudiare deseruisse reprehendunt usu ad. Ex elit idque nam. Omnis munere detraxit mei te, eu labore appareat verterem
est. Mel ex oporteat consectetuer.</p>
<p><b do-select>THIS IS SELECTABLE, DO TRY WITH mouse or [Ctrl-A]</b> THE REST OF THE ENTIRE TEXT, HOWEVER, NOT!!! Pro ea nonumy integre, mel at solum corpora. Id viris audiam repudiare cum, pri dolore appareat ex, per propriae detracto tacimates ex.
Elitr sapientem quo et, usu suas porro tibique cu. Iusto causae eos et, tota principes interesset et eos. Similique intellegam cum ei, unum
qualisque mel et, regione verterem delicatissimi qui ut. Aliquam incorrupte ea pro, vel veritus consequat id.</p>
<p>Pri te amet electram. Tation commodo minimum cu pri, utamur minimum id pri. No legimus atomorum vim. Vix id putent iuvaret salutandi, mel
phaedrum conceptam ut.</p>
</body>