jQuery e accessibilità: nascondere gli elementi

Uno dei problemi maggiori della libreria jQuery è che spesso fa ricorso alla dichiarazione display: none per nascondere gli elementi. Tale dichiarazione viene purtroppo interpretata dai lettori di schermo impedendo loro di leggere il contenuto di un elemento. Possiamo ovviare a questo problema usando due metodi custom che andremo ad aggiungere al core della libreria, estendendone così le funzionalità.

$.fn.hideAccessible = function() {
  this.css({
    position: 'absolute',
    top: '-1000em'
  });
}

Il primo metodo, che abbiamo chiamato hideAccessible(), usa il posizionamento assoluto negativo per nascondere un elemento dalla pagina. Il suo uso è il seguente:

$('#test').hideAccessible();

Ovviamente, per eseguire l’operazione inversa avremo bisogno di un metodo analogo ma all’opposto. Eccolo:

$.fn.showAccessible = function() {
  this.css('position', 'static');
}

Questo metodo resetta il posizionamento assoluto di un elemento riportandolo al valore originale, ossia static. Un suo uso:

$('#test').showAccessible();

Ovviamente possiamo migliorare questi due metodi aggiungendo anche altri parametri, quali per esempio effetti e transizioni.