2

Suppose a webpage has two menus, one for a "desktop" sized screen and another for tablets/phones. It might looks something like this:

<body>
<div class="hide-me-on-wide-screens">
   <ul>
     ...menu items...
   </ul>
</div>
<header>
  <img class="logo">
  <div class="hide-me-on-narrow-screens">
    <ul>
       ...the same menu items again...
    </ul>
  </div>
</header>

Css hides and shows the appropriate menu using media queries and display: none

My question is, will this be a problem for people who use screen readers? If so how can we mitigate this, assuming that we don't want to refactor our HTML.

Improve this question

1 Answer 1

Reset to default
1

According to https://webaim.org/techniques/css/invisiblecontent/ screen readers ignore content that is set to display:none;. When you hide one or the other menu, modern screen readers should be able to interpret your site correctly.

For you site to be usable with a screen reader, it is a good idea to include a link at the very top of that skips to the main content and bypasses the menus. Screen readers work much better when the users can bypass the navigation and quickly get to the content. The article I linked has code that can hide that link visually, but still make it available to screen readers.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.