FED-icons-01 FED-icons-02 FED-icons-03 FED-icons-04 FED-icons-05 FED-icons-06 FED-icons-07 FED-icons-08 FED-icons-09 FED-icons-10 FED-icons-11

Angular.js and Accessibility

Single Page Applications utilizing frameworks like Angular.js dynamically update the DOM. This can cause issues for accessibility as some devices like screen readers rely on parsing the DOM at page load. Updates to the DOM, like what occurs with single-page apps, can be missed information for accessibility devices. WAI-ARIA exists to provide information to the user about these kinds of interface and content DOM updates. The Angular core team has begun to address the accessibility issues within the framework itself by creating a module called ngAria.

ngAria

ngAria enables common ARIA attributes for some of the Angular framework directives such as:

  • ngModel
  • ngDisabled
  • ngShow
  • ngHide
  • ngClick
  • ngDblClick
  • ngMessages

ngAria works on top of other directives adding ARIA attributes at runtime. Say you have added a ng-click to a div like so:

<div  ng-model="data" ng-click="doSomething()">
    Div with ng-click
</div>

When accessing a page through the keyboard divs along with and <span> do not receive keyboard focus thus prohibiting keyboard navigation of this feature. ngAria helps you out by adding the role= “button” and tabindex= “0” attributes.

        <div ng-click="doSomething()" role="button" tabindex="0">clickable div</div>
    

This allows screenreaders to know that this div is really serving the semantic purpose of a button and allows the div to be tabbed to from the keyboard.

In the example from the Angular documentation you have the following directive:

<some-checkbox type="checkbox" role="checkbox" ng-model="data" ng-disabled="isDisabled" disabled>
    Custom Checkbox
</some-checkbox>
With the ngAria module included, you get the following output markup:
<some-checkbox type="checkbox" role="checkbox" ng-model="data" ng-disabled="isDisabled" disabled="disabled" class="ng-pristine ng-valid ng-touched" tabindex="0" aria-disabled="true" aria-checked="false">
    Custom Checkbox
</some-checkbox>

Note it is necessary that you put a role attribute in your directive if it is applicable. Here is a nice list of roles. Check out this awesome Pen by a hero of mine Marcy Sutton that shows what happens when these key use cases are run through ngAria.

Title Element

The <title> element of the “page” in the Angular app should be updated to reflect the content of the page. Most likely whenever you are using the router to update url you should also be updating content in the <tittle>. See this article Page Applications, Angular.js and Accessibility by Gavin Ogston for examples.

Focus Management

When angular is making dynamic updates to the DOM, you should be cognizant of where the keyboard focus is as the view update changes occur and where the focus is after these changes occur. If an element has focus it needs to be thought out in the context of that certain scenario where the focus should be set on the view update. For some examples check out Page Applications, Angular.js and Accessibility and On Client-Rendered Accessibility

Favorite Accessibility Resources


Front Edge

Lead UI Developer