Ext.js - Aksesibilitas

Secara umum aksesibilitas berarti ketersediaan, konten dapat diakses berarti konten tersedia.

Dalam istilah perangkat lunak, aplikasi dapat diakses artinya aplikasi tersedia untuk semua. Di sini, semua berarti penyandang disabilitas, tunanetra atau mereka yang menggunakan pembaca layar untuk menggunakan komputer atau mereka yang lebih memilih untuk menavigasi menggunakan keyboard daripada menggunakan mouse. navigasi dengan keyboard daripada menggunakan mouse.

Aplikasi yang dapat diakses disebut ARIA (Aplikasi Internet Kaya yang Dapat Diakses).

Aksesibilitas di Ext JS

Ext JS dirancang untuk mengingat hal ini bahwa ia harus bekerja dengan semua navigasi keyboard. Ini memiliki pengindeksan tab bawaan dan kemampuan fokus, dan selalu aktif secara default sehingga kami tidak perlu menambahkan properti apa pun untuk mengaktifkan fungsionalitas ini.

Fungsionalitas ini memungkinkan semua komponen yang mendukung keyboard untuk berinteraksi dengan pengguna saat masuk ke tab. Sebagai contoh, kita dapat menggunakan tab untuk berpindah ke komponen berikutnya daripada mouse. Dengan cara yang sama, kita dapat menggunakan shift + tab untuk mundur dan menggunakan enter pada keyboard untuk mengklik, dll.

Fokus Styling dan Tab

Fokus ada di dalam Extjs saat menggunakan keystroke untuk tabbing.

Contoh berikut memperlihatkan bagaimana gaya berubah, saat fokus berubah dengan tab.

<!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>

Untuk melihat efeknya, gunakan tab untuk berpindah dari tombol berikutnya dan shft + tab untuk fokus ke belakang. Gunakan enter dan lihat bagaimana peringatan terkait tombol fokus akan muncul.

Tema ARIA

ExtJS menyediakan tema aria untuk tunanetra.

Contoh berikut menunjukkan tema aria yang mudah diakses oleh tunanetra.

<!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>

Program di atas akan memberikan hasil sebagai berikut. Anda dapat menggunakan tombol atas dan bawah tab dan mouse untuk memindahkan fokus melintasi kisi dan tema pada dasarnya untuk orang-orang tunanetra.