Ext.js - Zugänglichkeit
Im Allgemeinen bedeutet Zugänglichkeit Verfügbarkeit, der Inhalt ist zugänglich, dh der Inhalt ist verfügbar.
In Bezug auf die Software ist die Anwendung zugänglich, dh die Anwendung ist für alle verfügbar. Hier sind alle Personen mit Behinderungen, Sehbehinderte oder Personen, die Bildschirmlesegeräte verwenden, um einen Computer zu verwenden, oder Personen, die lieber mit der Tastatur als mit der Maus navigieren. Navigation mit Tastatur statt mit der Maus.
Anwendungen, auf die zugegriffen werden kann, werden als ARIA (Accessible Rich Internet Applications) bezeichnet.
Barrierefreiheit in Ext JS
Ext JS wurde entwickelt, um zu berücksichtigen, dass es mit allen Tastaturnavigationen funktionieren sollte. Es verfügt über eine integrierte Indexierung und Fokusfunktion für Registerkarten und ist standardmäßig immer aktiviert, sodass wir keine Eigenschaft hinzufügen müssen, um diese Funktionalität zu aktivieren.
Mit dieser Funktion können alle Tastatur-fähigen Komponenten mit dem Benutzer interagieren, wenn sie mit Registerkarten versehen sind. Beispielsweise können wir anstelle einer Maus die Registerkarte verwenden, um zur nächsten Komponente zu gelangen. Auf die gleiche Weise können wir Umschalt + Tab verwenden, um rückwärts zu gehen, und die Eingabetaste auf der Tastatur verwenden, um zu klicken usw.
Fokus Styling und Tabs
Der Fokus ist in Extjs integriert, wenn Sie einen Tastendruck zum Tabulieren verwenden.
Das folgende Beispiel zeigt, wie sich der Stil ändert, wenn sich der Fokus mit den Registerkarten ändert.
<!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>Um den Effekt zu sehen, verwenden Sie die Registerkarte, um von der nächsten Schaltfläche zu wechseln, und die Taste shft +, um rückwärts zu fokussieren. Verwenden Sie die Eingabetaste und sehen Sie, wie die entsprechende Warnung der fokussierten Schaltfläche angezeigt wird.
ARIA-Thema
ExtJS bietet die Themenarie für Sehbehinderte.
Das folgende Beispiel zeigt das Arienthema, das für Sehbehinderte leicht zugänglich ist.
<!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>Das obige Programm führt zu folgendem Ergebnis. Sie können die Tabulatortasten nach oben und unten verwenden, um den Fokus über das Raster zu verschieben. Das Thema richtet sich im Wesentlichen an sehbehinderte Personen.