Accessibility (or A11Y) is often the overlooked aspect of web development. Making sure that your content is accessible is akin to making sure your content is visible on all major browsers. If you don't take accessibility into account while desigining your website, your content won't be available to all of your users.

Prerequisites:

• Include angular-aria (Angular 1.3.0+).

        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular-aria.js"></script>
        <link rel="styleSheet" href="release/ui-grid-unstable.css"/>
        <script src="/release/ui-grid-unstable.js"></script>
    

• Include ngAria module as a dependency in your app.

         var app = angular.module('app', ['ngAria', 'ui.grid']);
     

Browser Support Status

Specs			Support
Browser	OS	Utility	Core	Pagination	Cell Nav
Chrome	OSX	Voice Over	Full	Full	Inconsistently reads cell nav.
Firefox	OSX	Voice Over	Header/Menus Only	Full	None. Does not read.
Safari	OSX	Voice Over	Full	Full	Full

Why only OSX? Because its the only tool that the grid has been tested with. If you test it with something else and it works then feel free to update this document.

Test with OSX Voice Over

To enable OSX voice over you can use ⌘+F5. Modifying your Voice Over settings to automatically follow the mouse will make it easier to move the Voice Over cursor to the location you want to start navigating from. Alternatively you can use the Voice Over navigation to reach the table. Focus is managed within the grid to keep the voice over cursor from getting lost as menus are added and removed and while buttons are disabled.

Test without OSX Voice Over

Simply use the Tab and Shift+Tab keys to navigate the menus and buttons on the grid.

Visualize Accessibility

You can visualize the accessibility roles that have been applied to the grid using this simple little javascript tool: http://khan.github.io/tota11y/

For better performance with the following example, you can choose to load the ui-grid.core.js and specific feature files instead:

  <script src="/release/ui-grid.core.min.js"></script>
  <script src="/release/ui-grid.cellnav.min.js"></script>
  <script src="/release/ui-grid.pagination.min.js"></script>