Scusate ma ho notato che in questo sito viene utilizzato il seguente codice html + Css per l'accessibilità:
Codice Html:
Codice Css:codice:<hr class="hidden" />
Qualcuno con parecchia esperienza alle spalle sa spiegarmi l'utilita di questo codice?? :master:codice:/* Accessibility Features */ .hidden { position:absolute; left:-9999px; width:0px; overflow:hidden; } /* END Accessibility Features */
Semplice. L'elemento <hr /> serve a separare logicamente due sezioni distinte. Anche se la funzione dell'<hr /> è particolare (un misto tra funzione semantica di separazione e funzione grafica perché disegna una linea orizzontale), questo elemento è oggi utilizzato proprio per separare in modo logico le varie sezioni della pagina (menu, contenuti, footer, ecc.).
Chiaramente, questa suddivisione logica deve essere sempre presente nella pagina, ma deve essere visibile solo quando la pagina viene consultata senza stili (ad es., da un browser testuale), in modo che chi utilizza browser alternativi per particolari problemi o per comodità possa capire immediatamente dove inizia una nuova sezione e dove termina la precedente. Per questo motivo, per mantenere accessibile l'informazione che l'<hr /> veicola, pur non facendo apparire alcuna linea nella visualizzazione su schermo, viene utilizzata la tecnica che hai postato nel codice CSS. Quella regola fa in modo di nascondere l'elemento <hr /> dalla pagina visualizzata su schermo spostandolo all'esterno dell'area visibile tramite un posizionamento assoluto e un offset sinistro negativo ed elevatissimo. Inoltre, per essere sicuro che la linea venga nascosta, le viene assegnato un overflow: hidden e una larghezza pari a 0. Così facendo, il risultato è diverso che applicando la semplice regola display: none. Se si usasse display: none, la linea sarebbe nascosta visivamente, ma scomparirebbe anche dal codice della pagina, come se non fosse stata scritta. Quindi, un browser alternativo che supporta i CSS, ignorerebbe completamente la presenza dell'<hr /> e l'informazione da essa veicolata verrebbe persa. Invece, spostando l'<hr /> "fuori schermo", si ottiene che essa non venga visualizzata ma continui ad essere presente, senza alcuna perdita di informazione. Guardando il codice cmq, posso segnalare 2 imprecisioni a chi l'ha scritto originariamente:
1. L'unità di misura non è necessaria quando si imposta una dimensione a 0 (width: 0px è lo stesso che width: 0).
2. L'offset sinistro negativo ed elevatissimo (left: -9999px) sarebbe meglio impostarlo in em o con un'altra unità di misura relativa (i pixel sono un'unità relativa, ma non per IE che li considera un'unità assoluta). Se l'utente ridimensiona il carattere, anche un offset espresso in em aumenta, con la conseguenza che l'elemento spostato fuori schermo viene spostato sempre più all'esterno e si è sicuri che non sarà mai visibile.
Tutto chiaro ma piu che altro nel sito che ho mensionato non capisco come mai continua a vedersi il tag <hr /> nonostante abbia una posizione assoluta e dovrebbe trovarsi fuori dal view-port del browser... :master:
Io non vedo nessun <hr /> nel sito...:master:
.......
Non ho guardato il codice, ma suppongo ci siano due spiegazioni possibili:
1. Si tratta di un border.
2. E' effettivamente un <hr /> che però non ha la classe "hidden".
Direi che si tratta della prima spiegazione,grazie per la disponibilità^^
Di nulla. ^^
Una curiosità: In che modo viene riconosciuto dallo ScreenReader il tag <hr />.Ho capito che serve per aumentare l'accessibilità del sito ma ad esempio:
lo Screenreader cosa leggera all'utente disabile??
Non so esattamente come uno screen reader "legga" il tag <hr />, ma un browser testuale ad esempio disegna una linea formata da dei trattini. Penso che anche la voce dello screen reader informi l'utente sul fatto che sta passando a leggere una "sezione" nuova della pagina.
Permessi di invio
Rispondi quotando