Ext.js - Accessibilità
In generale accessibilità significa disponibilità, il contenuto è accessibile significa che il contenuto è disponibile.
In termini di software, l'applicazione è accessibile significa che l'applicazione è disponibile per tutti. Qui si intendono tutte le persone con disabilità, i non vedenti o coloro che utilizzano lettori di schermo per utilizzare un computer o coloro che preferiscono navigare utilizzando la tastiera anziché il mouse. navigazione con la tastiera invece che con il mouse.
Le applicazioni accessibili sono chiamate ARIA (Accessible Rich Internet Applications).
Accessibilità in Ext JS
Ext JS è progettato per tenere presente che dovrebbe funzionare con tutte le navigazioni da tastiera. Ha l'indicizzazione delle schede e la capacità di messa a fuoco incorporate ed è sempre attivo per impostazione predefinita, quindi non è necessario aggiungere alcuna proprietà per abilitare questa funzionalità.
Questa funzionalità consente a tutti i componenti abilitati alla tastiera di interagire con l'utente quando vengono inseriti a schede. Ad esempio, possiamo usare la scheda per passare al componente successivo invece del mouse. Allo stesso modo, possiamo usare MAIUSC + TAB per andare indietro e usare Invio sulla tastiera per fare clic, ecc.
Focus Styling e Tab
Lo stato attivo è integrato in Extjs quando si utilizza la sequenza di tasti per la tabulazione.
L'esempio seguente mostra come cambiare lo stile, quando lo stato attivo cambia con le schede.
<!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>Per vedere l'effetto, usa tab per spostarti dal pulsante successivo e shft + tab per mettere a fuoco all'indietro. Usa invio e guarda come apparirà l'avviso correlato del pulsante focalizzato.
Tema ARIA
ExtJS fornisce l'aria del tema per i non vedenti.
L'esempio seguente mostra il tema dell'aria che è facilmente accessibile per i non vedenti.
<!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>Il programma di cui sopra produrrà il seguente risultato. È possibile utilizzare i tasti di tabulazione e del mouse su e giù per spostare il focus sulla griglia e il tema è fondamentalmente per le persone con problemi di vista.