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.