Ext.js - Erişilebilirlik
Genel olarak erişilebilirlik, kullanılabilirlik anlamına gelir, içeriğin erişilebilir olması, içeriğin kullanılabilir olduğu anlamına gelir.
Yazılım açısından, uygulamanın erişilebilir olması, uygulamanın herkes tarafından kullanılabileceği anlamına gelir. Burada, engelliler, görme engelliler veya bilgisayar kullanmak için ekran okuyucu kullanan veya fare yerine klavyeyi kullanarak gezinmeyi tercih edenler anlamına gelir. fare kullanmak yerine klavye ile gezinme.
Erişilebilir uygulamalar, ARIA (Erişilebilir Zengin İnternet Uygulamaları) olarak adlandırılır.
Ext JS'de erişilebilirlik
Ext JS, tüm klavye gezinmeleriyle çalışması gerektiğini akılda tutmak için tasarlanmıştır. Yerleşik sekme indeksleme ve odaklanma yeteneği vardır ve varsayılan olarak her zaman açıktır, bu nedenle bu işlevi etkinleştirmek için herhangi bir özellik eklememize gerek yoktur.
Bu işlevsellik, tüm klavye etkin bileşenlerin sekmeli olarak kullanıcıyla etkileşime girmesini sağlar. Örneğin, bir sonraki bileşene geçmek için fare yerine tab kullanabiliriz. Aynı şekilde, geri gitmek için shift + tab kullanabilir ve tıklama için klavyedeki enter tuşunu kullanabiliriz, vb.
Odak Şekillendirme ve Sekmeler
Sekme için tuş vuruşu kullanılırken odak Extj'lerde yerleşiktir.
Aşağıdaki örnek, sekmelerle odak değiştiğinde stilin nasıl değişeceğini gösterir.
<!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>Efekti görmek için, bir sonraki düğmeden hareket etmek için sekmeyi ve geriye odaklanmak için shft + sekmeyi kullanın. Enter'ı kullanın ve odaklanılan düğmenin ilgili uyarısının nasıl açıldığını görün.
ARIA Teması
ExtJS, görme engelliler için tema alanı sağlar.
Aşağıdaki örnek, görme engelliler için kolayca erişilebilen arya temasını göstermektedir.
<!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>Yukarıdaki program aşağıdaki sonucu verecektir. Odağı ızgarada hareket ettirmek için sekme ve fare yukarı ve aşağı tuşlarını kullanabilirsiniz ve tema temelde görme engelli kişiler içindir.