WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: popup not accessible

for

From: Nancy Johnson
Date: Dec 20, 2011 12:30PM

I think it was Firefox iffy on the href's... in other browers, the
href didn't work at all.. <button... seemed to work pretty
consistently in all browsers, although the focus when directly to the
first button which I didn't like because instructions came before the
buttons.

I didn't pick the jquery... I would have picked something very simple
that wouldn't interfere with the interactive.

Nancy

On Mon, Dec 19, 2011 at 5:15 PM, Ryan E. Benson < <EMAIL REMOVED> > wrote:
> 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
>>>>> >>