JAST Egg it

Come rendere un click accessibile

Per garantire che un click su un link sia accessibile, è necessario gestire anche l'intercettazione dei click eseguiti con strumenti di navigazione alternativi quali per esempio la tastiera.

Gestire gli eventi click e keypress di un elemento

La funzione event( ) è alla base di questo tutorial, ma sarà sfruttata anche una classe del Core di Jast: kbd che prevede una funzione che agevola la vita dello sviluppatore: getKeyPressed( ).

tramite la funzione event intercetteremo l'eveto click e keypress:

	_.event('id-elemento', 'click', 'alert("hai fatto click")');
	_.event('id-elemento', 'keypress', 'alert("hai premuto un tasto")');

L'evento keypress però deve intercettare e gestire solo la pressione del tasto spazio e del tasto enter. Poichè tutti i browser gestiscono gli eventi della tastiera in modo non proprio uguale, esiste la funzione del core kbd.getKeyPressed( ) che si preoccupa di uniformarne la gestione:

	function hoFattoClick(){
		alert("hai fatto click");
	}
	function testKeyPress(event){
		var keynum = JASTEggIt.kbd.getKeyPressed(event); 
		if( keynum==32 || keynum == 13){
			hoFattoClick(); 
			return false;
		}
	}
	_.event('id-elemento', 'click', hoFattoClick );
	_.event('id-elemento', 'keypress', testKeyPress );

Se provi prima il codice, il click su questo elemento causerà un alert, prova anche ad attivare il link da tastiera

Il modo più semplice: la classe Accessibility

Grazie alla classe Accessibility del Core di Jast il codice appena descritto è semplificato:

	function hoFattoClick(){
		alert("hai fatto click");
	}
	_.Accessibility.clickEvent('id-elemento-2', hoFattoClick );

Se provi prima il codice, il click su questo elemento causerà un alert, prova anche ad attivare il link da tastiera.

Abbiamo reso il nostro click accessibile!