Friday, February 17, 2017

Ext.js - Accessibility

What is accessibility?

In general accessibility means availability, the content is accessible means the content is available.
In software terms the application is accessible means the application is available for all. Here all means the persons with disabilities, the visually impaired once or those who use screen readers, to use a computer or those who prefers all the navigation with keyboard instead of using a mouse.

The applications which are accessible are called ARIA (Accessible Rich Internet Applications).

Accessibility in Ext JS:

Ext JS is designed to keep this in mind that it should work with all keyboard navigations.It has built in tab indexing and focus-ability, and it is always on by default so we do not need to add any property to enable this functionality.
This functionality allows all keyboard enabled components to interact with the user when tabbed into. Like we can use tab for moving on to next component instead of a mouse to move on that component. Same way we can shift+tab for moving backward and enter keyboard for clicking etc.

Focus styling and tabs:

The Focus is inbuilt in Extjs when using keystroke for tabbing.
Below example shows how to the style changes when the focus changes with the tabs.
<!DOCTYPE html>
<html>
   <head>
      <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-crisp/resources/theme-crisp-all.css" rel="stylesheet" />
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
      <script type="text/javascript">
         Ext.onReady(function(){
            Ext.create('Ext.Button', {
               renderTo: Ext.getElementById('button1'),
               text: 'Button1',
               listeners: {
                  click: function() {
                     Ext.MessageBox.alert('Alert box', 'Button 1 is clicked'); 
                  }
               }
            });
             Ext.create('Ext.Button', {
               renderTo: Ext.getElementById('button2'),
               text: 'Button2',
               listeners: {
                  click: function() {
                     Ext.MessageBox.alert('Alert box', 'Button 2 is clicked'); 
                  }
               }
            });
             Ext.create('Ext.Button', {
               renderTo: Ext.getElementById('button3'),
               text: 'Button3',
               listeners: {
                  click: function() {
                     Ext.MessageBox.alert('Alert box', 'Button 3 is clicked'); 
                  }
               }
            });
         });     
      </script>
   </head>
   <body> <p>Please click the button to see event listener:</p>
      <span id="button3"/>
      <span id="button2"/>
      <span id="button1"/>
   </body>
</html>
To see the effect use tab for moving from next button and shft+tab for focusing backward use enter and see the focused button's related alert would pop up

ARIA theme:

ExtJS provides the theme aria for the visually impaired person.
Here the example to show the aria theme which is more accessible for visually impaired.
Below example shows the Aria theme:
<!DOCTYPE html>
<html>
   <head>
      <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-aria/resources/theme-aria-all.css" rel="stylesheet" />
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
      <script type="text/javascript">
         Ext.require([
            'Ext.grid.*',
            'Ext.data.*'
         ]);
         // Creation of data model
         Ext.define('StudentDataModel', {
            extend: 'Ext.data.Model',
            fields: [
            {name: 'name', mapping : 'name'},
            {name: 'age', mapping : 'age'},
            {name: 'marks', mapping : 'marks'}
            ]
         });

         Ext.onReady(function(){
            // Store data
            var myData = [
               { name : "Asha", age : "16", marks : "90" },
               { name : "Vinit", age : "18", marks : "95" },
               { name : "Anand", age : "20", marks : "68" },
               { name : "Niharika", age : "21", marks : "86" },
               { name : "Manali", age : "22", marks : "57" }
            ];
            // Creation of first grid store
            var firstGridStore = Ext.create('Ext.data.Store', {
            model: 'StudentDataModel',
            data: myData
            });
            // Creation of first grid
            var firstGrid = Ext.create('Ext.grid.Panel', {
               store            : firstGridStore,
               columns          :
                  [{ 
                     header: "Student Name",
                     dataIndex: 'name', 
                     id : 'name',    
                     flex:  1,     
                  sortable: true
                  },{
                     header: "Age", 
                     dataIndex: 'age',
                     flex: .5, 
                     sortable: true
                  },{
                     header: "Marks",
                     dataIndex: 'marks',
                     flex: .5, 
                     sortable: true
                  }],
               stripeRows       : true,
               title            : 'First Grid',
               margins          : '0 2 0 0'
            });
     
            // Creation of a panel to show both the grids.
            var displayPanel = Ext.create('Ext.Panel', {
               width        : 600,
               height       : 200,
               layout       : {
                  type: 'hbox',
                  align: 'stretch',
                  padding: 5
               },
               renderTo     : 'panel',
               defaults     : { flex : 1 }, 
               items        : [
                  firstGrid
               ]
            });
         });
      </script>
   </head>
   <body>
      <div id = "panel" > </div>
   </body>
</html>
This will produce following result and you can use tab and mouse up and down keys for moving the focus across the grid and the theme is basically for the visually impaired people.
This is how ExtJS inbuilt theme and focusing makes it easy to accessible for anyone.
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)