title: Does hiding of elements by "display: none" on narrow screens affect accessibility - and if so how to fix it?
body: <p>Assume that according design the red button must be displayed only on wide screens.</p>
  <p><a href="https://i.stack.imgur.com/NtRpy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NtRpy.png" alt="enter image description here" /></a></p>
  <p>Nothing difficult if just to display it, but I'll skip the decorations.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.Container {
    display: flex;
    column-gap: 12px;
  }
  
  @media screen and (max-width: 340px) {
    .Button__WideScreensOnly {
      display: none;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="Container"&gt;
     &lt;button class="Button"&gt;Button&lt;/button&gt;
     &lt;button class="Button"&gt;Button&lt;/button&gt;
     &lt;button class="Button Button__WideScreensOnly"&gt;Narrow screens only&lt;/button&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>AFAIK the accessibility software does not respect the CSS thus the third button will be always be visible for the accessibility software. But the user (for example with weak vision but able to push the button if a screen reader will read the button label) can't push it on narrow screens.</p>
  <p>The common solution for the marking the hidden elements for the accessibility software is <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden" rel="nofollow noreferrer">&quot;hidden&quot; attribute</a> (the attribute of the tag, not CSS property). But AFAIK the attributes could not be media query dependent.</p>