508/ARIA configuration option

[ghost]

Please consider adding the requisite 508/aria markup to your great plugin. The addition of the role and alert nag would make this plugin usable by many more businesses whose sites must be ADA compliant.

[JillElaine]

I propose modifying the creation of dialog box from

openWarningDialog = function () {

      var dialogContent = "<div id='idletimer_warning_dialog'><p>" + currentConfig.dialogText + "</p><p style='display:inline'>" + currentConfig.dialogTimeRemaining + ": <div style='display:inline' id='countdownDisplay'></div></p></div>";

      $(dialogContent).dialog({
...
        closeOnEscape: false,
        modal: true,
        title: currentConfig.dialogTitle,
        open: function () {
          $(this).closest('.ui-dialog').find('.ui-dialog-titlebar-close').hide();
        }
      });
...

to

    openWarningDialog = function () {

      var dialogContent = "<div id='idletimer_warning_dialog' role='alertdialog' aria-labelledby='idletimer_dialogTitle' aria-describedby='idletimer_dialogDesc'>" +
      "<p id='idletimer_dialogDesc'>" + 
      currentConfig.dialogText + 
      "</p><p style='display:inline'>" + 
      currentConfig.dialogTimeRemaining + 
      ": <div style='display:inline' id='countdownDisplay'></div></p></div>";

      $(dialogContent).dialog({
...
        closeOnEscape: false,
        modal: true,
        open: function () {
          $(this).closest('.ui-dialog').find('.ui-dialog-titlebar-close').remove();
          $(this).closest('.ui-dialog').find("span.ui-dialog-title").replaceWith("<span id='idletimer_dialogTitle' class='ui-dialog-title'>" + currentConfig.dialogTitle + "</span>");
        }
      });
...

Will these changes meet the ADA requirements?

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role

[ghost]

Nice work. I believe this meets the core requirements; the only other
would be the "nag" level of "assertive" to assist the screen readers.

Thank you for the immediate response! I will see if I can get this working
with our CMS Assets implementation.

Louis

Dr. Louis Smith, ThD
Chief Technology Officer, Kyra Solutions, Inc.

On Fri, Dec 4, 2015 at 2:06 PM, JillElaine [email protected] wrote:

I propose modifying the creation of dialog box from

openWarningDialog = function () {

  var dialogContent = "<div id='idletimer_warning_dialog'><p>" + currentConfig.dialogText + "</p><p style='display:inline'>" + currentConfig.dialogTimeRemaining + ": <div style='display:inline' id='countdownDisplay'></div></p></div>";

  $(dialogContent).dialog({

...
closeOnEscape: false,
modal: true,
title: currentConfig.dialogTitle,
open: function () {
$(this).closest('.ui-dialog').find('.ui-dialog-titlebar-close').hide();
}
});
...

to

openWarningDialog = function () {

  var dialogContent = "<div id='idletimer_warning_dialog' role='alertdialog' aria-labelledby='idletimer_dialogTitle' aria-describedby='idletimer_dialogDesc'>" +
  "<p id='idletimer_dialogDesc'>" +
  currentConfig.dialogText +
  "</p><p style='display:inline'>" +
  currentConfig.dialogTimeRemaining +
  ": <div style='display:inline' id='countdownDisplay'></div></p></div>";

  $(dialogContent).dialog({

...
closeOnEscape: false,
modal: true,
open: function () {
$(this).closest('.ui-dialog').find('.ui-dialog-titlebar-close').remove();
$(this).closest('.ui-dialog').find("span.ui-dialog-title").replaceWith("" + currentConfig.dialogTitle + "");
}
});
...

Will these changes meet the ADA requirements?

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role

—
Reply to this email directly or view it on GitHub
#22 (comment)
.

[JillElaine]

Add aria-live='assertive' to proposed code change.
Include 'Time remaining' text in aria-describedby section.

    openWarningDialog = function () {

      var dialogContent = "<div id='idletimer_warning_dialog' role='alertdialog' aria-labelledby='idletimer_dialogTitle' aria-describedby='idletimer_dialogDesc'>" +
      "<p id='idletimer_dialogDesc' aria-live='assertive'>" + 
      currentConfig.dialogText + 
      "<p style='display:inline'>" + 
      currentConfig.dialogTimeRemaining + 
      ": <div style='display:inline' id='countdownDisplay'></div></p></p></div>";

      $(dialogContent).dialog({
...
        closeOnEscape: false,
        modal: true,
        open: function () {
          $(this).closest('.ui-dialog').find('.ui-dialog-titlebar-close').remove();
          $(this).closest('.ui-dialog').find("span.ui-dialog-title").replaceWith("<span id='idletimer_dialogTitle' class='ui-dialog-title'>" + currentConfig.dialogTitle + "</span>");
        }
      });
...

I am unsure of where is the best place to put the aria-live reference, so I added it to the aria-describedby text. Also included the 'Time remaining' text in the aria-describedby. Not sure how a screenreader will announce the time remaining, as it updates every second. Can you test on a screenreader?

[JillElaine]

Any news on this proposed patch, LouisLSmith? Did it provide the functionality to meet 508 ARIA specs?

[ghost]

Sorry I have been down with the flu. Yes, the 508 change worked and I have
recommended that it be adopted by our clients - so it is up to them.

The idle timeout is a great idea, and your implementation is very nice.

Thanks again for your support!

Louis

Dr. Louis Smith, ThD
Chief Technology Officer, Kyra Solutions, Inc.

On Wed, Feb 24, 2016 at 12:21 PM, JillElaine [email protected]
wrote:

Any news n this, LouisLSmith?

—
Reply to this email directly or view it on GitHub
#22 (comment)
.