[AngularJS] Accessible Button Events

最新推荐文章于 2025-09-12 16:56:45 发布

weixin_34137799

最新推荐文章于 2025-09-12 16:56:45 发布

阅读量73

点赞数

文章标签： javascript ViewUI

本文讲解了如何使用HTML和JavaScript改进按钮的可访问性，包括正确使用'button'元素及如何为非标准元素添加必要的属性如'role'、'tabindex'和'aria-label'，并介绍了在AngularJS中处理键盘事件的方法。

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>