如何使图层弹出窗口具有更高的可访问性?

时间:2018-11-09 06:50:54

标签: javascript jquery

我刚刚制作了层弹出窗口,我想使其更具可访问性。

这是我到目前为止尝试过的

<p><a href="#target" class="layer">Open layer1</a></p>

<p><a href="#target2" class="layer">Open layer2</a></p>


<div id="target" class="hidden">
  layer1
 <button class="close">clos</button>
</div>


<div id="target2" class="hidden">
  layer2
 <button class="close">clos</button>
</div>



$(document).ready(function() {
  $.fn.layerOpen = function(options) {
    return this.each(function() {
      var $this  = $(this);
      var $layer = $($this.attr('href') || null);
      $this.click(function() {
        $layer.attr('tabindex',0).show().focus();
        $layer.find('.close').one('click',function () {
          $layer.hide();
          $this.focus();
        });


      });
    });
  }
  $('.layer').layerOpen();
});

任何人都可以使用更易于访问的代码吗?还是任何例子? 谢谢。

2 个答案:

答案 0 :(得分:1)

避免使用循环和内联事件

我建议您这样做:

$(document).ready(function() {
  $.fn.layerOpen = function(options) {
      var $this  = $(this);
      var layer = null;
      $this.click(function() {
        layer = $(this).attr('href') || null;
        $(layer).attr('tabindex',0).show().focus();

      });
         $layer.find('.close').one('click',function () {
          $(layer).hide();
          $('[href="'+layer+'"]').focus();
        });
  }
  $('.layer').layerOpen();
});

答案 1 :(得分:1)

避免绑定多个点击事件。还可以使用哈希属性代替href属性。

我建议您这样做:

#include <iostream>


int main()
{

    char ch[50];
    std::cout << "Enter a character: ";
    std::cin.getline(ch, sizeof(ch));
    std::cout << "ASCII Value of " << ch << " is " << int(ch) << std::endl;

    char cha[50];
    std::cout << "Enter a character: ";
    std::cin >> cha;
    std::cout << "ASCII Value of " << cha << " is " << int(cha) << std::endl;

    if (ch[50] == cha[50]) {
        std::cout << "ASCII Value of " << cha << " is " << "equal to " << ch;
        return 0;
    }

    else if (ch > cha) {
        std::cout << ch << " is greater than " << cha << std::endl;
        std::cout << int(ch) - int(cha) << "is the differents between the two " ;
        return 1;
    }
    else

    {
        std::cout << ch << " is less than " << cha;
    }

    system("PAUSE");
}