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