В целом доступность означает доступность, контент доступен, значит контент доступен.
С точки зрения программного обеспечения, приложение доступно, значит, приложение доступно для всех. Здесь все означает людей с ограниченными возможностями, слабовидящих или тех, кто использует программы чтения с экрана, чтобы использовать компьютер, или тех, кто предпочитает ориентироваться, используя клавиатуру вместо мыши. навигация с помощью клавиатуры вместо мыши.
Доступные приложения называются ARIA (Accessible Rich Internet Applications).
Доступность в Ext JS
Ext JS разработан для того, чтобы помнить, что он должен работать со всеми клавиатурными переходами. Он имеет встроенную функцию индексации вкладок и возможность фокусировки, и он всегда включен по умолчанию, поэтому нам не нужно добавлять какое-либо свойство для включения этой функции.
Эта функциональность позволяет всем компонентам с клавиатурой взаимодействовать с пользователем при вкладке в. Например, мы можем использовать вкладку для перехода к следующему компоненту вместо мыши. Таким же образом, мы можем использовать Shift + Tab для перемещения назад и использовать Enter на клавиатуре, чтобы щелкнуть и т. Д.
Фокус Стиль и вкладки
Фокус встроен в 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 = "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>
Чтобы увидеть эффект, используйте вкладку для перехода от следующей кнопки и Shft + Tab для фокусировки назад. Используйте ввод и посмотрите, как всплывет предупреждение, связанное с данной кнопкой.
Ария Тема
ExtJS предоставляет тему арии для слабовидящих.
Следующий пример показывает тему арии, которая легко доступна для слабовидящих.
<!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>
Вышеуказанная программа даст следующий результат. Вы можете использовать клавиши перемещения и мыши вверх и вниз для перемещения фокуса по сетке, и тема в основном для людей с нарушениями зрения.