Ext.js - 辅助功能

一般来说，可访问性意味着可用性，内容可访问意味着内容可用.

在软件方面，应用程序可访问意味着应用程序可供所有人使用.在这里，所有意味着残疾人，视障者或使用屏幕阅读器使用计算机的人或者喜欢使用键盘而不是使用鼠标导航的人.使用键盘导航而不是使用鼠标.

可访问的应用程序称为ARIA(可访问的富Internet应用程序).

Ext JS中的辅助功能

Ext JS旨在记住它应该适用于所有键盘导航.它具有内置的选项卡索引和聚焦功能，默认情况下它始终处于打开状态，因此我们不需要添加任何属性来启用此功能.

此功能允许所有键盘 - 已启用的组件在选项卡时与用户交互.例如，我们可以使用tab来移动到下一个组件而不是鼠标.同样，我们可以使用shift + tab向后移动并使用键盘上的Enter来点击等.

焦点样式和标签

焦点当使用按键进行跳转时，内置在Extjs中.

以下示例显示了当焦点随标签变化时样式的更改方式.

                                    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');                  }               }            });         });                     
Please click the button to see event listener:
                     

要查看效果，请使用标签从下一个按钮和shft +标签移动以向后聚焦.使用回车查看聚焦按钮的相关警报将如何弹出.

ARIA Theme

xtJS为视障人士提供主题咏叹调。

以下示例显示了视觉障碍者可轻松访问的咏叹调主题。

                                    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               ]            });         });