AngularJS: accessibility

Accessibilità
Molte persone nel mondo dipendono da tecnologie
assistive, come:
● screen reader;
● modalità ad alto contrasto;
● supporto per la tastiera braille;
● ...

Accessibiità
Per comunicare agli screen reader cosa fare bisogna usare
gli attributi ARIA.
Inoltre uno dei requisiti di validazione è la piena compliance
con la grammatica di HTML 4/5

Problema con Angularjs
<some-checkbox ng-model="checked" ng-
disabled="isDisabled">
Custom Checkbox
</some-checkbox>
1) Inaccessibile perché non cumunica
niente alle tecnologie assistive
2) Usa un tag non riconosciuto

Cosa serve per renderlo accessibile?
1. aggiungere gli attributi aria;
2. eliminare il tag custom;
3. renderlo w3c compliant.

Attributi ARIA con Angularjs
Dalla versione 1.3 angular viene in nostro soccorso con il
servizio ngAria.
Cosa fa? aggiunge le proprietà ARIA

Importare ngAria
Usare ngAria è semplice:
● importazione della lib angular-aria.js
● angular.module('myApp', [‘ngAria’]);

ngAria
L'obiettivo di ngAria è quello di migliorare l'accessibilità di
Angular.js consentendo l’uso di attributi comuni ARIA
anche sulle direttive.
Attualmente non tutti gli elementi sono supportati.

ngAria - direttive
● ngModel
● ngShow
● ngHide
● ngDisabled
● ngClick
● ngDblclick
● ngMessages

ng-model
E’ di sicuro la direttiva più usata. Lega elementi del modello a:
● checkbox
● radio
● range
● text
● ...
ngAria aggiorna automaticamente agli elementi precedenti le prop.:
● aria-checked
● aria-valuemin e aria-valuemax
● aria-valuenow
● aria-invalid
● aria-required

ng-model
<some-checkbox role="checkbox" ng-model="checked" ng-disabled="isDisabled" aria-label="Custom Checkbox">
<span class="icon" aria-hidden="true"></span>
Custom Checkbox
</some-checkbox>
Proprietà:
"role": "checkbox",
"ng-model": "checked",
"aria-label": "Custom Checkbox",
"tabindex": "0",
"aria-disabled": "false",
"aria-checked": "false",
"aria-invalid": "false"
...

ng-disabled
<md-checkbox ng-disabled="disabled">
<md-checkbox ng-disabled="disabled" aria-disabled="true">
Con ngAria

ngShow & ngHide
<div ng-show="true"></div>
<div ng-show="true" aria-hidden="false"></div>
Con ngAria
Non ha senso per un uso classico perché ng-show mostra o meno di suo gli elementi interni ad uno
screen reader.
Diventa più sensato se un CSS lo sovrascrive.
<div ng-show="false" class="ng-hide" aria-hidden="true"></div>.ng-hide {
display: block;
opacity: 0;
} <div ng-show="true" aria-hidden="false"></div>
Diventa

ngClick & ngDblclick
<input type=”button” ng-click="myMethod()"></input>
<input type=”button” ng-click="myMethod()" tabindex=0></input>
Con ngAria

ngMessages
<div ng-messages="myForm.myName.$error">
<div ng-message="required">You did not enter a field</div>
<div ng-message="maxlength">Your field is too long</div>
</div>
<div ng-messages="myForm.myName.$error" aria-live="assertive">
<div ng-message="required">You did not enter a field</div>
<div ng-message="maxlength">Your field is too long</div>
</div>
Con ngAria

Disabilitare attributi
Gli attributi di ngAria non sono adatti ad ogni scenario,
quindi Angularjs da la possibilità di disattivarli
angular.module('myApp', ['ngAria'], function config($ariaProvider) {
$ariaProvider.config({
tabindex: false
});
});

E per le direttive custom?
● ngAria
● opzione “replace”

Usare i data-attribute
Per soddisfare le specifiche W3C usare i data-
attribute
ng-model -> data-ng-model

AngularJS: accessibility

More Related Content

What's hot (20)

AngularJS: accessibility

Editor's Notes