Hello, I am working on a accordion control for a website, and am interested in finding out how screen readers treat div tags that are given display:none by adding a css class via javascript, and then have the display:none removed by removing the class from the div tag. When display:none is removed, does the text get read? I appreciate any help, Thanks
Whenever I write an accordion script, I make it so that the elements that will be 'shrunk' start out showing, and then have the script apply the hide (as well as the hooks to show/hide) - that way I don't have to worry about screen readers which generally won't run the javascript. View mine: http://battletech.hopto.org/html_tutorials/accordion With javascript disabled, they are all expanded. You'll also notice I don't actually use display:none to hide them, I set the outer container to overflow:hidden and then set the height to zero in the script.
If you are concerned about screen readers, consider giving your hide class: height:0 and overflow:hidden, instead of display:none;
No - and here's why: 1) most stand alone screen readers won't run the javascript, so it's always expanded and read. 2) I WANT it to be read aloud when screen readers are accessing the page, which display:none can prevent from happening. Since someone using a screen reader is unlikely to even be able to expand/shrink a section, you want them to still be able to access that content which means ALWAYS reading it alout. Jaws reads it aloud as if it's all expanded even when it isn't - that should be the proper behavior. Add display:none and it's ignored, meaning people on screen readers would end up with zero access to that content. The screen reader in Opera will also read it if you select all first. It's why a LOT of 'ain't it neat' javascript and flash technologies are pretty much made of /FAIL/ is the writers (like 99% of the code on dynamic drive) put ZERO thought into graceful degredation. If you are going to hide content on the page using any sort of scripting, stylesheets, or present text via non-text elements like images or flash, you should ALWAYS make damned sure that if that technology is missing the user can still access the content - so scripting off, CSS off, images off, plug-ins off. The only reason to use display:none would be to make screen readers NOT read the text when shrunk - given that most screen reader users aren't going to have access to the controls to shrink/expand it or see that it's shrunk, why in the devil would you want to do that? Same reason you shouldn't use display:none or visibility:hidden on a CSS menu, and instead should be using position:absolute; left:-999em;
Yup, ++ except for the no-JS thing: damn, do we ever know if the screen reader will interact with the JS? Because sometimes, I'd even say most of the time, they do (if they're newer). Jaws has really been working on how to get that virtual buffer to update, and to let the user know that it's been updated. I dunno about W-E and I can't for the life of me get Orca to do anything other than announce itself grrrr... But there's a neat, if older article at Northtemple re JS and screen readers. *edit http://northtemple.com/2008/10/07/javascript-and-screen-readers Yes, but ONLY IF that screen reader can update its virtual buffer, and until recently they didn't do that at all. I know someone using JAWS10 and they went to the (very SAD) perldocs site (perldoc.perl.org) and he was able to find all the sidebars (though he had to turn his virtual buffer off and then on again once). But it's bad design: anyone with CSS on and JS off (plenty esp if you're thinking a mobile device will visit your site), there's just nothing. No sidebars, no site menu, no search form. Why? All so the guy can have a stupid toggle switch. I still haven't figured out WTF the toggling is for. Aesthetics???? Printing???? I don't know, but the author of that page doesn't care, and basically thinks that non-JSing users should just go f*ck themselves because of course EVERYONE has Javascript don't they? He sure pissed me off, can you tell? So, don't do what that guy did. Do it right.
Good lord! The perldoc site just had a redesign! Still some JS, but it's no longer hiding the menu! I don't care if I don't like the colours as much, I'm just SO HAPPY that I can get to the menus! YAY! YAY! YAY! Still, do JS deathshadow's way.