Ext.js - 可訪問性

通常，可訪問性意味著可用性，內容可訪問意味著內容可用。

在軟體術語中，應用程式可訪問意味著應用程式對所有人可用。這裡，所有人指的是殘疾人、視障人士或使用螢幕閱讀器使用計算機的人，或者那些更喜歡使用鍵盤而不是滑鼠進行導航的人。

可訪問的應用程式稱為 ARIA（Accessible Rich Internet Applications）。

Ext JS 中的可訪問性

Ext JS 在設計時就考慮到了這一點，它應該適用於所有鍵盤導航。它具有內建的選項卡索引和可聚焦性，並且始終預設啟用，因此我們不需要新增任何屬性來啟用此功能。

此功能允許所有啟用鍵盤的元件在切換到時與使用者互動。例如，我們可以使用 Tab 鍵移動到下一個元件，而不是使用滑鼠。同樣，我們可以使用 Shift+Tab 向後移動，並使用鍵盤上的 Enter 鍵進行點選等。

焦點樣式和選項卡

使用擊鍵進行選項卡切換時，Extjs 中內建了焦點。

以下示例顯示了當焦點隨選項卡更改時樣式如何變化。

即時演示

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

要檢視效果，請使用 Tab 鍵從下一個按鈕移動，並使用 Shift+Tab 向後聚焦。使用 Enter 鍵檢視聚焦按鈕的相關警報如何彈出。

ARIA 主題

ExtJS 為視障人士提供 aria 主題。

以下示例顯示了 aria 主題，該主題易於視障人士訪問。

即時演示

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

以上程式將產生以下結果。您可以使用 Tab 鍵和滑鼠上下鍵在網格中移動焦點，該主題基本上是為視障人士設計的。

列印頁面