Il primo passo verso la realizzazione di siti internet
\naccessibili consiste nel comprendere in che modo debbano essere organizzati
\ni documenti da pubblicare sul Web, ovvero come strutturare e presentare le
\ninformazioni all\u2019interno delle pagine di un sito.<\/p>\n
A tal fine, \u00e8 fondamentale conoscere bene il significato dei <\/p>\n Il contenuto<\/strong> \u00e8 La struttura<\/strong> \u00e8 la La presentazione<\/strong> <\/p>\n I principi dello sviluppo accessibile dei siti web prevedono 1. definizione dei 2. scrittura del 3. presentazione dei <\/p>\n Il punto 2 \u00e8 cruciale ai fini dell\u2019accessibilit\u00e0 siti web: <\/p>\n Per ottenere questo, per\u00f2, \u00e8 fondamentale che si faccia un uso semantico<\/strong> del codice di marcatura<\/strong>.<\/p>\n Utilizzare il codice di marcatura in modo semantico Gli elementi strutturali sono riconosciuti nativamente dai browser Ai fini dell\u2019accessibilit\u00e0, \u00e8 importante, perci\u00f2, che gli <\/p>\n Sul Web sono numerosissimi i casi di utilizzo scorretto del Nel caso dei titoli, ad esempio, capita spesso di trovare Nel caso delle tabelle a scopo di impaginazione, invece, <\/p>\n In questi casi il contenuto delle pagine web risulta privo <\/p>\n Conoscere bene gli elementi strutturali del codice di <\/p>\n","protected":false},"excerpt":{"rendered":" Realizzare siti internet accessibili utilizzando in maniera appropriata gli elementi strutturali nella costruzione delle pagine web<\/p>\n","protected":false},"author":10,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"cybocfi_hide_featured_image":"","footnotes":""},"categories":[1813],"tags":[11552,11553,11551,11555,11554],"class_list":["post-3770","post","type-post","status-publish","format-standard","hentry","category-web-design","tag-accessibilita-siti-web","tag-legge-stanca","tag-siti-internet-accessibili","tag-siti-web-accessibili","tag-usabilita-accessibilita-siti-web"],"yoast_head":"\n
\nconcetti di contenuto<\/em>, struttura<\/em> e presentazione<\/em>,
\nche sono essenziali per poter lavorare in modo accessibile sugli stili grafici
\ndelle pagine web e sull\u2019organizzazione logica delle informazioni in esse
\ncontenute.<\/p>\n
\nrappresentato dalle informazioni fornite da un documento: testi, immagini,
\nsuoni, animazioni, grafici, ecc.<\/p>\n
\nrappresentazione semantica del contenuto mediante un linguaggio di marcatura
\nstrutturale (es. HTML).<\/p>\n
\n\u00e8 l\u2019insieme delle informazioni che definiscono lo stile e la formattazione dei
\ncontenuti strutturati: allineamento del testo, colore e sfondo degli elementi,
\ndimensione dei caratteri, ecc.<\/p>\n
\nche la realizzazione di un sito internet segua il seguente iter:<\/p>\n
\ncontenuti<\/strong> delle pagine;<\/p>\n
\ncodice di marcatura<\/strong> che descriva in maniera strutturata i contenuti
\neliminando qualsiasi caratteristica di presentazione, o quasi;<\/p>\n
\ndocumenti<\/strong> mediante fogli di stile CSS.<\/p>\n
\nun codice di marcatura ridotto a contenuto strutturato privo di presentazione
\nconsente una fruizione ottimale dei contenuti con browser testuali, screen
\nreader e dispositivi con schermo piccolo; permette, inoltre, di applicare al
\ndocumento un proprio foglio di stile personalizzato, in modo da ottenere una
\npresentazione accessibile, conforme alle proprie esigenze.<\/p>\n
\nsignifica descrivere i contenuti mediante gli elementi strutturali appropriati
\nprevisti dal linguaggio utilizzato (HTML, XHTML, ecc.): <h1>..<h6>
\nper i titoli, <p> per i paragrafi, <ul> o <ol> per gli
\nelenchi, <q> o <cite> per le citazioni, <abbr> per le
\nabbreviazioni, <acronym> per gli acronimi, <address> per le
\ninformazioni relative ai recapiti, e cos\u00ec via. <\/p>\n
\nanche se non vi sono fogli di stile associati; per esempio, i titoli vengono
\nrappresentati con caratteri pi\u00f9 grandi rispetto ai paragrafi, le voci di elenco
\nsono segnate con opportuni marcatori, ecc.)<\/p>\n
\nsviluppatori delle web agency applichino informazioni strutturali ai
\ncontenuti, in modo che, anche se si elimina del tutto la presentazione affidata
\nai fogli di stile, gli elementi essenziali della struttura rimangano visibili e
\ncomprensibili per il lettore.<\/p>\n
\ncodice di marcatura nei siti internet; quelli pi\u00f9 comuni riguardano l\u2019uso improprio della formattazione<\/strong> per
\nsimulare graficamente l\u2019aspetto di determinati elementi strutturali, come
\nintestazioni (titoli e sottotoli), liste (elenchi puntati e numerati),
\ncitazioni, e nell\u2019uso improprio di
\ntabelle a scopo di impaginazione<\/strong>.<\/p>\n
\nsiti web in cui le intestazioni sono realizzate mediante semplici paragrafi
\nformattati in grassetto e con una dimensione maggiore dei caratteri;
\nvisivamente si ottiene \u201cl\u2019effetto titolo\u201d ma semanticamente restano paragrafi e
\nci\u00f2 si pu\u00f2 notare disabilitando i fogli di stile. Per i titoli andrebbero invece
\nutilizzati i tag di intestazione h1, h2, h3, h4, h4, h5 e h6, rispettando le
\nopportune gerarchie secondo cui un titolo di livello inferiore deve essere
\npreceduto necessariamente da uno di livello superiore.<\/p>\n
\nviene snaturato il ruolo per il quale le tabelle sono state create, ovvero
\nimpaginare i dati tabellari. I layout dei siti internet andrebbero realizzati
\nsenza l\u2019uso tabelle (layout tableless<\/em>),
\nricorrendo ai giusti marcatori per i contenitori, ovvero i tag <div>, ed
\nalle informazioni di stile, come float<\/em>
\ne position<\/em>, per disporli sullo
\nschermo in maniera opportuna.<\/p>\n
\ndi struttura logica e di semantica e diviene di fatto inaccessibile<\/strong> a tutti quegli utenti che non navigano in modalit\u00e0
\ngrafica, facendo uso, ad esempio, di browser testuali, di screen reader o di
\naltre tecnologie assistive.<\/p>\n
\nmarcatura che si utilizza e farne un uso semantico diviene, quindi, un
\npresupposto indispensabile per realizzare siti internet accessibili, moderni e
\ndi qualit\u00e0, il cui contenuto sia davvero usabile da tutti e correttamente
\ninterpretato da qualsiasi browser o tecnologia.<\/p>\n