Share
Questo principio afferma che tutto il contenuto deve essere in un formato (o disponibile su richiesta in un formato) che possa essere facilmente percepito dall'utente. Detto in altri termini, i tuoi siti web dovrebbero essere progettati in modo tale che chiunque possa 'leggere' il contenuto, indipendentemente da eventuali disabilità che potrebbero avere. Molti utenti con disabilità useranno tecnologie assistive; per esempio quelli con disabilità visive possono usare uno screen reader, che legge ciò che appare sullo schermo, o un convertitore testo-braille. L'obiettivo è quindi quello di facilitare queste tecnologie assistive.
Si prega di ricordare che le linee guida qui sono non esauriente, quindi è necessario fare sempre riferimento alle Linee guida per l'accessibilità del contenuto Web.
Questo è forse il consiglio più comune per migliorare l'accessibilità. Se il tuo sito web contiene qualunque immagini, quindi queste sono ignorate dagli screen reader salvo che usi il alt etichetta.
Nota che la descrizione di alt potrebbe non essere necessariamente una descrizione di cosa sia l'immagine, ma piuttosto di ciò che l'immagine sta cercando trasmettere. Il tag alt dice a parole quello che stai cercando di dire con l'immagine.
Sebbene questo consiglio sia per lo più adatto agli editori, lo sollevo qui perché gli sviluppatori di temi spesso forniscono un logo anziché un testo per trasmettere il nome del sito Web o dell'azienda. In questo caso, probabilmente è meglio usare il nome del sito (get_bloginfo ( 'name')) come descrizione alternativa:
eco '';
'. get_bloginfo ('nome'). '
I tag alt dovrebbero non essere utilizzato per immagini puramente decorative, altrimenti si costringe l'utente a setacciare informazioni eccessive e non necessarie.
Se il tuo plug-in crea un modulo, potresti aver bisogno di una sorta di conferma dell'accesso a una persona anziché a un computer. Se decidi di fornire all'utente un'immagine o una clip audio, che devono quindi interpretare, dovresti spiegarlo nel testo e fornire una forma alternativa di CAPTCHA per accogliere diverse disabilità.
Questa linea guida si applicherà ampiamente agli sviluppatori di plug-in, ma può anche essere applicata ai temi. Se il colore, la forma o la posizione vengono utilizzati per trasmettere un significato che non è discernibile dal testo, tale significato viene perso per gli utenti che sono daltonici o ciechi.
Ad esempio, un esempio tipico potrebbe essere rappresentato dai pulsanti del modulo di contatto che si basano esclusivamente su un'icona del famoso font Font Awesome:
Lo scopo di questi pulsanti è evidente a un utente avvistato, ma per coloro che si affidano a lettori di schermo non vi è alcuna indicazione su cosa fanno i pulsanti. Se, per motivi di progettazione, vuoi evitare di usare il testo, devi specificare l'etichetta usando il Aria-label attributo.
Questo è solo un esempio del protocollo ARIA, che tratteremo in maggior dettaglio nel prossimo articolo.
Questo è un requisito quasi ovvio. Anche per una persona ben vista, un sito web con un basso contrasto tra testo e sfondo è difficile da leggere e può causare affaticamento della vista. Per chi ha problemi di vista, è richiesto un livello ancora maggiore di contrasto, motivo per cui il WCAG afferma che lo sfondo e il colore del testo dovrebbero avere un rapporto di contrasto di 4,5: 1.
Non è immediatamente evidente quale sia il rapporto o il significato di questo rapporto, ma esistono una varietà di strumenti che consentono di verificare il rapporto:
Il testo più grande ha un requisito inferiore di 3: 1, mentre i loghi, il testo che è puramente decorativo o non visibile e il testo / i pulsanti "disattivati" non hanno requisiti di contrasto.
Sebbene la maggior parte dei temi offra ai propri utenti la possibilità di regolare i colori utilizzati sul sito Web, è opportuno assicurarsi che almeno i colori predefiniti (o le "tavolozze" disponibili) soddisfino il requisito minimo di contrasto. Più avanti in questa serie esamineremo la creazione di una funzione nel tema che avverte l'utente se sta selezionando i colori con contrasto insufficiente.
La British Dyslexia Association raccomanda di evitare gli sfondi bianchi puri per il testo e invece di utilizzare un colore biancastro, una crema o un tenue color pastello. Il ragionamento dietro questo è che la luminosità di una pagina bianca può "abbagliare" il lettore.
Per coloro che soffrono di sindrome da sensibilità scozzese (o sindrome di Irlen), un contrasto troppo elevato tra sfondo e testo può esacerbare sintomi come:
Questi sintomi rendono la lettura difficile e scomoda e possono causare affaticamento degli occhi, affaticamento degli occhi, sonnolenza e mal di testa.
In vista della sezione precedente, il miglior consiglio è quello di garantire un buon contrasto, ma non troppo contrasto. Poiché le preferenze variano da individuo a individuo, ciò che costituisce "troppo" dipenderà dal giudizio personale.
Un layout strutturato, con l'uso appropriato delle intestazioni, rende più facile per gli utenti comprendere le informazioni che vengono loro presentate. Gli utenti di screen reader si affidano in qualche modo a una struttura "sensibile" per aiutarli a orientarsi su una pagina.
Un modo rapido per testare questo è visualizzare il tema con CSS e JavaScript disabilitati. UN meglio il modo è usare Lynx che è un browser basato su testo. Se la struttura del tuo sito fa apparire il contenuto in modo disorganizzato, sarà difficile per gli utenti che utilizzano Lynx o altre tecnologie di assistenza leggere il tuo sito web. Poiché gli utenti che fanno affidamento su tali tecnologie non hanno i vantaggi che CSS e JavaScript apportano per favorire l'orientamento sulla pagina e il flusso dei contenuti, è importante che la sequenza di lettura corretta sia ovvia senza di essi.
Questo è abbastanza semplice da realizzare: assicurarsi che il markup HTML rifletta l'ordine visivo previsto. Questo è abbastanza naturale, e se trovi che il tuo sito web non legge bene senza CSS, probabilmente lo hai intenzionalmente deviato. Come regola generale, il tuo sito web dovrebbe seguire lo schema:
Questo è abbastanza facile da ottenere. Le regole sono semplici:
Accentsconagua
Una domanda che viene spesso posta è: Il titolo del mio sito dovrebbe essere all'interno di a etichetta? Le raccomandazioni del W3C indicano che mentre ci sono alcuni casi in cui questa sarebbe una cosa valida da fare, nel contesto dei temi di WordPress, probabilmente è meglio non usare tag per il titolo del sito. Ci sono un paio di motivi:
</code> etichetta. Mentre questo è spesso trascurato e un po 'brutto per gli utenti visivi, è la prima cosa letta dagli screen reader. Quindi avvolgere il titolo del sito in <code><h1></code> conferisce una prominenza ridondante agli utenti di screen reader, mentre rendere il titolo più ovvio per gli utenti vedenti può essere raggiunto senza l'uso del tag di intestazione.</li> <li>I tag di intestazione sono utilizzati per organizzare le informazioni. Il titolo del tuo sito non è particolarmente utile per questo scopo.</li> </ol><p>Indipendentemente da ciò che decidi, le intestazioni successive sulla tua pagina dovrebbero sedersi al di sotto di essa. Quindi, gli articoli in "The Loop" o i titoli delle tue pagine dovrebbero avere <code><h2></code> tag se hai usato il <code><h1></code> tag per il titolo del tuo sito, e <code><h1></code> tag altrimenti.</p><p>Dopo il contenuto del post, la maggior parte dei temi mostrerà i commenti del post. È naturale avere "commenti" come intestazione, poiché è una rottura logica dal contenuto, ma poiché è legata al contenuto del post, il livello di intestazione dovrebbe riflettere questo. La cosa più logica da fare è avere l'intestazione "Commenti" di un livello sotto il titolo del post.</p><p>Ecco un frammento di a <code>single.php</code>:</p><pre><div role="main"> <div <?php post_class(); ?>> <h1> <?php the_title(); ?> </h1> <div> <?php the_content(); ?> </div><!--.entry-content--> <?php comments_template(); ?> </div> </div></pre><p>Nel mio esempio ho usato un <code><h1></code> tag per il titolo del post, quindi il modello dei commenti (<code>comments.php</code>) potrebbe quindi assomigliare a qualcosa:</p><pre><div> <h2> <?php printf( _n( 'One Comment on %2$s', '%1$s Comments on %2$s', get_comments_number(), 'mytheme' ), number_format_i18n( get_comments_number() ), get_the_title() ); ?> </h2> // ... </div></pre><h2>Assicurati che il tuo sito risponda bene all'aumento della dimensione del testo (1.4)</h2><p>Alcuni utenti con lievi disabilità visive possono fare affidamento sull'ampliamento delle dimensioni dei caratteri piuttosto che sulle tecnologie di assistenza come le lenti di ingrandimento dello schermo. In considerazione di ciò, le linee guida WCAG specificano che il tuo sito non deve "interrompersi" quando il testo viene ingrandito fino al 200%. "Break" qui significa che il testo scompare, si scontra, trabocca dai suoi contenitori, o più in generale il layout del sito viene interrotto in modo che sia difficile o confusionario da leggere.</p><h3>Usa dimensioni font relative</h3><p>Poiché i browser moderni sono migliorati nel ridimensionamento del testo, l'utilizzo delle dimensioni relative dei caratteri non è importante come in passato (sebbene IE9 non ridimensiona le dimensioni dei caratteri definite in pixel). Indipendentemente da ciò, si consiglia comunque di utilizzare le dimensioni relative dei caratteri (percentuali, ems o rems). L'unità Rem risolve alcuni dei problemi con l'unità em e, sebbene sia stata introdotta solo con CSS3, è possibile utilizzarla in un modo compatibile con i precedenti browser. I dettagli su come implementare i relativi caratteri sono leggermente fuori portata, ma puoi saperne di più qui:</p><ul> <li>Prendendo "Erm ..." Fuori Ems</li> <li>Dimensionamento dei caratteri con REM</li> </ul><h3>Usa layout fluido</h3><p>Tuttavia, il ridimensionamento del testo può portare a problemi di layout. Il testo potrebbe essere spostato fuori dallo schermo, costringendo l'utente a scorrere, o il testo potrebbe essere cancellato dal suo contenitore, potenzialmente in altro testo, rendendo illeggibili parti della pagina web. Questo dove a <em>di risposta</em> (o fluido) il layout può aiutare. I siti "Responsive" sono progettati per adattarsi a qualsiasi dispositivo su cui vengono visualizzati; in quanto tali usano raramente pixel fissi per altezza / larghezza o dimensione del carattere. Di conseguenza, tali siti di solito si comportano bene quando vengono cambiate le dimensioni dei caratteri: il loro layout non si interrompe.</p><p>Le linee guida WCAG raccomandano non solo che il testo possa essere ingrandito fino al 200%, ma anche che il sito web possa adattarsi alle dimensioni del testo. Il web design reattivo può essere d'aiuto perché:</p><ul> <li>uno schermo ingrandito si adatta alla dimensione del viewport "più piccolo"</li> <li>gli elementi vengono spostati per eliminare lo scorrimento orizzontale</li> <li>le dimensioni non fisse impediscono la sovrapposizione o il testo tagliato</li> <li>le immagini vengono ridimensionate per adattarsi allo spazio disponibile e non si sovrappongono al testo</li> </ul><p>Tuttavia, è importante notare che la progettazione reattiva e l'accessibilità non sono la stessa cosa: sebbene possano completarsi a vicenda, alla fine hanno obiettivi diversi. Un sito reattivo non è necessariamente accessibile e viceversa.</p><h2>Utilizzare Mark-Up correttamente (1.3)</h2><h3>Utilizzare solo tabelle per rappresentare i dati</h3><p>L'uso di tabelle come aiuti in un layout di pagina è (si spera) una cosa del passato. Ci sono anche ramificazioni relative all'accessibilità per l'uso scorretto delle tabelle. Le tabelle hanno lo scopo di rappresentare dati o informazioni e in quanto tali righe e colonne hanno un significato intrinseco e gli screen reader assumono questo quando leggono i dati. </p><p>Ad esempio, uno screen reader leggerà il numero di riga e colonna prima di leggere il contenuto della cella. Poiché la posizione della cella nelle tabelle utilizzate per scopi puramente di presentazione è irrilevante, questa informazione può essere fonte di confusione, o per lo meno irritante: l'utente finale viene informato che esiste una struttura tabellare, quando in realtà non c'è.</p><h3>Uso corretto del markup della tabella</h3><p>La maggior parte degli sviluppatori di temi non avrà bisogno di produrre tabelle (e il calendario dei post WordPress è già accessibile). Tuttavia, i plugin possono visualizzare tabelle attraverso shortcode o widget. Ci sono molte cose da sapere quando si produce il markup del tavolo:</p><ul> <li>Dove possibile, mantieni le tabelle semplici. Sebbene le righe / colonne con spanning siano state markup standard per molti anni, non sono universalmente supportate dagli screen reader.</li> <li> <p>Dove appropriato, fornire un <code><caption></code> elemento nella parte superiore di una tabella, descrivendo ciò che mostra la tabella:</p> <pre><table> <caption>... </caption>... </table></pre> </li> <li>Uso <code><th></code> per tavolo <em>intestazioni</em> e <code><td></code> per <em>dati della tabella</em>. <code><th></code> le celle non dovrebbero mai essere vuote.</li> <li>Fornire uno scopo per <code><th></code> celle, che indicano se si tratta di un'intestazione di riga o colonna: <code><th scope="col"></code> o <code><th scope="row"></code>. Sebbene lo scope sia spesso determinato dallo screen reader, non fa male essere esplicito.</li> <li>Puoi usare <code><thead></code>, <code><tbody></code> e <code><tfoot></code>, ma non offrono vantaggi in termini di accessibilità.</li> <li> <p>Utilizzare il <code>titolo</code> attributo delle intestazioni per spiegare un'abbreviazione utilizzata nella cella:</p> <pre><table> <caption> Febbraio 2014 </caption> <thead> <tr> <th title="Lunedi" scope="col">M</th> <th title="martedì" scope="col">T</th> <th title="mercoledì" scope="col">W</th> <th title="giovedi" scope="col">T</th> <th title="Venerdì" scope="col">F</th> <th title="Sabato" scope="col">S</th> <th title="Domenica" scope="col">S</th> </tr> </thead>... </table></pre> </li> </ul><h3>ARIA e moduli</h3><p><em>Applicazioni Internet Rich accessibili</em> Gli attributi (ARIA) sono utili per identificare lo scopo di una particolare parte della pagina, eventuali proprietà (ad esempio l'etichettatura di un modulo obbligatorio inserito come tale) e lo stato (ad esempio l'etichettatura di un pulsante come disabilitato). L'utilizzo di questi strumenti può aiutare le tecnologie assistive a comprendere meglio il tuo sito Web e presentare così la tua pagina in modo più chiaro all'utente finale. Guarderemo ARIA nel prossimo articolo di questa serie. Più avanti nella serie, guarderemo anche al markup del modulo corretto e al feedback accessibile.</p>
<div class="rek-block">
<center>
<ins class="adsbygoogle"
style="display:inline-block;width:580px;height:400px"
data-ad-client="ca-pub-3810161443300697"
data-ad-slot="9434875811"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</center>
</div>
<div class="h-alltags">
<a href="articles/code">Codice</a>
</div>
</div>
</div>
</div>
</div>
<div class="next_posts clearfix">
<div class="n_post">
<div class="next_posts-h1 left_nh1"><a href="/articles/code/accessibility-part-3-aria.html">Accessibilità, parte 3 ARIA</a></div>
<div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_11/accessibility-part-3-aria_2.png');"></div>
</div>
<div class="n_post">
<div class="next_posts-h1 right_nh1"><a href="/articles/code/accessibility-part-1-introduction.html">Accessibilità, parte 1 Introduzione</a></div>
<div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_11/accessibility-part-1-introduction.png');"></div>
</div>
</div>
<footer>
<div class="container">
<div class="footer-langs">
<ul class="site-langs-list">
<li><a href="https://www.accentsconagua.com"><i class="flag flag-DE"></i>Deutsch</a></li>
<li><a href="https://fr.accentsconagua.com"><i class="flag flag-FR"></i>Français</a></li>
<li><a href="https://nl.accentsconagua.com"><i class="flag flag-NL"></i>Nederlands</a></li>
<li><a href="https://no.accentsconagua.com"><i class="flag flag-NO"></i>Norsk</a></li>
<li><a href="https://sv.accentsconagua.com"><i class="flag flag-SE"></i>Svenska</a></li>
<li><a href="https://it.accentsconagua.com"><i class="flag flag-IT"></i>Italiano</a></li>
<li><a href="https://es.accentsconagua.com"><i class="flag flag-ES"></i>Español</a></li>
<li><a href="https://ro.accentsconagua.com"><i class="flag flag-RO"></i>Românesc</a></li>
</ul>
</div>
<div class="h-block"><a href="/">it.accentsconagua.com</a><div class="h-block-a"></div></div>
<div class="footer-text">
Informazioni interessanti e consigli utili sulla programmazione. Sviluppo di siti web, web design e sviluppo web. Tutorial di Photoshop. Creazione di giochi per computer e applicazioni mobili. Diventa un programmatore professionista da zero.
</div>
</div>
</footer>
<div class="search">
<img class="searchico" src="//accentsconagua.com/img/search.svg" alt="">
</div>
<div class="modal">
<div class="modal-content">
<span class="close-button">×</span>
<input class="searchmain" type="text" id="search-input" placeholder="Ricerca...">
<ul class="searchli" id="results-container"></ul>
</div>
</div>
<link rel="stylesheet" href="css/flags.css">
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script>
<script>
window.addEventListener("load", function(){
window.cookieconsent.initialise({
"palette": {
"popup": {
"background": "#edeff5",
"text": "#838391"
},
"button": {
"background": "#4b81e8"
}
},
"theme": "classic",
"position": "bottom-right"
})});
</script>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script src="js/scripts.min.js"></script>
<script src="js/common.js"></script>
<link rel="stylesheet" href="css/fontawesome-all.min.css">
<script>
var modal = document.querySelector(".modal");
var trigger = document.querySelector(".search");
var closeButton = document.querySelector(".close-button");
function toggleModal() {
modal.classList.toggle("show-modal");
}
function windowOnClick(event) {
if (event.target === modal) {
toggleModal();
}
}
trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);
</script>
<script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script>
<script>
SimpleJekyllSearch({
searchInput: document.getElementById('search-input'),
resultsContainer: document.getElementById('results-container'),
json: '/search.json',
searchResultTemplate: '<li><a href="{url}">{title}</a></li>'
})
</script>
<script src="jquery.unveil2.min.js"></script>
<script>
$('img').unveil();
</script>
</body>
</html>