- From: Mery Richard <RMERY@mail.dstl.gov.uk>
- Date: Thu, 19 Feb 2009 10:09:19 -0000
- To: "Ryan Jean" <ryanj@disnetwork.org>, <w3c-wai-ig@w3.org>
- Message-ID: <674C997170C91C4E8E43E7E56B8C7A96018BD02C@mail.dstl.gov.uk>
Hi, I have hacked your example code and changed your button into a link (Not sure if it will help or if it is exactly what you wanted to acheive) --> See below Have you included the JS file as a seperate file? as this could create viewing problems with users that have j-script disabled, but if you include the code as a seperate file, then at least the user can still see the contents of the page but the j-script functions won't be included. Or provide an alternative version of the pop-up window that can be easily accessible to screen readers etc. Regards Richard Mery BA (hons) [dstl] Web Team Knowledge and Information Services (KIS) Building 248 Rm 2 Porton Down Salisbury Wiltshire SP4 0JQ Dstl is part of the Ministry of Defence T - 01980 614944 F - 01980 613328 E - rmery@dstl.gov.uk <mailto:rmery@dstl.gov.uk> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> .popup { width: 20em; height: 12em; text-align: center; border: 3px solid black; background-color: white; padding: 5%; z-index: 100; position: absolute; } .popup#alertDisp[aria-hidden="true"] { display : none; } .popup#alertVis[aria-hidden="true"] { visibility: hidden; } .popup > div { clear: both; text-align: right; margin-top: 5px; } </style> <script type="text/javascript"> <!-- var gFocusItem = null; function doFocus() { try { if (gFocusItem != null) { gFocusItem.focus(); gFocusItem=null; } } catch (error) { alert("DEBUG: error in doFocus()"); } } var FOCUS_TEXT = "This div is created in the DOM as needed. Focus is set to it when it is displayed"; var NOFOCUS_TEXT = "This div is created in the DOM as needed. Focus has NOT been set to it"; var counter = 0; function createRemoveAlert(alertText, bGiveFocus) { var popupDiv = document.getElementById("insertedAlert"); if (popupDiv) { // Remove alert var divParent = document.getElementById("alertParent"); divParent.removeChild(popupDiv); return; } // Create alert var popupDiv = document.createElement("div"); var dataNode = document.createTextNode(alertText); popupDiv.appendChild(dataNode); var close = document.createElement("a"); close.setAttribute("onclick", "createRemoveAlert();"); close.setAttribute("href", "#"); var closeText = document.createTextNode("close"); close.appendChild(closeText); var closeDiv = document.createElement("div"); closeDiv.appendChild(close); popupDiv.appendChild(closeDiv); // try parenting to a div on the page rather than document.body var divParent = document.getElementById("alertParent"); divParent.appendChild(popupDiv); popupDiv.id = "insertedAlert"; popupDiv.setAttribute("role", "alert"); popupDiv.tabIndex = "-1"; popupDiv.className = "popup"; if (bGiveFocus) { gFocusItem = popupDiv; setTimeout("doFocus();", 0); } return false; // handled } function toggleAlert(alertId, bGiveFocus, contentId) { var alertDiv = document.getElementById(alertId); if (alertDiv.getAttribute("aria-hidden") == "true") { alertDiv.removeAttribute("aria-hidden"); } else { alertDiv.setAttribute("aria-hidden", "true"); } if (bGiveFocus == true) { gFocusItem = (contentId)? document.getElementById(contentId) : alertDiv; setTimeout("doFocus();",0); } } --> </script> </head> <body> <p>Note: alerts should not get focus, but we include that in the testing to ensure screen readers don't get confused if they are, because it may be a common mistake.</p> <p>Buttons to create different alerts: </p> <div><u><a href onclick="createRemoveAlert(FOCUS_TEXT, true);" style="cursor:hand">Create and Focus</a></u></div> <div></div> <div role="alert" tabindex="-1" class="popup" aria-hidden="true" id="alertVis"> <span>This popup is created as a div in the HTML content, rather than being created in the DOM at the time of use. The visibility style is changed from "hidden" to "visible" to hide and show it. </span> <div style="text-align:right;margin-top:10px;"> <a href="javascript:toggleAlert('alertVis');">close</a> </div> </div> <div role="alert" tabindex="-1" class="popup" aria-hidden="true" id="alertDisp"> <span>This popup is created as a div in the HTML content, rather than being created in the DOM at the time of use. The display style is changed from "none" to "block" to hide and show it. </span> <div style="text-align:right;margin-top:10px;"> <a id="closeLink" href="javascript:toggleAlert('alertDisp');">close</a> </div> </div> <div id="alertParent"> </div> </body> </html> ____________________________________________________________ ________________________________ From: w3c-wai-ig-request@w3.org [mailto:w3c-wai-ig-request@w3.org] On Behalf Of Ryan Jean Sent: 18 February 2009 18:05 To: w3c-wai-ig@w3.org Subject: Popup Text Code Question First, may I ask on here how to code something? I really don't know how and I want help. I do have examples. I want a link that will open and close a popup with text that a screen reader will read. The top button on this URL is an example, but instead of a button, I want a link: http://codetalks.org/source/widgets/alert/alert.html Sincerely, Ryan Jean Assistant IT Specialist The Disability Network Flint, MI "This e-mail is intended for the recipient only. If you are not the intended recipient you must not use, disclose, distribute, copy, print, or rely upon this e-mail. If an addressing or transmission error has misdirected this e-mail, please notify the author by replying to this e-mail." "Recipients should note that all e-mail traffic on MOD systems is subject to monitoring and auditing."
Received on Thursday, 19 February 2009 10:10:11 UTC