Some screen readers will read something that has changed state, but many older ones won’t, because they don’t know they must update their buffer.
buffered screen readers, when they load the page, make a local copy (a buffer) which the user then interacts with.
In any case, without Javascript there is only one set of thingies on the right side. That is a mistake. The best method is to show ALL the information by default and let your menu on the left skip to the relevant information using the urlhash (like #common).
When users have Javascript, let Javascript do the hiding, instead of defaulting with CSS. Javascript hides and unhides the relevant areas.
And finally you can avoid the block/none problem by using another method of hiding non-relevant information from sighted users.
One is to absolutely position the content offscreen. This “counts” as being on the screen as far as a screen reader is concerned, meaning that content will get loaded into the buffer. So instead of onclick making the section go from “none” to “block”, you would instead change its “left” or “left-margin” property (usually I have Javascript add or remove a class which is pre-defined in CSS with these margins).
Another is the overflow method. You could start with the box on the right being as tall as necessary (auto) to hold and show ALL the information (which is inside an inner box), but when Javascript loads in then users browser, make that box a set height with overflow: hidden on it. That allows only an amount of content you want to be visible (but it’s all on the page, and screen readers can ignore overflow: hidden). Again, Javascript will adjust the box inside the box (by sliding it, like most photo scrolling sliders) either by manually manipulating the top/margin-top value or adding/removing a class.
<div id=“outer”>
<div id="inner>
content…
</div>
</div>
#outer has a set width
#inner has NOTHING inside it that could be wider than #outer’s set width!
Javascript, onload:
#outer gets overflow: hidden and a set height.
#inner starts out at 0, 0 (showing the top information) and when a menu item is selected it can pull it “up” to the relevant section using margin-top, or I believe there is a better way using hash tags but I haven’t tried myself.
On the Orca mailing list I once heard people complaining about a web site where they would click but nothing would happen.
Turns out the site had h2’s with onclick events (so the screen readers thought these were clickable things and read them out as links in this case, but they weren’t links and could not be selected via keyboard) that were supposed to take divs underneath who were display: none by default and change them to display: block. A expansion script using either overflow or absolute positioning would have been much better (also using something natively clickable like an anchor would have also helped, and the content should not have been hidden also from those who don’t have the Javascript to show it).
Of course, there had better be a really really good reason to hide stuff from people. Are you really increasing usability?
You can always try the typical FAQ format.