"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>

AFAIK 无障碍软件不遵守 CSS 因此第三个按钮对于无障碍软件将始终可见。但是用户（例如视力较弱但能够按下按钮，如果屏幕 reader 将读取按钮标签）无法在窄屏幕上按下它。

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

Answer 1

根据this MDN page：

Using a display value of none on an element will remove it from the accessibility tree. This will cause the element and all its descendant elements to no longer be announced by screen reading technology.

Answer 2

CSS display:none 是为数不多的始终被考虑在内的通用属性之一，无论渲染平均值如何。所以，隐藏属性是完全没有必要的。

无论我是在看屏幕、阅读音频内容、使用屏幕 reader 或盲文，还是通过任何其他可能未知的方式访问您的内容，display:none 都是要求。这意味着 display:none 下的元素将不会显示、读取、渲染，什么都不会。您 100% 确定它们完全不存在并且不能被任何人使用。

"display: none" 在窄屏幕上隐藏元素是否会影响可访问性 - 如果是，如何解决？

Does hiding of elements by "display: none" on narrow screens affect accessibility - and if so how to fix it?

html

css

accessibility