Ext.js - Trợ năng
Nói chung, khả năng truy cập có nghĩa là tính khả dụng, nội dung có thể truy cập được nghĩa là nội dung có sẵn.
Theo thuật ngữ phần mềm, ứng dụng có thể truy cập được nghĩa là ứng dụng có sẵn cho tất cả mọi người. Ở đây, tất cả có nghĩa là người khuyết tật, người khiếm thị hoặc những người sử dụng trình đọc màn hình để sử dụng máy tính hoặc những người thích điều hướng bằng bàn phím thay vì sử dụng chuột. điều hướng bằng bàn phím thay vì dùng chuột.
Các ứng dụng có thể truy cập được gọi là ARIA (Ứng dụng Internet phong phú có thể truy cập).
Khả năng truy cập trong Ext JS
Ext JS được thiết kế để lưu ý rằng nó sẽ hoạt động với tất cả các điều hướng bàn phím. Nó có khả năng lấy nét và lập chỉ mục tab tích hợp và nó luôn được bật theo mặc định, vì vậy chúng tôi không cần thêm bất kỳ thuộc tính nào để kích hoạt chức năng này.
Chức năng này cho phép tất cả các thành phần hỗ trợ bàn phím tương tác với người dùng khi được gắn thẻ vào. Ví dụ, chúng ta có thể sử dụng tab để chuyển sang thành phần tiếp theo thay vì chuột. Theo cách tương tự, chúng ta có thể sử dụng phím shift + tab để di chuyển lùi và sử dụng phím enter trên bàn phím để nhấp, v.v.
Tập trung tạo kiểu và tab
Tiêu điểm được tích hợp sẵn trong Extjs khi sử dụng tổ hợp phím để tạo tab.
Ví dụ sau cho thấy cách thay đổi kiểu, khi tiêu điểm thay đổi theo các 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>Để xem hiệu ứng, hãy sử dụng tab để di chuyển từ nút tiếp theo và shft + tab để lấy nét lùi. Sử dụng enter và xem cảnh báo liên quan của nút tiêu điểm sẽ bật lên như thế nào.
Chủ đề ARIA
ExtJS cung cấp aria chủ đề cho người khiếm thị.
Ví dụ sau đây cho thấy chủ đề aria có thể dễ dàng truy cập cho người khiếm thị.
<!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>Chương trình trên sẽ cho kết quả như sau. Bạn có thể sử dụng các phím tab và chuột lên và xuống để di chuyển tiêu điểm trên lưới và chủ đề về cơ bản dành cho người khiếm thị.