WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: popup not accessible

for

From: Nancy Johnson
Date: Dec 19, 2011 7:24AM

Thank you for helping me..

I did get it to work by switching to "<button...>... It's funny last
week I couldn't get href's to work without a mouse.. today they are..
maybe some caching issues.. don't know.

I also found the source so I can now compare...

Nancy

On Fri, Dec 16, 2011 at 12:37 PM, Nancy Johnson < <EMAIL REMOVED> > wrote:
> Sorry...  Here it is:  It is what is in the button class below with
> accept and decline...
>
> <div id="confirm-overlay" class="simplemodal-overlay" style="opacity:
> 0.5; height: 694px; width: 1375px; position: fixed; left: 0px; top:
> 0px; z-index: 1001;"></div>
> <div id="confirm-container" class="simplemodal-container"
> style="position: fixed; z-index: 1002; height: 300px; width: 500px;
> left: 435.5px; top: 20%;">
> <a class="modalCloseImg simplemodal-close" title="Close"></a>
> <div class="simplemodal-wrap" tabindex="-1" style="height: 100%;
> outline: 0px none; width: 100%; overflow: visible;">
> <div id="confirm" class="simplemodal-data" style="display: block;">
> <div class="header">
> <h2>header</h2>
> </div>
> <div class="message">
> <h3>subheader</h3>
> <p class="borders">legal stuff</p>
> <p class="indent">more legal stuff.</p>
> <p class="indent">
> more legal stuff.
>
> </p>
> </div>
> <div class="buttons">
> <div class="no simplemodal-close">Decline</div>
> <div class="yes">Agree</div>events=Object { click={...}}handle=function()
> </div>
> </div>
> </div>
>
> On Fri, Dec 16, 2011 at 10:57 AM, Ryan Hemphill
> < <EMAIL REMOVED> > wrote:
>> 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
>>> >>