在窄屏幕上通过“display: none”隐藏元素是否会影响可访问性 - 如果是，如何修复？

Question

假设根据设计，红色按钮必须仅显示在宽屏幕上。

如果只是展示它，没有什么困难，但我会跳过装饰。

.Container {
  display: flex;
  column-gap: 12px;
}

@media screen and (max-width: 340px) {
  .Button__WideScreensOnly {
    display: none;
  }
}

<div class="Container">
   <button class="Button">Button</button>
   <button class="Button">Button</button>
   <button class="Button Button__WideScreensOnly">Narrow screens only</button>
</div>

据我所知，辅助功能软件不尊重 CSS，因此第三个按钮对于辅助功能软件始终可见。但是用户（例如视力较弱但如果屏幕阅读器能够读取按钮标签则能够按下按钮）无法在狭窄的屏幕上按下按钮。

辅助软件标记隐藏元素的常见解决方案是“隐藏”属性（标签的属性，而不是 CSS 属性）。但据我所知，这些属性不能依赖于媒体查询。

Answer 1

根据这个 MDN 页面：

在元素上使用display值会将其从可访问性树中删除。none这将导致该元素及其所有后代元素不再通过屏幕阅读技术来宣布。