<!DOCTYPE html>
<html lang="it">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>3AST - Esempio di pagina non accessibile</title>
<style>
/* Menu di navigazione principale nel sito */
#cssmenu {
margin: 0 auto;
padding: 10px;
width:1000px;
}
#cssmenu:before {
content: '';
display: block;
}
#cssmenu:after {
content: '';
display: table;
clear: both;
}
#cssmenu ul {
list-style-type: none;
position: relative;
display: block;
font-size: 12px;
font-family: Verdana, Helvetica, Arial, sans-serif;
margin: 0 auto;
padding: 0;
border-bottom: 1px solid #7ab900;
width: 800px;
}
#cssmenu ul:before {
content: '';
display: block;
}
#cssmenu ul:after {
content: '';
display: table;
clear: both;
}
#cssmenu li {
display: inline;
float: left;
margin: 0;
padding: 0;
}
#cssmenu li a {
float: left;
color: Green;
text-decoration: none;
height: 24px;
padding: 9px 15px 0;
font-weight: normal;
}
#cssmenu li:hover {
text-decoration: none;
border-bottom: 2px solid #CBD8AF;
}
#cssmenu .active {
text-decoration: none;
border-bottom: 2px solid #7ab900;
background-color:gold;
}
#cssmenu .active a {
color: DarkGreen;
font-weight: 700;
}
.titolo {
color:#FF6600;
font-weight: bold;
font-size:19px;
height:20px;
}
table,td {
border: thin solid;
}
table {
border-collapse: collapse;
}
/* Elemento principale della pagina (la classe probabilmente può essere eliminata)*/
.principale {
width:950px;
margin: 0 auto;
padding: 10px;
}
#principale {
width:950px;
margin: 0 auto;
padding: 10px;
}
h1 {text-align: center}
h2 {text-align: center}
body
{
background-color: #FAFAE6;
}
/* Colori */
.verde {
color: green;
}
.rosso {
color: red;
}
.grigio {
color:#666666;
}
.center
{
text-align:center;
}
.blu {color: #0000FF}
/* Sfondo */
.sfondo
{
background-color:#C5FAF4;
}
.sfondogrigio
{
background-color:#CCCCCC;
}
</style>
<body>
<p style="text-align:center"><a href="http://www.classiperlo.altervista.org/index.php"><img src="files/banner.jpg" width="933" height="203" alt="banner"></a></p>
<div id="cssmenu" style="text-align:center">
<ul>
<li><a href="http://www.classiperlo.altervista.org/index.php">Home</a></li>
<li><a href="http://www.classiperlo.altervista.org/link.php">Link</a></li>
<li><a href="http://www.classiperlo.altervista.org/download/download.php">Download</a></li>
<li><a href="http://www.classiperlo.altervista.org/upload/upload.php">Carica</a></li>
<li><a href="http://www.classiperlo.altervista.org/regole/index.php">Regole</a></li>
<li><a href="http://www.classiperlo.altervista.org/tutorials.php">Box</a></li>
<li class="last"><a href="http://www.classiperlo.altervista.org/contatto.html">Contattami</a></li>
</ul>
</div>
<div class="principale">
<div class="principale">
<h1 class="rosso">ACCESSIBILITA'</h1>
<p style="text-align:center" class="rosso">(versione non accessibile - versione <a href="http://www.classiperlo.altervista.org/Materiale/3ast/didattica/EL4-1_3ST/Accessibile.html">accessibile</a>) </p>
<table style="margin: 0 auto; width: 70%">
<tbody><tr>
<td><strong>Nome del validatore </strong></td>
<td><strong>Descrizione e scopo </strong> </td></tr>
<tr>
<td><a href="https://html5.validator.nu/" target="_blank">Nu Validator</a></td>
<td>Non valida l'accessibilità, ma la correttezza sintattica dell'HTML. Tuttavia una pagina non corretta sintatticamente, non può neppure essere accessibile.</td>
</tr>
<tr>
<td><a href="https://achecker.ca/checker/index.php" target="_blank">ACherker</a></td>
<td>Validatore di accessibilità online. </td>
</tr>
<tr>
<td><a href="https://www.powermapper.com/products/desktop/try/" target="_blank">PowerMapper</a></td>
<td>Ottimo validatore di un intero sito. La versione gratuita esamina solo poche pagine (max 10), ma può essere usato sulla pagina singola. </td>
</tr>
<tr>
<td><a href="https://chrome.google.com/webstore/detail/color-contrast-analyzer/dagdlcijhfbmgkjokkjicnnfimlebcll" target="_blank">Color Contrast Analyzer </a></td>
<td>Una estensione da installare nel browser Chrome. Permette di individuare le zone della pagina con contrasto di colori insufficiente </td>
</tr>
<tr>
<td><a href="https://leaverou.github.io/contrast-ratio/" target="_blank">Contrast Ratio</a></td>
<td>Misura il rapporto di contrasto fra colore di primo piano e colore di sfondo </td>
</tr>
<tr>
<td><a href="http://www.classiperlo.altervista.org/File%20comuni/pixie.zip" target="_blank">Pixie</a></td>
<td>Un piccolo contagocce portable per misurare il codice di un colore sullo schermo </td>
</tr>
</tbody></table>
<p style="text-align:center"><img src="files/accessibile.jpg" alt="tavola periodica con malattie." width="842" height="129"></p>
<div id="strumenti">
<div class="titolo">Attributo lang</div>
<p>La pagina deve dichiarare il linguaggio in cui è stata scritta, attraverso l'attributo lang, usato per esempio sull'elemento <html lang="it">. Questa informazione è fondamentale per gli screen reader, che altrimenti non potrebbero leggere correttamente il contenuto della pagina. </p>
<p>Se nella pagina ci sono parti scritte in linguaggi diversi, ogni parte deve dichiarare il proprio lang (<a href="http://www.programmiamo.altervista.org/HTML/access/access8.html" target="_blank">maggiori informazioni</a>).</p>
<div class="titolo">Testo alternativo</div>
<p>Ogni elemento visivo deve fornire un testo alternativo che ne descriva il contenuto e/o le funzioni. Per quanto riguarda le immagini, questo di solito viene fatto con l'attributo alt (obbligatorio in HTML 5) o con l'attributo longdesc, che consente di allegare all'immagine un file con una descrizione dettagliata (<a href="http://www.programmiamo.altervista.org/HTML/access/access9.html" target="_blank">maggiori informazioni</a>). </p>
<p>Attualmente gli elementi <audio> e <video> non forniscono attributi per un testo alternativo (che può comunque essere incluso all'interno dell'elemento o mediante sottotitoli o su un file linkato). </p>
<div class="titolo">Contrasto cromatico</div>
<p>Il rapporto di contrasto misura la differenza di contrasto fra lo sfondo e il primo piano. Senza voler entrare qui nei dettagli, tale rapporto può essere espresso con un numero che assume valori compresi fra 1 (contrasto minimo) e 21 (contrasto massimo). Il valore minimo (1) si ha quando non c'è differenza fra il colore di sfondo e quello di primo piano; il contrasto massimo corrisponde invece alla combinazione bianco e nero (spesso si tende ad evitare o a ridurre l'uso di tale combinazione di colori poiché risulta stressante per gli occhi). Vedi <a href="http://www.programmiamo.altervista.org/HTML/access/access4.html" target="_blank">maggiori informazioni</a>. </p>
<div class="titolo">Tabelle</div>
<p>Le informazioni in formato tabellare sono particolarmente difficili da comprendere per chi ha problemi visivi. A tale scopo una tabella accessibile deve prevedere almeno una didascalia riassuntiva (caption, eventualmente nascosta) e un'indicazione delle intestazioni di riga e/o colonna tramite l'elemento th e l'attributo scope (<a href="http://www.programmiamo.altervista.org/HTML/tabelle/tab6.html" target="_blank">maggiori informazioni</a>). </p>
<div class="titolo">Salta al contenuto principale</div>
<p>Allo scopo di rendere più accessibile la pagina, è una buona regola mettere sempre in cima alla pagina un link interno che permetta di saltare direttamente al contenuto principale. Il link può essere eventualmente nascosto ai browser visivi. </p>
</div>
</div>
</div>
</body></html>