{"id":1209,"date":"2021-06-04T18:28:02","date_gmt":"2021-06-04T18:28:02","guid":{"rendered":"https:\/\/www.tuscansolutions.it\/it\/?p=1209"},"modified":"2021-06-22T10:34:33","modified_gmt":"2021-06-22T10:34:33","slug":"consigli-sito-web-accessibile","status":"publish","type":"post","link":"https:\/\/www.tuscansolutions.it\/it\/consigli-sito-web-accessibile\/","title":{"rendered":"CONSIGLI SITO WEB ACCESSIBILE"},"content":{"rendered":"<h2>3 consigli per rendere accessibile il tuo sito web<\/h2>\n<h2 id=\"inizio\" style=\"text-align: left;\" align=\"center\"><span style=\"font-size: 24px; color: blue; font-family: helvetica, arial, sans-serif;\"><b>Perch\u00e9 \u00e8 importante l\u2019accessibilit\u00e0<\/b><\/span><\/h2>\n<p align=\"left\"><span style=\"font-family: helvetica, arial, sans-serif; color: #000000; font-size: 18px;\">Immagina di essere il titolare di un\u2019attivit\u00e0, per esempio di un calzaturificio, e che un mattino bussino alla tua porta due calzolai per proporti delle loro creazioni.<br \/>\nIl primo presenta una scarpa comoda, casual, adatta a clienti di ogni genere e ogni et\u00e0.<br \/>\nIl secondo propone un modello molto elegante, ottimo per le grandi serate, una scarpa pensata per una donna tra i 18 e i 22 anni e con una corretta postura.<br \/>\nChi accoglieresti in ufficio per approfondire l\u2019argomento?<\/span><\/p>\n<p>Disporre di un sito web accessibile, un luogo virtuale privo di barriere al quale chiunque possa accedere, non \u00e8 poi cos\u00ec diverso.<a href=\"https:\/\/www.tuscansolutions.it\/it\/wp-content\/uploads\/2021\/06\/schema_sito_accessibile-300x188-1.jpeg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1213 alignright\" src=\"https:\/\/www.tuscansolutions.it\/it\/wp-content\/uploads\/2021\/06\/schema_sito_accessibile-300x188-1.jpeg\" alt=\"schema sito accessibile\" width=\"300\" height=\"188\" \/><\/a><br \/>\nCome non ti sogneresti mai di investire tempo e risorse per un prodotto rivolto a un ristretto target di pubblico, cos\u00ec non metteresti su un sito che respinga o selezioni all\u2019ingresso i visitatori, non avrebbe senso!<br \/>\nEcco dunque un primo motivo per ripensare il tuo sito web tenendo conto dei criteri di accessibilit\u00e0:<span style=\"background-color: #ffffff; padding: 1px 5px;\"> \u00e8 conveniente<\/span>. Che sia un e-commerce, un sito vetrina o un blog, perch\u00e9 sprecare tempo e fatica per un progetto che non comparir\u00e0 mai nella prima pagina delle ricerche di Google? (Sorpresa: sai cosa piace agli spider di Google? L\u2019accessibilit\u00e0!)<\/p>\n<p>&nbsp;<\/p>\n<h2 style=\"text-align: center;\" align=\"center\"><span style=\"font-size: 24px; color: blue; font-family: helvetica, arial, sans-serif;\"><b>Non solo il danaro<\/b><\/span><\/h2>\n<p align=\"left\"><span style=\"font-family: helvetica, arial, sans-serif; color: #000000; font-size: 18px;\">Ma c\u2019\u00e8 dell&#8217;altro. Le barriere architettoniche informatiche minano alla base il principio fondamentale della rete, ovvero la possibilit\u00e0 di accesso universale.<br \/>\nCi\u00f2 significa che, quando programmiamo, dobbiamo pensare anche che qualcuno potrebbe usare un browser obsoleto, qualcun altro potrebbe avere una disabilit\u00e0 che gli comporta difficolt\u00e0 visive o di altro genere, un altro ancora non disporre di una linea stabile e potente come la nostra.<br \/>\nIn sintesi, alla convenienza dobbiamo aggiungere un altro e forse pi\u00f9 nobile criterio per scegliere la via dell\u2019accessibilit\u00e0: perch\u00e9<span style=\"background-color: #ffffff; padding: 1px 5px;\"> \u00e8 giusto<\/span>.<br \/>\nA questo scopo, ecco 3 consigli e una regola d\u2019oro per rendere il tuo sito accessibile, usabile e in grado di posizionarsi al meglio sui motori di ricerca.<br \/>\nI 3 consigli sono relativi a:<\/span><\/p>\n<ol style=\"font-family: Helvetica, Arial, sans-serif; color: #000000; margin-left: 25px;\">\n<li><span style=\"font-family: Helvetica, Arial, sans-serif; color: #000000; font-size: 18px;\">i testi, che devono essere brevi e significativi;<\/span><\/li>\n<li><span style=\"font-family: Helvetica, Arial, sans-serif; color: #000000; font-size: 18px;\">il design, ordinato ed elegante;<\/span><\/li>\n<li><span style=\"font-family: Helvetica, Arial, sans-serif; color: #000000; font-size: 18px;\">alcuni piccoli accorgimenti tecnici per il codice.<\/span><\/li>\n<\/ol>\n<p align=\"left\"><span style=\"font-family: helvetica, arial, sans-serif; color: #000000; font-size: 18px;\">Ma prima&#8230;<\/span><\/p>\n<p>&nbsp;<\/p>\n<h3 align=\"center\"><span style=\"font-family: helvetica, arial, sans-serif; font-size: 20px; color: blue;\"><b>Regola d\u2019oro: l\u2019utente \u00e8 tutto<\/b><\/span><\/h3>\n<p align=\"left\"><span style=\"font-family: helvetica, arial, sans-serif; color: #000000; font-size: 18px;\">Progettare un sito <i>user-centered<\/i> non \u00e8 un\u2019opzione, ma una necessit\u00e0.<br \/>\nCon la Legge Stanca il tema dell\u2019accessibilit\u00e0 si \u00e8 imposto anche nel nostro ordinamento, riconoscendo e tutelando \u00abil diritto di ogni persona ad accedere a tutte le fonti di informazione e ai relativi servizi, ivi compresi quelli che si articolano attraverso gli strumenti informatici e telematici\u00bb (L. 4\/2004, art. 1).<br \/>\nDovremo pertanto domandarci:<\/span><\/p>\n<ul style=\"font-family: Helvetica, Arial, sans-serif; color: #000000; margin-left: 25px;\">\n<li><span style=\"font-family: Helvetica, Arial, sans-serif; color: #000000; font-size: 18px;\">Il nostro testo \u00e8 leggibile?<\/span><\/li>\n<li><span style=\"font-family: Helvetica, Arial, sans-serif; color: #000000; font-size: 18px;\">L\u2019utente avr\u00e0 difficolt\u00e0 a visualizzare\/caricare la pagina?<\/span><\/li>\n<li><span style=\"font-family: Helvetica, Arial, sans-serif; color: #000000; font-size: 18px;\">I miei contenuti possono davvero interessarlo?<\/span><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h3 style=\"text-align: center;\" align=\"center\"><span style=\"font-size: 20px; color: blue; font-family: helvetica, arial, sans-serif;\"><b>AgID e l&#8217;accessibilit\u00e0 dei servizi pubblici<\/b><\/span><\/h3>\n<p>[embedyt] https:\/\/www.youtube.com\/watch?v=FYalesEbww0[\/embedyt]<\/p>\n<h3 align=\"center\"><span style=\"font-family: helvetica, arial, sans-serif; font-size: 20px; color: blue;\"><b>1. Less is more<\/b><\/span><\/h3>\n<p align=\"left\"><span style=\"font-family: helvetica, arial, sans-serif; color: #000000; font-size: 18px;\">Sapevi che il tempo di attenzione su un sito web di un utente medio \u00e8 di circa 9 secondi (pi\u00f9 o meno come un pesce rosso)?<br \/>\nIn 9 secondi devi saper attrarre l\u2019attenzione del lettore, stimolarlo, coinvolgerlo, dargli l\u2019impressione che quel contenuto sia stato scritto appositamente per lui.<br \/>\nDunque:<\/span><\/p>\n<ul style=\"font-family: Helvetica, Arial, sans-serif; color: #000000; margin-left: 25px;\">\n<li><span style=\"font-family: Helvetica, Arial, sans-serif; color: #000000; font-size: 18px;\">sii breve, va\u2019 dritto al punto;<\/span><\/li>\n<li><span style=\"font-family: Helvetica, Arial, sans-serif; color: #000000; font-size: 18px;\">torna spesso a capo, l\u2019occhio si rilassa e la lettura \u00e8 pi\u00f9 piacevole;<\/span><\/li>\n<li><span style=\"font-family: Helvetica, Arial, sans-serif; color: #000000; font-size: 18px;\">sfrutta le keywords, cos\u00ec Google sapr\u00e0 come trovarti;<\/span><\/li>\n<li><span style=\"font-family: Helvetica, Arial, sans-serif; color: #000000; font-size: 18px;\">evidenzia i termini importanti col <i>corsivo<\/i> o col <b>grassetto<\/b>;<\/span><\/li>\n<li><span style=\"font-family: Helvetica, Arial, sans-serif; color: #000000; font-size: 18px;\">stabilisci una gerarchia tra titoli, sottotitoli e testo, e rispettala;<\/span><\/li>\n<li><span style=\"font-family: Helvetica, Arial, sans-serif; color: #000000; font-size: 18px;\">usa gli elenchi, il web li adora.<\/span><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h3 align=\"center\"><span style=\"font-family: helvetica, arial, sans-serif; color: blue; font-size: 20px;\"><b>2. Occhio al design<\/b><\/span><\/h3>\n<p align=\"left\"><span style=\"font-family: helvetica, arial, sans-serif; color: #000000; font-size: 18px;\">Saper bilanciare testo e immagini \u00e8 fondamentale per restituire una buona esperienza di lettura. Altrettanto lo \u00e8 la scelta dei colori, strutturare bene la pagina, lasciare degli spazi vuoti.<br \/>\nSei un blogger o un rivenditore di calzature? In entrambi i casi devi valorizzare i tuoi contenuti o i tuoi prodotti inserendoli nella giusta cornice. Stai allestendo una vetrina, e ci\u00f2 che esponi risalter\u00e0 se quanto gli sta intorno sapr\u00e0 valorizzarlo. <a href=\"https:\/\/www.tuscansolutions.it\/it\/wp-content\/uploads\/2021\/06\/ragazzo-in-carrozina-davanti-computer-vede-sito-accessibile-2.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1211 alignright\" src=\"https:\/\/www.tuscansolutions.it\/it\/wp-content\/uploads\/2021\/06\/ragazzo-in-carrozina-davanti-computer-vede-sito-accessibile-2.gif\" alt=\"ragazzo in carrozina davanti computer vede sito accessibile 2\" width=\"800\" height=\"600\" \/><\/a><br \/>\nSei un designer? \u00c8 il tuo lavoro, abituati&#8230;<br \/>\nVediamo cosa pu\u00f2 esserci utile:<\/span><\/p>\n<ul style=\"font-family: Helvetica, Arial, sans-serif; color: #000000; margin-left: 25px; list-style-type: disc;\">\n<li style=\"list-style-type: none;\">\n<ul style=\"font-family: Helvetica, Arial, sans-serif; color: #000000; margin-left: 25px; list-style-type: disc;\">\n<li><span style=\"font-family: Helvetica, Arial, sans-serif; color: #000000; font-size: 18px;\">nel menu, evidenza sempre la pagina del sito in cui l\u2019utente si trova (Pollicino ha bisogno del breadcrumb);<\/span><\/li>\n<li><span style=\"font-family: Helvetica, Arial, sans-serif; color: #000000; font-size: 18px;\">non cedere all\u2019<i>horror vacui<\/i> se ci sono spazi vuoti nella pagina, servono eccome;<\/span><\/li>\n<li><span style=\"font-family: Helvetica, Arial, sans-serif; color: #000000; font-size: 18px;\">usa colori adatti al tuo scopo: alcuni eccitano, altri deprimono ;<\/span><\/li>\n<li><span style=\"font-family: Helvetica, Arial, sans-serif; color: #000000; font-size: 18px;\">non usare mai pi\u00f9 di 3-4 colori;<\/span><\/li>\n<li><span style=\"font-family: helvetica, arial, sans-serif; color: #000000; font-size: 18px;\">valuta bene la contiguit\u00e0 o il contrasto tra i colori; puoi usare colori contigui nel corpo centrale della pagina per accompagnare la lettura, o contrastanti per identificare ci\u00f2 che \u00e8 cliccabile, per le call to action;<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul style=\"font-family: Helvetica, Arial, sans-serif; color: #000000; margin-left: 25px; list-style-type: disc;\">\n<li><span style=\"font-family: helvetica, arial, sans-serif; color: #000000; font-size: 18px;\">non usare pi\u00f9 di 2-3 font diversi (personalmente ne uso solo uno, al massimo alterno i pesi), e bada che siano senza grazie (sans-serif), agevoler\u00e0 la lettura;<\/span><\/li>\n<li><span style=\"font-family: helvetica, arial, sans-serif; color: #000000; font-size: 18px;\">inserisci immagini non troppo pesanti (altrimenti il caricamento sar\u00e0 lento) e coerenti con i contenuti (questa ti sembra una foto adeguata per i contenuti di questo articolo?);<\/span><\/li>\n<li><span style=\"font-family: helvetica, arial, sans-serif; color: #000000; font-size: 18px;\">evita banner, pop-up e animazioni &#8220;aggressive&#8221;.<\/span><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h3 align=\"center\"><span style=\"font-family: helvetica, arial, sans-serif; color: blue; font-size: 20px;\"><b>3. Accorgimenti tecnici per il codice<\/b><\/span><\/h3>\n<ul style=\"font-family: Helvetica, Arial, sans-serif; color: #000000; margin-left: 25px;\">\n<li><span style=\"font-family: Helvetica, Arial, sans-serif; color: #000000; font-size: 18px;\">Crea un sito web responsive inserendo i meta tag necessari nella sezione &lt;head&gt;;<\/span><\/li>\n<li><span style=\"font-family: Helvetica, Arial, sans-serif; color: #000000; font-size: 18px;\">ricorda di resettare i CSS in modo che il tuo codice sia letto allo stesso modo da tutti i browser;<\/span><\/li>\n<li><span style=\"font-family: Helvetica, Arial, sans-serif; color: #000000; font-size: 18px;\">modifica l\u2019attributo \u201clang\u201d: di default \u00e8 settato per l\u2019inglese, sostituiscilo con \u201cit\u201d;<\/span><\/li>\n<li><span style=\"font-family: Helvetica, Arial, sans-serif; color: #000000; font-size: 18px;\">inserisci una descrizione delle immagini attraverso l\u2019attributo \u201calt\u201d: in questo modo, anche qualora la pagina impiegasse tempo a caricare, l\u2019utente sapr\u00e0 cosa occupa quello spazio vuoto;<\/span><\/li>\n<li><span style=\"font-family: Helvetica, Arial, sans-serif; color: #000000; font-size: 18px;\">inserisci il \u201ctitle\u201d per i link: l\u2019utente deve sapere cosa sta cliccando;<\/span><\/li>\n<li><span style=\"font-family: Helvetica, Arial, sans-serif; color: #000000; font-size: 18px;\">sii coerente e ordinato nella composizione del testo: sfrutta h1, h2 e h3 per strutturare la pagina a partire dai contenuti;<\/span><\/li>\n<li><span style=\"font-family: Helvetica, Arial, sans-serif; color: #000000; font-size: 18px;\">quando componi un form di contatto, ricorda di usare il tag &lt;label&gt; per associare un\u2019etichetta al campo da compilare.<\/span><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h2 align=\"center\"><span style=\"font-family: helvetica, arial, sans-serif; color: blue; font-size: 24px;\"><b>Per concludere&#8230; e ripartire<\/b><\/span><\/h2>\n<p align=\"left\"><span style=\"font-family: helvetica, arial, sans-serif; color: #000000; font-size: 18px;\">Spero che questo articolo ti sia stato utile, o perlomeno di ispirazione, per comprendere l\u2019importanza del tema accessibilit\u00e0.<br \/>\nL\u2019argomento non si esaurisce certo qui, ci sarebbe ancora tanto da dire, approfondiremo l\u2019argomento.<br \/>\nVoglio lasciarti con un piccolo dono, il link alla traduzione italiana delle <a style=\"color: blue;\" title=\"Linee Guida WACG\" href=\"https:\/\/www.w3.org\/Translations\/WCAG21-it\/\"> Linee Guida WCAG sull\u2019accessibilit\u00e0<\/a>.<br \/>\nGrazie mille per la tua attenzione. Se avessi domande da sottopormi compila il form, sar\u00f2 lieto di soddisfare ogni tua curiosit\u00e0.<\/span><\/p>\n<p>&amp;nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Disporre di un sito web accessibile, un luogo virtuale privo di barriere al quale chiunque possa accedere, non \u00e8 poi cos\u00ec diverso.<br \/>\nCome non ti sogneresti mai di investire tempo e risorse per un prodotto rivolto a un ristretto target di pubblico, cos\u00ec non metteresti su un sito che respinga o selezioni all\u2019ingresso i visitatori, non avrebbe senso!<\/p>\n","protected":false},"author":1,"featured_media":1211,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","_joinchat":[],"footnotes":""},"categories":[66],"tags":[67,69,68,70],"class_list":["post-1209","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-accessibilita","tag-accessibile","tag-accessibilita","tag-sito-web","tag-wcag"],"_links":{"self":[{"href":"https:\/\/www.tuscansolutions.it\/it\/wp-json\/wp\/v2\/posts\/1209","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tuscansolutions.it\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tuscansolutions.it\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tuscansolutions.it\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tuscansolutions.it\/it\/wp-json\/wp\/v2\/comments?post=1209"}],"version-history":[{"count":0,"href":"https:\/\/www.tuscansolutions.it\/it\/wp-json\/wp\/v2\/posts\/1209\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.tuscansolutions.it\/it\/wp-json\/wp\/v2\/media\/1211"}],"wp:attachment":[{"href":"https:\/\/www.tuscansolutions.it\/it\/wp-json\/wp\/v2\/media?parent=1209"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tuscansolutions.it\/it\/wp-json\/wp\/v2\/categories?post=1209"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tuscansolutions.it\/it\/wp-json\/wp\/v2\/tags?post=1209"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}