zoukankan      html  css  js  c++  java
  • [AngularJS] Accessible Button Events

    Often buttons need to be handled by JavaScript, and if done improperly it can lead to accessibility issues. In this lesson you will improve a major news organization's global header with some basic HTML and JavaScript.

    Normal you should use native 'button' to make a button instead of use other html element to make a button, then you can access the button thought the keyboard.

    If you use a 'div', then what you should do to make it accessible to the user by keyborad, you should add 'role', 'tabindex' & 'aria-label' to it:

    <button aria-label="Help">
        <i class="icon icon-help"></i>
    </button>
    
    <div class="button" role="button" tabindex="0" aria-label="Menu">
        <i class="icon icon-menu"></i>
    </div>

    If you use AngularJS,and you want press 'Enter' to get the handle event, you should add 'ng-keydown' for it:

    <button aria-label="Help" ng-click="doStuff()">
        <i class="icon icon-help"></i>
    </button>
    
    <div class="button" role="button" tabindex="0" aria-label="Menu" ng-click="doStuff()" ng-keydown="doStuff()">
        <i class="icon icon-menu"></i>
    </div>
  • 相关阅读:
    java多线程-阻塞队列BlockingQueue
    java多线程-ThreadLocal
    JZ-C-26
    JZ-C-25
    JZ-C-24
    JZ-C-23
    JZ-C-22
    JZ-C-21
    JZ-C-20
    JZ-C-19
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5742720.html
Copyright © 2011-2022 走看看