W3C home > Mailing lists > Public > w3c-wai-ig@w3.org > January to March 2009

RE: Popup Text Code Question

From: Mery Richard <RMERY@mail.dstl.gov.uk>
Date: Thu, 19 Feb 2009 10:09:19 -0000
Message-ID: <674C997170C91C4E8E43E7E56B8C7A96018BD02C@mail.dstl.gov.uk>
To: "Ryan Jean" <ryanj@disnetwork.org>, <w3c-wai-ig@w3.org>
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.
Richard Mery BA (hons) 

  [dstl] Web Team 
  Knowledge and Information Services (KIS) 
  Building 248 Rm 2 
  Porton Down 
  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"
<html xmlns="http://www.w3.org/1999/xhtml">
<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;
  { display : none; }
  { visibility: hidden; }
 .popup > div {
   clear: both;
   text-align: right;
   margin-top: 5px;
<script type="text/javascript">
var gFocusItem = null;
function doFocus() {
  try {
    if (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");
  // Create alert
  var popupDiv = document.createElement("div");
  var dataNode = document.createTextNode(alertText);
  var close = document.createElement("a");
  close.setAttribute("onclick", "createRemoveAlert();");
  close.setAttribute("href", "#");
  var closeText = document.createTextNode("close");
  var closeDiv = document.createElement("div");
  // try parenting to a div on the page rather than document.body
  var divParent = document.getElementById("alertParent");
  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") {
  else {
    alertDiv.setAttribute("aria-hidden", "true");
  if (bGiveFocus == true) {
    gFocusItem = (contentId)? document.getElementById(contentId) :
<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 role="alert" tabindex="-1" class="popup" aria-hidden="true"
  <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
&quot;hidden&quot; to &quot;visible&quot;
        to hide and show it.
  <div style="text-align:right;margin-top:10px;">
    <a href="javascript:toggleAlert('alertVis');">close</a>
<div role="alert" tabindex="-1" class="popup" aria-hidden="true"
  <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 &quot;none&quot;
to &quot;block&quot;
        to hide and show it.
  <div style="text-align:right;margin-top:10px;">
    <a id="closeLink"
<div id="alertParent">




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:


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

This archive was generated by hypermail 2.3.1 : Tuesday, 13 October 2015 16:21:38 UTC