Ext.js - Dostępność
Ogólnie dostępność oznacza dostępność, treść jest dostępna oznacza, że treść jest dostępna.
Z punktu widzenia oprogramowania aplikacja jest dostępna oznacza, że jest dostępna dla wszystkich. Tutaj wszyscy oznaczają osoby niepełnosprawne, osoby niedowidzące lub osoby korzystające z czytników ekranu do obsługi komputera lub osoby, które wolą nawigować za pomocą klawiatury zamiast myszy. nawigacja za pomocą klawiatury zamiast myszy.
Aplikacje, które są dostępne, nazywane są ARIA (Accessible Rich Internet Applications).
Dostępność w Ext JS
Ext JS został zaprojektowany z myślą o tym, że powinien działać ze wszystkimi nawigacjami za pomocą klawiatury. Ma wbudowane indeksowanie kart i możliwość ustawiania ostrości i jest zawsze domyślnie włączone, więc nie musimy dodawać żadnej właściwości, aby włączyć tę funkcję.
Ta funkcjonalność umożliwia wszystkim komponentom obsługującym klawiaturę interakcję z użytkownikiem po wejściu na kartę. Na przykład możemy użyć tabulatora do przejścia do następnego komponentu zamiast myszy. W ten sam sposób możemy użyć shift + tab, aby przejść do tyłu i użyć enter na klawiaturze, aby kliknąć itp.
Skoncentruj się na stylach i kartach
Fokus jest wbudowany w Extjs podczas używania klawisza do tabulacji.
Poniższy przykład pokazuje, jak zmienić styl, gdy fokus zmienia się wraz z kartami.
<!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>Aby zobaczyć efekt, użyj tabulatora, aby przejść od następnego przycisku i shft + tab, aby ustawić ostrość wstecz. Użyj klawisza Enter i zobacz, jak wyskakuje alert powiązany z aktywnym przyciskiem.
Motyw ARIA
ExtJS zapewnia motyw przewodni dla osób niedowidzących.
Poniższy przykład przedstawia motyw arii, który jest łatwo dostępny dla osób niedowidzących.
<!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>Powyższy program da następujący wynik. Możesz użyć klawisza Tab i myszy w górę iw dół, aby przesuwać fokus po siatce, a motyw jest w zasadzie dla osób niedowidzących.