WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: popup not accessible

for

From: Nancy Johnson
Date: Dec 16, 2011 10:39AM

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