Ext.js - Accessibilité
En général, l'accessibilité signifie la disponibilité, le contenu est accessible signifie que le contenu est disponible.
En termes de logiciel, l'application est accessible signifie que l'application est disponible pour tous. Ici, tout signifie les personnes handicapées, les malvoyants ou ceux qui utilisent des lecteurs d'écran pour utiliser un ordinateur ou ceux qui préfèrent naviguer en utilisant le clavier au lieu d'utiliser une souris. navigation avec le clavier au lieu d'utiliser une souris.
Les applications accessibles sont appelées ARIA (Accessible Rich Internet Applications).
Accessibilité dans Ext JS
Ext JS est conçu pour garder cela à l'esprit qu'il doit fonctionner avec toutes les navigations au clavier. Il a une indexation d'onglet et une capacité de mise au point intégrées, et il est toujours activé par défaut, nous n'avons donc pas besoin d'ajouter de propriété pour activer cette fonctionnalité.
Cette fonctionnalité permet à tous les composants activés pour le clavier d'interagir avec l'utilisateur lorsqu'ils sont tabulés dans. Par exemple, nous pouvons utiliser tab pour passer au composant suivant au lieu d'une souris. De la même manière, nous pouvons utiliser shift + tab pour reculer et utiliser entrée sur le clavier pour cliquer, etc.
Style et onglets du focus
Le focus est intégré dans Extjs lors de l'utilisation de touches pour la tabulation.
L'exemple suivant montre comment le style change, lorsque le focus change avec les onglets.
<!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>Pour voir l'effet, utilisez tab pour passer du bouton suivant et shft + tab pour se concentrer en arrière. Utilisez Entrée et voyez comment l'alerte associée au bouton ciblé apparaîtrait.
Thème ARIA
ExtJS fournit l'aria thématique pour les malvoyants.
L'exemple suivant montre le thème aria qui est facilement accessible pour les malvoyants.
<!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>Le programme ci-dessus produira le résultat suivant. Vous pouvez utiliser les touches de tabulation et de souris haut et bas pour déplacer le focus sur la grille et le thème est essentiellement destiné aux personnes malvoyantes.