免費(fèi)AI編程助手
Ext.js 可訪問性
什么是可訪問性？
一般來說，可訪問性意味著可用性，內(nèi)容可訪問意味著內(nèi)容可用。
在軟件術(shù)語中，應(yīng)用程序可訪問意味著應(yīng)用程序可用于所有人。 這里所指的是殘疾人，視障者一次或使用屏幕閱讀器的人，使用計算機(jī)或那些喜歡用鍵盤而不是使用鼠標(biāo)的所有導(dǎo)航。
可訪問的應(yīng)用程序稱為ARIA（可訪問富互聯(lián)網(wǎng)應(yīng)用程序）。
Ext JS中的輔助功能:
Ext JS旨在牢記這一點(diǎn)，它應(yīng)該與所有鍵盤導(dǎo)航工作。它已內(nèi)置標(biāo)簽索引和聚焦能力，它始終是默認(rèn)開啟，所以我們不需要添加任何屬性來啟用此功能。
此功能允許所有鍵盤啟用的組件在標(biāo)簽頁插入時與用戶交互。 像我們可以使用tab鍵移動到下一個組件，而不是鼠標(biāo)點(diǎn)擊該組件。 同樣，我們可以tab+shift鍵移動到上一個組件，然后輸入鍵盤進(jìn)行點(diǎn)擊等。
焦點(diǎn)樣式和選項卡:
當(dāng)使用tab按鍵切換替代鼠標(biāo)點(diǎn)擊時，聚焦樣式將內(nèi)置在Extjs中。
下面的示例顯示了當(dāng)焦點(diǎn)隨著tab的使用而改變時如何改變樣式。
<!DOCTYPE html>
<html>
<head>
<link href="./ext-6.0.0/build/classic/theme-crisp/resources/theme-crisp-all.css" rel="stylesheet" />
<script type="text/javascript" src="./ext-6.0.0/build/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>運(yùn)行結(jié)果如下所示（使用tab鍵可以切換到下一個可聚焦項，使用shift + tab鍵可以切換到上一個可聚焦項）：
ARIA主題:
ExtJS為視障人士提供ARIA(可訪問的富internet應(yīng)用程序)主題。
這里的例子顯示的ARIA題更容易為視障者閱讀（對于部分顏色弱視或者色盲的用戶優(yōu)化）。
下面的示例顯示了ARIA主題:
<!DOCTYPE html>
<html>
<head>
<link href="./ext-6.0.0/build/classic/theme-aria/resources/theme-aria-all.css" rel="stylesheet" />
<script type="text/javascript" src="./ext-6.0.0/build/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>這將產(chǎn)生以下結(jié)果
您可以使用TAB和上下左右鍵或者使用鼠標(biāo)在網(wǎng)格上移動焦點(diǎn)，方便視障人士進(jìn)行閱讀。
這是ExtJS內(nèi)置主題和聚焦的方式，可以讓任何人都可以輕松訪問。
更多建議：