WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: popup not accessible

for

From: Ryan E. Benson
Date: Dec 19, 2011 3:15PM

What browser are you using?
--
Ryan E. Benson



On Mon, Dec 19, 2011 at 9:21 AM, Nancy Johnson < <EMAIL REMOVED> > wrote:
> 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
>>>> >>