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-modelE’ 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-attributeng-model -> data-ng-model