WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: popup not accessible

for

From: Nancy Johnson
Date: Dec 16, 2011 6:36AM

I has to do with I believe the popup itself and not the elements
within the popup.

I'm sorry I cannot show you online.. There are two functions in the
popup a cookie function and a accept or decline to view a pdf...
I have included here... I replaced all text with www or vvv, but it
is all in the JS accept the actual buttons which are divs I tried
changing to hrefs and added tabindexing... I tried adding
role="link".. I am just beginning to get up to speed on wai-aria so
maybe I picked the incorrect role.. .

JQUERY
jQuery(function ($) {
$('#confirm-dialog input.confirm, #confirm-dialog
a.confirm').click(function (e) {
e.preventDefault();
var username=getCookie("vvvv");
if (username!=null && username!="")
{
window.open(e.currentTarget.href,',');
}
else
{
confirm("<h3>vvvvv</h3> "
+ "<p class='borders'>vvvvv.</p>"

+ "<p class='indent'>"
+ "vvvv."
+ "</p><p class='indent'>"
+ vvvvvv", function () {
window.open(e.currentTarget.href,',');
});
}
});
});

function confirm(message, callback) {
$jq('#confirm').modal({
/*closeHTML: "<a href='#' title='Close' class='modal-close' >Close</a>",*/
position: ["20%",],
overlayId: 'confirm-overlay',
containerId: 'confirm-container',
minHeight: "300",
minWidth: "500",
onShow: function (dialog) {
var modal = this;

$('.message', dialog.data[0]).append(message);
$('.header', dialog.data[0]).append("<h2>vvvvv</h2>");

// if the user clicks "yes"
$('.yes', dialog.data[0]).click(function () {
setCookie("protected_pdf","pdfuser");
if ($.isFunction(callback)) {
callback.apply();
}
modal.close(); // or $.modal.close();
});
}
});
}


CSS

#confirm {display:none;}
#confirm-overlay {background-color:#eee; cursor:wait;}
#confirm-container {height:140px; width:420px; /*font: 16px/22px
'Trebuchet MS', Verdana, Arial;*/ text-align:left; background:#fff;
border:2px solid #999;}
#confirm-container .header {height:30px; line-height:30px; width:100%;
/*background:url(../img/rule_confirm_header.gif)
repeat-x;*/background-image:url(../img/sprites.png);background-repeat:no-repeat;background-position:100%
0; color:#fff; font-weight:bold;}
#confirm-container .header h2 {padding: 2px 8px; color: #fff;
font-weight:bold; font-size:18px;}
#confirm-container .message {color:#333; font-size:13px; margin:0;
padding:12px 25px;}
#confirm-container .message h3 {color:#333; font-size:16px;}
#confirm-container .message p {margin: 7px 0}
#confirm-container .message p.indent {margin: 7px 35px}
#confirm-container .message .borders{border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc; padding:5px 0; }
#confirm-container .buttons { display:block; text-align:right;
padding: 0 30px; }
#confirm-container .buttons .yes, #confirm-container .buttons
.no{display:inline; padding:5px 10px; *padding:0px 10px; color:#666;
font-weight:bold; background:url(../img/graybar.png) repeat-x bottom
left; border:1px solid #bbb; cursor:pointer; margin: 10px}
#confirm-container a.modal-close,
#confirm-container a.modal-close:link,
#confirm-container a.modal-close:active,
#confirm-container a.modal-close:visited {text-decoration:none;
font-weight:bold; position:absolute; right:10px; top:5px; color:#fff;}
#confirm-container a.modal-close:hover {color:#ccc;}

HTML
<div id="confirm" >
<div class="header"></div>

<div class="message"></div>

<div class="buttons">
<div class="no simplemodal-close" >Decline</div>

<div class="yes" >Agree</div>
</div>
</div>

On Thu, Dec 15, 2011 at 6:14 PM, Ryan Hemphill
< <EMAIL REMOVED> > wrote:
> If you are saying that they cannot use the enter or space key to click the
> button, then there may be two reasons.
>
> Check first to see that you added a tabindex attribute to the buttons.  If
> you can't make it work even then, it's going to take an additional jQuery
> hack to fix the problem - can you show me where I can see the problem
> itself?
>
>
> Ryan
>
> On Thu, Dec 15, 2011 at 3:55 PM, Nancy Johnson < <EMAIL REMOVED> > wrote:
>
>> I was given a jquery popup.. to style..  The text and html within the
>> popup is generated in the javascript and not within the html page..
>> The browser does not render this...
>>
>> The user is required to accept or decline here.  there is also a close
>> button
>>
>> The screen reader will read the text.... but cannot interact to accept
>> or decline.
>>
>> Is there a way this can be made accessible?
>>
>> Thanks
>>
>> Nancy
>>