WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: popup not accessible

for

From: Ryan Hemphill
Date: Dec 16, 2011 8:57AM

Can you copy-paste the code that shows up when you activate the modal
window. That way I can see what results you are getting presently.

Ryan

On Fri, Dec 16, 2011 at 8:38 AM, Nancy Johnson < <EMAIL REMOVED> > wrote:

> 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
> >>