Javascript & pop-ups
Hi,
As a new developer one of my first projects is to make our website section 508 compliant. I've done a bit of reading and most of it is straight forward. I do have questions on things I'm not clear on.
"If a script is used to generate popup menues or new windows, the web developer must also provide redundant text and/or links that match the text in the script."
-http://www.usna.edu/masters/Section508/rule-l.htm
I don't understand what it means by redundant text. Can anyone specify an example of what this means? In general how should we handle pop-ups.
Also,
"When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology."
-http://webaim.org/standards/508/checklist
Can someone please provide an example for this?
On the website we have <a href... tags that use onClick to create popups. Is this not considered complaint?
Thank you.
Share: 
Also, to be considered compliant which guidelines should I be meeting?
I know there is
http://www.w3.org/WAI/WCAG20/quickref/
which contains A, AA, AAA and
http://webaim.org/standards/508/checklist
What is the minimum level of compliance one has to achieve before they can say they are accessible?
Share:
All it ever means is make sure all content is available without scripts.
In the case of a pop-up window, do not use:
| Code: |
| <a href="#" onclick="launchWindow('somepage.html');">Destination description</a> |
as without JavaScript tha link does not work, but this is okay:
| Code: |
| <a href="somepage.html" onclick="return launchWindow(this.href);">Destination description</a> |
Where the JavaScript function, launchWindow(), opens the new, presumably sized, pop-up.
This will meet 508, A, and AA because the content of someplace.html is always available.
A completely better method would be to do it unobtrusively by adding a rel statement to the link like so:
| Code: |
| <a href="somepage.html" rel="external">Destination description</a> |
Then sweep the entire page with JavaScript:
| Code: |
| // links marked rel="external" get launched in a new window (1024 by 800 max)
// attaching a W or H property to the link overwrites the default size but it is never larger than the screen // if a link has an onclick already then the new window function is not attached var As = document.getElementsByTagName("a"), i = As.length; function P() { var sw = screen.width, maxW = this.W || 1024, w = sw >= maxW ? maxW : sw, l = (sw - w) / 2, sh = screen.height, maxH = this.H || 800, h = sh >= maxH ? maxH : sh, t = (sh - h) / 2, W = window.open(this.href, 'newWin', 'scrollbars=1,status=1,toolbar=1,menubar=1,width=' + w + ',height=' + h + ',top=' + t + ',left=' + l); W.focus(); return false; } while (i--) { if (As[i].getAttribute("href") && As[i].getAttribute("rel") === "external") { As[i].title = (As[i].title !== "") ? As[i].title + " (launches in a new window)" : "Launches in a new window"; if (!As[i].onclick) { As[i].onclick = P; } } } |
Not a perfect solution, but close.
"Launches in a new window" is only added as a title attribute to the link.
It would be better if it was added as hidden text to the link as well.
Say in a hidden span.
Hope that helps.
Mike Foskett
<marquee><blink><work> webSemantics </work><rest> 2kool2 </rest> & <play> bangers & mashed </play></marquee></blink>
Share:
Nice solution Mike!
You really should drop by here more often, although I appreciate the time constraints on all of us through work, family, etc.
I've just visited your site at webSematics for the very first time.
It's an absolute wealth of excellent advice, ideas and examples. I could've saved myself some aggravation in the past if only I'd visited it before!
Thanks for sharing!
Cheers!
Share:
Thanks Gary, I pop by as often as I can.
Sometimes with a question sometimes just to read questions and responses.
Mike
<marquee><blink><work> webSemantics </work><rest> 2kool2 </rest> & <play> bangers & mashed </play></marquee></blink>
Share:
Update to the above code:
| Code: |
| // links marked rel="external" get launched in a new window (1024 by 800 max)
// attaching a W or H property to the link overwrites the default size but it is never larger than the screen var As = document.getElementsByTagName("a"), i = As.length; function P() { var sw = screen.width, maxW = this.W || 1024, w = sw >= maxW ? maxW : sw, l = (sw - w) / 2, sh = screen.height, maxH = this.H || 800, h = sh >= maxH ? maxH : sh, t = (sh - h) / 2, W = window.open(this.href, 'newWin', 'scrollbars=1,status=1,toolbar=1,menubar=1,width=' + w + ',height=' + h + ',top=' + t + ',left=' + l); W.focus(); return false; } while (i--) { if (As[i].getAttribute("href") && As[i].getAttribute("rel") === "external") { As[i].title = (As[i].title !== "") ? As[i].title + " (launches in a new window)" : "Launches in a new window"; As[i].innerHTML += "<em> (new window)</em>"; if (!As[i].onclick) { As[i].onclick = P; } } } |
Extra HTML content is added to the link itself
| Code: |
| <em> (new window)</em> |
| Code: |
| a em {position:absolute; left:-200em} |
This amendment was made to meet a request from the RNIB which stated title text was insufficient for keyboard only users and screen-readers.
To fully meet the requirement the link should clearly state at all times "new window".
The solution provided only partially resolved the issue.
<marquee><blink><work> webSemantics </work><rest> 2kool2 </rest> & <play> bangers & mashed </play></marquee></blink>
Share: