[AngularJS] Accessible Button Events

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

Normal should use native ' button ' to make a button instead of the use other HTML element to make a button and then you can AC Cess the button thought the keyboard.

If you use a ' div ' and then the "what" should do to make it accessible to the user by Keyborad, you should add ' role ', ' Tabinde X ' & ' Aria-label ' to it:

<ButtonAria-label= "Help">    <Iclass= "icon Icon-help"></I></Button><Divclass= "button"role= "button"TabIndex= "0"Aria-label= "Menu">    <Iclass= "icon Icon-menu"></I></Div>

If you use Angularjs,and-Want press ' Enter ' to get the handle event, you should add ' Ng-keydown ' for it:

<ButtonAria-label= "Help"Ng-click= "Dostuff ()">    <Iclass= "icon Icon-help"></I></Button><Divclass= "button"role= "button"TabIndex= "0"Aria-label= "Menu"Ng-click= "Dostuff ()"Ng-keydown= "Dostuff ()">    <Iclass= "icon Icon-menu"></I></Div>

[AngularJS] Accessible Button Events