Re: [WSG] standards-happy javascript for faq
http://www.nornix.com/testsidor/faq This one has very clean HTML markup. /AndersN SunUp skrev: Does anyone know of a method which will toggle the visibility of the FAQ answers while still displaying everything properly without javascript, and that adheres to current best practise for javascript? ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] standards-happy javascript for faq
At 05:44 PM 1/29/2006, SunUp wrote:
Does anyone know of a method which will toggle the visibility of the
FAQ answers while still displaying everything properly without
javascript, and that adheres to current best practise for javascript?
Hmm. The text-toggling examples folks have posted on this topic use
{display: none} to hide text. I'm under the impression that some
screen readers will not speak text that's been hidden with {display: none}. [1]
If so, then it would make much more sense to use a technique like this:
hide:
position: absolute;
left: -1000em;
show:
position: static;
or:
position: relative;
or:
left: N;
...depending on the application.
This would guarantee that the text would always be accessible to
screen-readers even when hidden from display -- the same sort of
graceful degradation we expect of toggle systems when JavaScript is disabled.
Regards,
Paul
_
[1] A few references on this topic easily revealed by googling
display+none+screen+reader:
ScreenreaderVisibility CSS-D wiki
http://css-discuss.incutio.com/?page=ScreenreaderVisibility
What do Screen Readers really say? by Bob Easton
http://eleaston.com/bob/screenreader-visibility.html
Facts and Opinion About Fahrner Image Replacement by Joe Clark
http://www.alistapart.com/articles/fir/
Screen readers and display: none by Simon Willison
http://simon.incutio.com/archive/2003/09/13/screenReaders
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Screen readers and JavaScript WAS: Re: [WSG] standards-happy javascript for faq
On 1/30/06, Anders Nawroth [EMAIL PROTECTED] wrote: Does the toggle function have to be connected to a a element, or do JS-enabled screen readers recognize onClick events attached to other elements? To add to this question, what happens where screen readers with JavaScript result in an element's content changing? The change in the document isn't neccessarily linear (i.e. immediately after the present element) -- do screen readers notify users that content has changed? How do they interact with this new material? Is there any way to set the screen reader's 'focus' as with internal anchor references, without impacting normal browsers? Hope this makes some sense... Josh ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] standards-happy javascript for faq
SunUp wrote: Hi folks, I'm doing an FAQ page, and want to make it so only the questions appear on page load, then when selected, the answers appear below them. A toggle effect. You know. I've found a couple of methods: http://www.netlobo.com/div_hiding.html http://www.mindsack.com/toggle/ I've just finished writing this: http://www.tjkdesign.com/articles/toggle_elements.asp HTH, Thierry | www.TJKDesign.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] standards-happy javascript for faq
Anders Nawroth Does the toggle function have to be connected to a a element, or do JS-enabled screen readers recognize onClick events attached to other elements? The function needs to be attached to an element that receives focus, i.e. an element that users can tab to via the keyboard. Links, form elements, image map areas and objects. P Patrick H. Lauke Web Editor / University of Salford http://www.salford.ac.uk Web Standards Project (WaSP) Accessibility Task Force http://webstandards.org/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] standards-happy javascript for faq
From: Paul Novitski [EMAIL PROTECTED]
Hmm. The text-toggling examples folks have posted on this topic
use {display: none} to hide text. I'm under the impression that
some screen readers will not speak text that's been hidden with
{display: none}.
At 05:04 AM 1/30/2006, Al Sparber wrote:
JAWS presents the onClick event. But if supporting older, or more
poorly written readers, you would need to use positioning trick, I imagine :-)
Sorry, but aren't these apples oranges? The triggering event is
one thing, the disappearing technique another. What I'm reading (or
perhaps misreading) is that even screen readers that respond to the
onclick method might not present text that's previously been hidden
with {display: none}.
Not having a screen reader to test on, I'd appreciate hearing from
someone who does:
When the styling for a block of text is changed from {display: none}
to {display: block} or {display: inline}, does your reader begin
reading it immediately? Or does it simply add that text into the
body of the page for eventual reading?
The reason I'm asking is that I've seen many cases in which the text
that's toggled doesn't immediately follow the link that triggers the
toggle, e.g.:
a href=#Toggle switch/a
h3Some intervening text or heading./h3
divThe text that suddenly appears./div
...or even where the trigger follows the text:
divThe text that suddenly appears./div
a href=#Toggle switch/a
If the user's reading point in the page is suddenly moved to the
toggled text block, an obvious inclusion in best practices would be
to mark up the toggled text immediately following the trigger without
any intervening content.
Paul
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] standards-happy javascript for faq
On 1/30/06, Paul Novitski [EMAIL PROTECTED] wrote:
At 05:44 PM 1/29/2006, SunUp wrote:
Does anyone know of a method which will toggle the visibility of the
FAQ answers while still displaying everything properly without
javascript, and that adheres to current best practise for javascript?
Hmm. The text-toggling examples folks have posted on this topic use
{display: none} to hide text. I'm under the impression that some
screen readers will not speak text that's been hidden with {display: none}.
[1]
I'm wondering if that includes my method. You can revisit the 2nd
reply to this question to see the method I mentioned, but here's how
the event works:
The toggle link is:
a id=membershow class=toggle href=#[Show text]/a
notice there is no onclick!
Then the CSS is:
* { display:block; }
not display:none;
In the JS is where everything happens:
setElementStyleById(exec, display, none);
document.getElementById(execshow).onclick = function() { ... }
Now, the question is whether this still fails in screen readers with
JS. I really can't tell, because I can't test it. I imagine that if
the links are encountered in the context, they can be handled
allright, and the text that appears comes right after the link in the
markup. If the user is just hearing the links on the page, then these
links definitely don't make much sense. But I'm thinking this method
works out in the end... even if on first past, the user can't tell
what they are supposed to do (all they hear is header Executive Board
link [show text] header Members link [show text] etc. etc.), at least
this is better than hearing all the text on the page at once, which
involves going through e-mail address after e-mail address after
e-mail address.[1] I know I can't prove this because I can't test it,
but I have seen how a screen reader works (I think it was JAWS) and I
think I would rather work with this page than the page without
Javascript (a laundry list of e-mails).
[1] then again screen reader users rarely go through text linearly,
but rather jump around through lines, paragraphs, etc. In that case
this JS might not be helpful... but as for why there isn't a way to
detect the use of a screen reader with JS, I don't know.
--
--
Christian Montoya
christianmontoya.com ... rdpdesign.com ... cssliquid.com
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] standards-happy javascript for faq
From: Paul Novitski [EMAIL PROTECTED]
Sorry, but aren't these apples oranges? The triggering event is
one thing, the disappearing technique another. What I'm reading (or
perhaps misreading) is that even screen readers that respond to the
onclick method might not present text that's previously been hidden
with {display: none}.
Not having a screen reader to test on, I'd appreciate hearing from
someone who does:
When the styling for a block of text is changed from {display: none}
to {display: block} or {display: inline}, does your reader begin
reading it immediately? Or does it simply add that text into the
body of the page for eventual reading?
I have a copy of JAWS 5.1 on a system. I'll try to check it out. If
you're right, it's a good point. Scripts that rely on CSS rules should
be easy to adapt. If you find anything out before I do, please post or
fire me a line offlist.
Thanks.
--
Al
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] standards-happy javascript for faq
On 1/29/06, SunUp [EMAIL PROTECTED] wrote:
Hi folks,
I'm doing an FAQ page, and want to make it so only the questions
appear on page load, then when selected, the answers appear below
them. A toggle effect. You know.
You want:
http://www.bobbyvandersluis.com/articles/unobtrusiveshowhide.php
I used it for a project and it is perfect, totally unobtrusive and
works with most browsers (not IE Mac though). You can see how I used
it here:
http://www.rso.cornell.edu/prssa/contact.php
(which was a great page until the webmaster screwed up the markup, oh well)
Basically what you do is give every item you want to work with an ID.
You write in normal CSS with everything set to it's default display,
except for the show/hide links which you set to display:none. Then in
the Javascript, before the page loads, you set the ID's you want to
toggle to display:none and the links to display:block.
if (document.getElementById) {
createStyleRule(.toggle, visibility:visible;);
createStyleRule(#exec, display:none;);
createStyleRule(#member, display:none;);
createStyleRule(#facultyadvisor, display:none;);
createStyleRule(#prsaadvisor, display:none;);
window.onload = myUnobtrusiveBehavior;
}
then when someone clicks a link, this happens:
document.getElementById(execshow).onclick = function() {
setElementStyleById(exec, display, block);
setElementStyleById(execshow, display, none);
return false;
};
You should have no trouble getting this to work, but if you do, let me know.
--
--
Christian Montoya
christianmontoya.com ... rdpdesign.com ... cssliquid.com
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] standards-happy javascript for faq
SunUp wrote: Hi folks, I'm doing an FAQ page, and want to make it so only the questions appear on page load, then when selected, the answers appear below them. A toggle effect. You know. I've found a couple of methods: http://www.netlobo.com/div_hiding.html http://www.mindsack.com/toggle/ .. but I'm not happy with either of these. The toggled parts (my answers) won't show with javascript disabled, This is a simple solution, easy to implement, and the hidden elements are visible with script disabled: http://www.projectseven.com/csslab/swapclass/faq/ Hope it helps. -- Al Sparber PVII http://www.projectseven.com Designing with CSS is sometimes like barreling down a crumbling mountain road at 90 miles per hour secure in the knowledge that repairs are scheduled for next Tuesday. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] standards-happy javascript for faq
Al Sparber wrote: This is a simple solution, easy to implement, and the hidden elements are visible with script disabled: http://www.projectseven.com/csslab/swapclass/faq/ Speaking of css/script implementations that degrade well in script-disabled UAs, we have a free command that installs into Dreamweaver that enables you to load CSS that is to be used only when script is enabled. That allows you write your style sheet for non-script-enabled browsers, while writing a second style sheet that is only read where script is supported. It's a lot simpler than it sounds and is totally foolproof. More information is here: http://www.projectseven.com/extensions/info/writestyles/ -- Al Sparber PVII http://www.projectseven.com Designing with CSS is sometimes like barreling down a crumbling mountain road at 90 miles per hour secure in the knowledge that repairs are scheduled for next Tuesday. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
