一般来说，可访问性意味着可用性，内容可访问意味着内容可用。
在软件术语中，应用程序可访问意味着应用程序可用于所有人。 这里所指的是残疾人，视障者一次或使用屏幕阅读器的人，使用计算机或那些喜欢用键盘而不是使用鼠标的所有导航。
可访问的应用程序称为aria（可访问富互联网应用程序）。
ext js旨在牢记这一点，它应该与所有键盘导航工作。它已内置标签索引和聚焦能力，它始终是默认开启，所以我们不需要添加任何属性来启用此功能。
此功能允许所有键盘启用的组件在标签页插入时与用户交互。 像我们可以使用tab移动到下一个组件，而不是鼠标移动该组件。 同样，我们可以移动+标签向后移动，然后输入键盘进行点击等。
当使用击键进行制表时，focus将内置在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="/attachements/w3c/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>
要查看效果使用标签从下一个按钮和shift +选项卡向后移动使用输入并看到焦点按钮的相关警报将弹出
extjs为视障人士提供主题咏叹调。
这里的例子显示的咏叹调话题更容易为视障者。
下面的示例显示了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="/attachements/w3c/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>
这将产生以下结果，您可以使用选项卡和鼠标上下键移动焦点在网格上，为视障人士准备。
这是extjs内置主题和聚焦的方式，使任何人都可以轻松访问。
