Tag: accessibility
Web Accessibility Toolbar, ovvero la barra dell’accessibilità del web
Quello di rendere il più possibile accessibile un applicativo web è una delle maggiori problematiche legate alla struttura stessa e concettuale del sito.
Ho di recente provato questa toolbar (Web Accessibility Toolbar - qui alcune informazioni in italiano) ed il risultato è davvero ottimo… se vi interessa l’argomento, dovete assolutamente scaricarlo…
The Web Accessibility Toolbar has been developed to aid manual examination of web pages for a variety of aspects of accessibility. It consists of a range of functions that:
- identify components of a web page
- facilitate the use of 3rd party online applications
- simulate user experiences
- provide links to references and additional resources
We value all feedback received. Please contact us about any functionality that may not work or other suggestions for improvement.
Accessibilità ed usabilità nelle form
Dopo aver visto come creare e far funzionare un semplice motore di ricerca, ora vedremo, usando pochi accorgimenti, come renderlo accessibile via codice HTML.
Form iniziale:
HTML:
Il fatto di usare solo elementi strutturali usando l'elemento "fieldset" aiuta sicuramente l'interpretazione della pagina da parte dei browser testuali e tecnologie assistive. L'elemento "legend" servirà a dare un nome ai vari gruppi della form. Nel caso specifico avremo bisogno di un solo "legend".
HTML:
-
<legend>Modulo di Ricerca</legend>
-
</fieldset>
Occorre associare delle etichette (label) significative ai relativi input e legarle con l'attributo "for" al corrispettivo "id" dell'input.
Occorre controllare, soprattutto in caso di form molto complesse, che vi sia un ordine logico e che questo possa essere seguito anche attraverso la navigazione da tastiera spostando il focus delle azioni con il tasto "tab". Per far questo useremo l'attributo "tabindex".
HTML:
Per far si che le "input" siano accessibili anche usando le combinazioni dei tasti di scelta rapida, daremo loro l'attributo "accesskey" indicando nel label corrispettivo la lettera tra parentesi quadre.
HTML:
NB: IE: tasto ALT + numero o lettera tra parentesi + INVIO. FF: ALT + SHIFT + numero o lettera tra parentesi. Apple: componendo la combinazione del tasto CMD ("tasto mela") + numero o lettera tra parentesi.
Quindi il risultato finale del nostro semplice form sarà :
HTML:
Per approfondire:
10 useful links
A List Apart
http://www.alistapart.com/
[For people who makes websites.]
Accessibility101
http://accessibility101.org.uk/
[Accessible Website Design by Shaun Anderson.]
css Zen Garden
http://www.csszengarden.com/
[A demonstration of what can be accomplished visually through CSS-based design.]
Design Meltdown
http://www.designmeltdown.com/
[Design elements, trends, and problems in web design.]
Dexigner Design Portal
http://www.dexigner.com/
[Is the leading online information service for designers and artists.]
Good-Tutorials.com
http://www.good-tutorials.com/
[Good-Tutorials.com lists 13,180 and more Adobe Photoshop tutorials.]
Ideasonideas
http://www.ideasonideas.com/
[Is a blog that invites dialogue on issues relevant to communication designers and brand strategists]
Netdiver
http://www.netdiver.net/
[Digital culture magazine + new media design portal.]
WhatTheFont
http://www.myfonts.com/WhatTheFont/
[Upload a scanned image of the font and instantly find the closest matches.]
Will the browser apply the rule(s)?
http://centricle.com/ref/css/filters/
[Browser rules.]
