WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: popup not accessible

for

Number of posts in this thread: 8 (In chronological order)

From: Nancy Johnson
Date: Thu, Dec 15 2011 1:54PM
Subject: popup not accessible
No previous message | Next message →

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

From: Ryan Hemphill
Date: Thu, Dec 15 2011 4:12PM
Subject: Re: popup not accessible
← Previous message | Next message →

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

From: Nancy Johnson
Date: Fri, Dec 16 2011 6:36AM
Subject: Re: popup not accessible
← Previous message | Next message →

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

From: Ryan Hemphill
Date: Fri, Dec 16 2011 8:57AM
Subject: Re: popup not accessible
← Previous message | Next message →

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

From: Nancy Johnson
Date: Fri, Dec 16 2011 10:39AM
Subject: Re: popup not accessible
← Previous message | Next message →

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

From: Nancy Johnson
Date: Mon, Dec 19 2011 7:24AM
Subject: Re: popup not accessible
← Previous message | Next message →

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

From: Ryan E. Benson
Date: Mon, Dec 19 2011 3:15PM
Subject: Re: popup not accessible
← Previous message | Next message →

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



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

From: Nancy Johnson
Date: Tue, Dec 20 2011 12:30PM
Subject: Re: popup not accessible
← Previous message | No next message

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 ADDRESS REMOVED = > wrote:
> What browser are you using?
> --
> Ryan E. Benson
>
>
>
> On Mon, Dec 19, 2011 at 9:21 AM, Nancy Johnson < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS 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
>>>>> >>