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