content in document twice but displayed once

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.

Received on Saturday, 18 June 2016 20:31:09 UTC