Re: content in document twice but displayed once

Hi Michael,

The CSS property display:none; is the same as aria-hidden, except it applies to all user agents, not just screen readers, so you should be good to go.  The screen reader will only consume the content that is visually rendered in the browser.

Best,

Mark Sadecki

> On Jun 18, 2016, at 4:30 PM, Michael A. Peters <mpeters@domblogger.net> wrote:
> 
> Working on a site that includes profiles of people, including a short biography of the person, never more than 300 words and usually about 200 words.
> 
> The location of the bio bit relative to a table (that is genuine tabular data) has to change depending upon whether it the page is displayed on a mobile device in landscape or displayed on a desktop or mobile device in portrait mode.
> 
> What I am currently doing is just putting the bio in twice - once before the table and once after the table.'
> 
> On desktop and on mobile in portrait, the first instance has CSS of display: none; so that only the second instance renders.
> 
> On mobile in landscape, the first is visible and the second has display:none; so that it is not rendered.
> 
> Visually this works extremely well, works when switching the phone from portrait to landscape and back, etc.
> 
> But what impact would this have on screen readers or other assistive technology?
> 
> The alternative is to use JavaScript to move content in the page, but I really prefer to minimize the use of JavaScript and I have seen pages that do that where the JS sometimes fails to trigger and you have to change the orientation and change it back to get it to trigger. That isn't an issue with the content there twice and using CSS to hide and unhide.
> 
> But I don't want those with screen readers to have to go through the identical content twice while reading the page.
> 
> Thank you for comments and if there is an issue, for suggestions.
>