Il presente articolo è stato tradotto automaticamente.

Creazione di applicazioni HTML5

Progettazione dell'accessibilità con HTML5

Rajesh Lal

Scarica il codice di esempio

Se siete veramente interessati a raggiungere un pubblico più vasto, si vorrà progettare il vostro sito Web per l'accessibilità.L'accessibilità è su come rendere le pagine Web più facile accesso, più facile da usare e alla portata di tutti.In generale, utilizzando le ultime tecnologie facilita l'accessibilità compire.Oggi, ciò significa che utilizzando HTML5.

Per essere accessibile, il contenuto deve essere disponibile su un'ampia gamma di dispositivi, come computer ordinario utilizzando una tastiera o mouse, screen reader, browser audio, dispositivi con larghezza di banda limitata, vecchio browser e computer e telefoni cellulari e dispositivi.Inoltre, deve essere raggiungibile con la più ampia varietà di persone, compresi quelli con disabilità e anziani, così come le persone con livelli di bassa alfabetizzazione o malattia temporanea, o chi preferisce usare solo una tastiera o un mouse.

Le quattro aree chiave Accessibilità disabili cerca di indirizzo sono:

• Audizione
• Mobilità
• Cognitiva
• Visual

Udito problemi significa un utente può non essere in grado di sentire alcun suono sul sito Web.La soluzione è quella di rendere i contenuti percepibili utilizzando un testo alternativo per tutto il contenuto non testuale, come sub­titoli e didascalie.Includono il discorso trascritto e lingue dei segni, se possibile.

Problemi di mobilità significano in questo caso l'impossibilità di utilizzare il mouse o la tastiera.La soluzione per la mobilità sul Web è quello di rendere il contenuto operabile; che è, per rendere tutte le funzionalità accessibili da tastiera da solo, così come con il joystick, voce feedback audio e di riconoscimento, quando possibile.Consentire la navigazione con l'uso corretto delle voci e ancore e dare agli utenti la possibilità di bloccare contenuti basati sul tempo.Non consentire qualsiasi auto-refresh della pagina.

Difficoltà cognitive impatto contenuto, ad esempio con la dimensione del testo e immagini o con contrasto di colore.Tipi di font e grafica appariscenti possono anche causare problemi per alcuni utenti.La soluzione è di rendere comprensibile il contenuto.Utilizzare caratteri sans serif facile da leggere e consentire il ridimensionamento dei caratteri.Utilizzare colore alto contrasto tra primo piano e sfondo.Evitare l'aggiornamento automatico, immagini tremolanti e gioco di auto di media e di animazione.Utilizzare molteplici segnali visivi ed icone standard per rendere i contenuti facili da afferrare.

Problemi visivi possono variare da un'incapacità di distinguere i colori di nessuna capacità di vedere il contenuto a tutti.La soluzione per questi problemi è quello di rendere il contenuto robusto che può essere interpretata in modo affidabile dagli agenti utente e facilmente accessibile con i lettori di schermo.Utilizzare HTML semantico e seguire gli standard.Utilizzare HTML sintatticamente corretto e convalidare la tua pagina.Utilizzare il tag attributo e abbr lang laddove applicabile.

In breve, per essere accessibile, deve essere effettuata percepibile, operabile, comprensibile e robusto contenuto per il Web.Insieme, questi attributi comprendono il modello POUR World Wide Web Consortium (W3C), che impone che le informazioni e gli elementi dell'interfaccia utente viene presentati agli utenti devono essere percepibili a loro sensi; che ci deve essere un modo per loro di operare l'interfaccia utente; che devono essere in grado di capire le informazioni e come utilizzare gli elementi di interfaccia; e che il contenuto sia abbastanza robusto così possono accedere utilizzando una varietà di agenti utente, comprese le tecnologie assistive (ATs).

Ora che avete capito i principi fondamentali dell'accessibilità, diamo un'occhiata a due concetti molto importanti relativi a accessibile Web disegno: miglioramento progressivo e accessibile rich Internet applications (ARIAs).

Progressive Enhancement e ARIA

Progressive enhancement è un approccio alla progettazione Web che promuove l'accessibilità utilizzando HTML semantico, i fogli di stile e script.L'idea è di creare un sito Web dove il contenuto di base è disponibile a tutti mentre il contenuto e le funzionalità più avanzate sono accessibili a coloro che hanno più capacità, più larghezza di banda o gli strumenti più avanzati.Quando si crea un sito, si concentra in primo luogo sulla visualizzazione del contenuto nella maniera più semplice.È possibile progettare la vostra pagina utilizzando HTML semanticamente strutturato.Tutti gli elementi di presentazione che modificano il contenuto visivo (come grassetto o corsivo) Vai in un foglio di stile esterno.

HTML semantico significa che i tag HTML in una pagina devono descrivere il contenuto in un modo che ha a che fare con il suo significato piuttosto che la sua presentazione.Tutte le informazioni circa la decorazione del contenuto dovrebbero andare in un file CSS, mentre la logica e il comportamento lato client della pagina Web deve essere aggiunto tramite JavaScript esternamente collegato dopo la pagina viene caricata e il foglio di stile analizzata e applicata.Progressive enhancement assicura che se c'è un errore nel file JavaScript, la pagina ancora carichi con stili corretto.E se il file CSS viene ignorato (ad esempio, dai lettori di schermo), la pagina HTML ha ancora tutto il contenuto.

Tutti i sistemi operativi moderni hanno loro propria accessibilità API, ognuna delle quali è un insieme di metodi aperti e le interfacce esposte dal browser per la lettura e l'analisi di testo.La versione di Microsoft è Microsoft Active Accessibility (MSAA), una parte di UI Automation (UIA) per Windows; Linux ha IAccessible2; e Apple si basa sul protocollo di accessibilità di Mac OS X — ma tutti seguono lo standard ARIA come definito dal W3C (bit.ly/OlD4lX).Figura 1 Mostra come un utente potrebbe interagire con una pagina Web accessibile utilizzando un dispositivo AT come uno screen reader.Tali dispositivi utilizzano l'accessibilità API per accedere alle pagine Web.

Figura 1 come un utente accede una pagina Web utilizzando Assistive Technology

ARIA è parte del W3C Web Accessibility Initiative (WAI), e definisce un modo per rendere il contenuto Web e più accessibile di applicazioni Web.ARIA è utilizzato per migliorare l'accessibilità dei contenuti e avanzati interfaccia utente controlli dinamici sviluppato con HTML, CSS, JavaScript, AJAX e tecnologie correlate.ARIA è ora ufficialmente parte della specifica HTML5 ed è incorporato anche in popolari librerie JavaScript come JQuery, Dojo e YUI.Vedi bit.ly/b89BEJ per ulteriori informazioni.

ARIA utilizza un insieme di ruoli, gli Stati e le proprietà per esporre una pagina Web per l'accessibilità API.Questi ruoli, gli Stati e le proprietà vengono assegnate su elementi di una pagina, che sono esposti per l'ATs.Più attuali strumenti — tra cui JAWS, NVDA e VoiceOver — supportano ARIA.Let's take a prendere uno sguardo più attento all'ARIA.

Ruoli ARIA

Ruoli indicano il tipo di elemento in modo significativo.Supponiamo che un lettore di schermo si imbatte in un elemento HTML su una pagina che include il ruolo = navigazione.Lo screen reader saprà che questo elemento HTML è per la navigazione e l'utente sarà in grado di accedere a navigazione direttamente invece di tabulazione attraverso tutti i collegamenti.

Gli attributi di ruolo ARIA vengono applicati agli elementi HTML come questo:

    <div role="XXX"> </div>

Qui "XXX" è un valore che dipende dal tipo di elemento HTML e il suo ruolo nella pagina. Si può prendere un certo numero di valori — ad esempio un form, navigazione, ricerca o articolo — basato sul contenuto rappresenta. Ci sono tre tipi di ruoli:

• Ruoli Landmark agiscono come punti di riferimento alla navigazione.
• Ruoli strutturali definiscono la struttura del documento e organizzare il contenuto.
• Widget ruoli consistono di widget UI autonomo così come widget composito che sono contenitori di due o più widget standalone.

Figura 2 Mostra tutti i valori di ruolo disponibili nell'ARIA. Ci sono otto ruoli landmark, 18 ruoli strutturali, 25 stand-alone interfaccia widget ruoli e nove ruoli compositi UI widget in ARIA. Troverete ulteriori informazioni al bit.ly/S0HUvi.

Figura 2 valori ARIA ruolo

A differenza di ruoli, proprietà e stati ARIA sono gli attributi che possono essere impostati per ogni elemento HTML.

ARIA Stati

Uno stato ARIA è una proprietà dinamica di un elemento HTML che rappresenta i dati associati con l'oggetto, ma non pregiudica la natura essenziale dell'elemento. Ci sono due tipi di stati ARIA — globale e widget — come mostrato Figura 3. Stati globali possono essere applicati a qualsiasi elemento indipendentemente dal fatto se un ruolo è stato applicato all'elemento. Widget Stati sono attributi del widget dell'interfaccia utente che richiedono l'interazione dell'utente.

Di seguito viene illustrato l'attributo nascosto di aria:

    <div aria-hidden="true">
      <p>Paragraph text here </p>
    </div>

Questo codice nasconde il paragrafo da un lettore di schermo.

Proprietà ARIA

Proprietà ARIA sono simili agli Stati ARIA ma sono relativamente statiche della pagina e fungono da ulteriori proprietà dell'elemento HTML. Proprietà widget sono analoghi agli Stati di widget, ma il valore non cambia nell'ambito della pagina. Ci sono 11 globale e le proprietà 14 widget (vedi Figura 3).

Figura 3 ARIA gli Stati e le proprietà

Tipo attributo	Generale	Widget
ARIA Stati	aria-occupato aria-disabili aria-afferrato aria-nascosto aria-non valido	ListItem matematica note Presentazione area riga RowHeader separator barra degli strumenti
Proprietà ARIA	aria-atomic aria-controlli aria-describedby aria-Function aria-flowto aria-haspopup aria-etichetta aria-labelledby aria-live aria-proprietaria aria-pertinenti	aria-completamento automatico aria-haspopup aria-etichetta aria-livello aria-multiline aria-multiselectable aria-orientamento aria-readonly aria necessaria aria-ordinamento aria-valuemax aria-valuemin aria-valuenow aria-valuetext

Ecco un esempio della proprietà widget aria necessaria:

    <label for="username">User name:</label>
    <input id="username" type="text" aria-required="true">

Questo rende il campo di input di un form richiesto.

Figura 3 riassume tutti gli Stati ARIA e proprietà. Visita bit.ly/OlbLeh per ulteriori informazioni.

Ora che hai dimestichezza con ARIA e suoi ruoli, proprietà e Stati, sarete in grado di utilizzarlo per creare un sito accessibile progressivamente migliorato.

Creazione di un sito Web accessibile

Un tipico sito Web contiene un numero di componenti. Diamo un'occhiata a come creare ciascuno dei seguenti, mantenendo l'accessibilità in mente e utilizzando HTML5 e ARIA:

1. Homepage
2. Area di intestazione con logo
   • Menu di navigazione
   • Grafica principale
   • Contenuto principale
   • Blocchi di informazioni
   • Modulo di contatto
3. Pagina delle FAQ
4. Sulla pagina con il video

Figura 4 Mostra la struttura di base del sito creerò.

Figura 4 Sitemap per esempio del sito Web

Figura 5 viene mostrato un layout homepage tipico per un prodotto o servizio-sito basato su. Per crearlo, io prima di usare HTML5 con miglioramento progressivo e poi renderlo accessibile a dispositivi.

Figura 5 Layout Standard per una Homepage

Come potete vedere, io ho identificato un certo numero di elementi nella pagina: intestazione, navigazione, call to action, grafica principale, messaggio di benvenuto con breve contenuto, blocchi di informazioni e di piè di pagina.

Seguendo i principi del miglioramento progressivo, creare una pagina HTML5 sequenza per accogliere questi elementi, utilizzando gli elementi <header>, <nav>, <figure>, <article>, <section>, <aside> e <footer>, come mostrato Figura 6.

Figura 6 HTML5 Homepage

    <!doctype html>
    <html lang="en">
    <head><title>HTML5 Home Page</title></head>
    <body>
      <header><!-- header -->
      <a href="/"><img src="images/logo.png"></a>
      </header>
    <nav><!-- navigation -->
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/contact">Contact</a></li>
      <li><a href="/faq">FAQ</a></li>
      <li><a href="/about">About</a></li>
    </ul>
    </nav>
    <div><!-- main content -->
    <section>
      <figure><img src="images/maingraphics.png">
      <figcaption>Welcome image.
    More help on image<a href="#/">Help</a></figcaption>
      </figure>
    </section>
    <section>
      <h2><a href="Action" target="_blank">Subscribe</a></h2>
      <article>
      <h2>Welcome!</h2>
      <p><strong>Lorem Ipsum </strong>is simply dummy text of the printing and … </p>
      </article>
    </section>
    </div>
    <aside><!-- info blocks -->
      <h4>Promotion</h4><ul><li>items</li></ul>
      <h4>Awards</h4><ul><li>items</li></ul>
      <h4>News</h4><ul><li>items</li></ul>
    </aside>
    <footer><!-- footer -->
      <div>Copyright © 2012</div>
      <div><a href="">Privacy Policy</div>
    </footer>
    </body>
    </html>

Questo codice è supportato nei browser più recenti, e qualsiasi elemento di HTML5 non è supportato il valore predefinito è un <div> elemento. Ad esempio, se il <header> elemento non è supportato, il browser potrebbe sostituire un <div>, in questo modo:

    <header><!-- header -->
    <a href="/"><img src="images/logo.png"></a>
    </header>
    <div><!-- header -->
    <a href="/"><img src="images/logo.png"></a>
    </div>

Per consentire a strumenti per riconoscere i punti di riferimento alla navigazione e parti strutturali del documento, aggiungere i seguenti ruoli per ciascun elemento, come illustrato nel Figura 7:

• ruolo di intestazione = banner
• ruolo di NAV = navigazione
• ruolo MainContent = principale
• ruolo sezione = regione
• ruolo articolo = articolo
• ruolo da parte = complementari
• ruolo di piè di pagina = contentinfo

Figura 7 aggiunta di ruoli

    <!doctype html>
    <html lang="en">
    <head><title> Accessible HTML5 Home Page</title></head>
    <body>
      <header role="banner"><!-- header -->
      <a href="/"><img src="images/logo.png"></a>
      </header>
    <nav role="navigation"><!-- navigation -->
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/contact">Contact</a></li>
      <li><a href="/faq">FAQ</a></li>
      <li><a href="/about">About</a></li>
     </ul>
    </nav>
    <div id="maincontent" role="main"><!-- main content -->
    <section>
     <figure><img src="images/maingraphics.png">
     <figcaption>Welcome image.
    More help on image<a href="#/">Help</a></figcaption>
     </figure>
    </section>
    <section role="region">
      <h2><a href="Action" target="_blank">Subscribe</a></h2>
      <article role="article">
      <h2>Welcome!</h2>
      <p><strong>Lorem Ipsum </strong>is simply dummy text of the printing and … </p>
      </article>
    </section>
    </div>
    <aside role="complementary"><!-- info blocks -->
      <h4>Promotion</h4><ul><li>items</li></ul>
      <h4>Awards</h4><ul><li>items</li></ul>
      <h4>News</h4><ul><li>items</li></ul>
    </aside>
    <footer role="contentinfo"><!-- footer -->
      <div>Copyright © 2012</div>
      <div><a href="">Privacy Policy</div>
    </footer>
    </body>
    </html>

Per applicare gli stili per tutti i browser, il primo passo è quello di rendere tutti gli elementi di livello blocco elementi HTML5 nel foglio di stile, come questo:

    <style>
    header,footer,nav,article,aside,section,figure,figcaption{display:block;}
    </style>

Includere i ruoli ARIA così gli stili vengono applicati per ogni particolare elemento:

    <style>
      header[role="banner"]{/* Styles for banner */}
      header{/* Styles for other headers */}
      #maincontent[role="main"]{ /* Styles for main content */}
      nav[role="navigation"]{/* Styles for navigation */}
      section[role="group"]{/* Styles for section */}
      article[role="article"]{/* Styles for article */}
      aside[role="complementary"]{/* Styles for info blocks */}
      footer[role="contentinfo"]{/* Styles */}
    </style>

Perché la pagina HTML viene analizzata in modo sequenziale, il posto migliore per mettere il file JavaScript è nella parte inferiore della pagina, dopo il piè di pagina. Questo lascia il sito di essere completamente indipendente di JavaScript, Java­funzione di Script viene creata un'istanza solo dopo che il documento è completamente caricato e pronto. Nell'esempio di codice riportato di seguito viene illustrato il file script inserito nel mio esempio:

< ruolo di piè di pagina = "contentinfo" ><!-><!---> piè di pagina

<div> Copyright © 2012 </div>

<div> < a href = "" > Informativa sulla privacy </div>

</footer>

< script type = "text/javascript" src="jQuery.min.js" >< / script >

< script type = "text/javascript" src="Main.js" >< / script >

</body>

</html>

Creazione di un modulo di contatto accessibile

Le forme sono parte integrante di interazione Web-based, e HTML5 ha un numero di nuovi tipi di input e gli attributi che aiuti l'accessibilità. Figura 8 elenca quelli correlati a forme di HTML5.

Attributi e tipi di Input del modulo figura 8

Tipo di ingresso	input type = datetime input type = datetime locale input type = Data input type = mese input type = tempo input type = settimana input type = numero	input type = gamma input type = e-mail input type = url input type = search input type = tel input type = colore
Attributi	completamento automatico autofocus form formaction formenctype FormMethod formnovalidate	formtarget list multiplo pattern segnaposto required passo

Per l'accessibilità, una forma dovrebbe essere limitata a un unico scopo. Una pagina di contatto dovrebbe contenere solo il modulo di contatto e nessuna altra distrazione. Questo rende molto più facile per le persone che utilizzano i dispositivi.

Inoltre è importante utilizzare il tipo di input corretto. Questo migliora la UX per i dispositivi che supportano tale attributo. Ad esempio, input type = numero può mostrare un tastierino numerico per dispositivi mobili mentre input type = url consente di visualizzare una speciale ". com" pulsante in tastiera virtuale di molti smartphone.

Si utilizza l'attributo in un'etichetta insieme con l'id dell'attributo nell'elemento input, come segue:

    <label for="useremail">Your E-mail:</label>
    <input id="useremail" name="useremail" type="email" value=""/>

Questo associa l'etichetta all'elemento input nel dispositivo di assistenza. Si potrebbe anche fare questo in modo più descrittivo, utilizzando l'attributo aria-describedby. Ad esempio, se hai qualche testo di aiuto per ogni campo di input, è possibile collegare e con il testo di input:

    <label for="useremail">Your E-mail:</label>
    <input id="useremail" type="email" value="" aria-describedby="helpemail"/>
    <p id="helpemail">Your email address will be used for further communication</p>

Il passo successivo è l'aggiunta del segnaposto e HTML5 attributi obbligatori (con aria-richieste = "true"). L'attributo placeholder permette di mostrare quali input valido assomiglia e l'attributo richiesto rende la casella di input un campo obbligatorio:

    <label for="useremail">Your E-mail:</label>
    <input id="useremail" type="email" placeholder="john@msn.com" required
    aria-required="true" value="" aria-describedby="helpemail"/>
    <p id="helpemail">Your email address will be used for further communication</p>

Si noti che segnaposto non è un'etichetta. E tieni presente che se si utilizza un asterisco con il testo per indicare un campo obbligatorio, l'asterisco viene letto dai lettori di schermo con ogni campo, fornendo un povero UX per i non vedenti. Invece, utilizzare l'attributo campo aria necessaria, che racconta il dispositivo AT che il campo è obbligatorio, e utilizzare un colore di sfondo o immagine anziché l'asterisco per indicare che per l'utente.

È inoltre possibile aggiungere l'attributo autofocus, che utilmente imposta lo stato attivo al primo elemento del form.

Figura 9 illustrato il codice che crea un modulo di contatto di HTML5 accessibile e Figura 10 viene visualizzato il modulo di contatto.

Figura 9 creazione di un modulo di contatto di HTML5

    <div id="contact" role="main"><!-- main content -->
      <!-- content -->
        <section id="content">
          <article>
            <h2>Contact <span>Form</span></h2>
            <form id="contacts-form" action="" method="post">
              <fieldset>
                <div class="field">
                  <label for="name" >Name </label>
                  <input id="name" placeholder="John Smith" autofocus required
                    aria-required="true" type="text" value="" />
                </div>
                <div class="field">
                  <label for="email">E-mail</label>
                  <input id="email" placeholder="john@msn.com" type="email" required
                    aria-required="true" value=""/>
                </div>
                <div class="field">
                  <label for="website">Website</label>
                  <input id="website" placeholder="http://website.com"
                    type="url" />
                </div>
                <div class="field">
                  <label for="message">Message</label>
                  <textarea id="message"
                    placeholder="Write your message Here!" required
                    aria-required="true" ></textarea>
                </div>
                <div><a href="#" onclick="submit()">Send Your Message!</a></div>
              </fieldset>
            </form>
          </article>
        </section>
    </div>

Figura 10 la pagina del modulo di contatto nel Browser

Aggiornamenti possono essere difficili per le persone con disabilità, ma regioni dal vivo possono fare dispositivi assistive consapevoli degli aggiornamenti quando si utilizza l'attributo aria-vivere insieme agli attributi di ruolo dello stato, log e avvisi:

• aria-live = "off": gli aggiornamenti non sono annunciati (la regione non è in diretta)
• aria-live = "educato": gli aggiornamenti sono annunciati quando l'utente è inattivo
• aria-live = "assertiva": priorità più alta, ma gli aggiornamenti non sono necessariamente annunciato immediatamente
• ruolo = "log", ruolo = "status" e ruolo = "alert" per diversi tipi di messaggi

Ecco un modo semplice per integrare questo nel codice HTML:

    <div id="liveregion" role="log" aria-live="polite">

Ora diamo un'occhiata a una pagina di FAQ con contenuti accessibili.

Creazione di una pagina di FAQ accessibile con immagini

Pagine delle FAQ sono tra le pagine di molti siti Web più visitate. Le FAQ possono contenere testo, tabelle, link, immagini e titoli, e tutti questi devono essere accessibili. Vediamo come è possibile eseguire questa operazione. In primo luogo, il contenuto HTML dovrebbe contenere tag HTML solo semantico e qualsiasi decorazione elementi dovrebbero andare nel foglio di stile. Così, invece di:

    <i>italics</i>

si utilizza:

    <em>emphasized</em>
      <cite>citation</cite>

e invece di:

    <b>bold</b>

si utilizza:

    <strong>strong</strong>

Si noti che questi elementi aggiungere significato al contenuto e vengono interpretati in modo diverso dai lettori di schermo. Per esempio, alcuni lettori di schermo cambierà il tono per la <strong> elemento ma non per <b> elementi.

Inoltre è importante utilizzare correttamente gli elementi correlati a titolo intestazione come <h1>, <h2> e così via. Idealmente, si dovrebbe utilizzare uno <h1> voce in una pagina e sottovoci multiple come richiesto. Assicurarsi di che avere tag per ogni elemento HTML di chiusura. Inoltre, assicurarsi di chiudere tutti gli elenchi di ordinato e Unordered correttamente. Pratica standard suggerisce anche voi minuscolo tutti i tag e nidificarli correttamente. Figura 11 dà un esempio.

Figura 11 Markup di una pagina di FAQ

    <h1>FAQ</h1>
      <h2>List of frequently asked questions</h2>
        <ul>
        <li><a href="#q1">Accessible Text</a></li>
        <li><a href="#q2">Accessible Tables</a></li>
        <li><a href="#q3">Accessible Links</a></li>
        <li><a href="#q4">Accessible Images</a></li>
        <li><a href="#q5">Accessible Titles</a></li>
        </ul>
      <h2 id="q1">Accessible Text</h2>
        <h3>Semantic HTML</h3>
        <h3>Proper hierarchy</h3>
        <h3>Localized content</h3>
        <h3>Acronym</h3>
        <h3>Font-size</h3>
        <h3>Color</h3>
      <h2 id="q2">Accessible Table</h2>
      <h2 id="q3">Accessible Links</h2>
      <h2 id="q4">Accessible Images</h2>
      <h2 id="q5">Accessible Titles</h2>

Per creare contenuti localizzati, impostare la lingua della pagina utilizzando l'attributo lang in global <html> elemento:

    <html lang="en">

Per il contenuto in una lingua diversa, utilizzare lang all'interno <p> o <span> elementi, come questo:

    <p><span lang="la">Carpe diem </span>(seize the day)</p>

E utilizzare il tag abbr per le abbreviazioni:

    <p>The <abbr title="World Wide Web Consortium">W3C</abbr> was founded in 1994.</p>

La dimensione del carattere del vostro contenuto deve essere sempre relativa. Non utilizzare mai dimensioni assolute o fissi, quanto questo limita la funzionalità di ridimensionamento dei caratteri del browser. Per aumentare o diminuire la dimensione del font di default del browser, utilizzare uno dei seguenti:

• percentuale (%)
• em (rispetto alle dimensioni della capitale M)
• ex (rispetto alle dimensioni della capitale X)
• Parole chiavi (piccole, medie, grandi, piccoli, grandi e così via)

Ecco un esempio:

    font-size:100%;
      line-height:1.125em;

Colore dovrebbe essere usato come un aiuto visivo per il contenuto e non deve essere usato da solo per la presentazione di infor­mazioni. Un contrasto di colore alto tra primo piano e sfondo è importanta rendere la pagina accessibile. Il W3C raccomanda un rapporto di contrasto di 4.5 a 1 per il testo normale e 3 a 1 per il testo più grande.

Per la convalida, singoli elementi input possono mostrare lo sfondo colorato per indicare un errore, che potrebbe non essere visibile a un utente daltonico. Assicurarsi di che avere molteplici spunti per le stesse informazioni, ad esempio un'etichetta per indicare un errore.

Quando si utilizza un colore in un foglio di stile, impostare l'elemento di colore di sfondo da utilizzare un colore complementare. Alcune persone possono leggere più facilmente con uno sfondo nero, quindi Consenti cambiamento di colore della pagina a un tema più scuro. Ecco un esempio:

    body {
      font-family:Arial, Helvetica, sans-serif;
      font-size:100%;
      line-height:1.125em;
      background-color:#212222;
      color:#242424;
    }

Tabelle standard hanno generalmente una riga di intestazione e possibilmente una riga del piè di pagina, ma distinguendo questi non è possibile con i tag di tabella semplice. HTML5, tuttavia, porta una serie di utili nuovi tag:

• <caption> è il titolo della tabella
• <details> Mostra dettagli aggiuntivi, un utente può visualizzare o nascondere su richiesta
• <summary> viene annunciato prima che i dati della tabella reale viene letta da un lettore di schermo
• <thead> indica la riga di intestazione della tabella
• <tfoot> indica la riga del piè di pagina tabella

Figura 12 illustrato il codice per un esempio di tabella HTML che è accessibile ai dispositivi.

Figura 12 una tabella accessibile

    <h4>Table with Caption, Summary and Details</h4>
    <table>
      <caption>
        <strong>Lorem Ipsum.</strong>
        <details>
          <summary>Help</summary>
          <p><strong>Lorem Ipsum </strong>is simply dummy text of the printing and </p>
         </details>
      </caption>
      <thead>
        <tr>
          <th>Table header column 1</th>
          <th>Table header column 2</th>
          <th>Table header column 3</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <td>Table footer column 1</td>
          <td>Table footer column 2</td>
          <td>Table footer column 3</td>
        </tr>
      </tfoot>
      <tbody>
        <tr>
          <td>Table data column 1</td>
          <td>Table data column 2</td>
          <td>Table data column 3</td>
        </tr>
      </tbody>
    </table>

Durante la creazione di collegamenti, evitare l'utilizzo generico "Clicca qui" e "vedere di più" link. Utilizzare l'attributo titolo e il testo di ancoraggio significativo. Ecco un modo corretto per aggiungere i link:

    <p>Designandmethod.com has an article on accessibility.
    See the <a title="click for more information at the Design & Method Web site" href="http://designandmethod.com">Big picture at Design and Method</a></p>

Attenzione sull'utilizzo di simboli ASCII. Quando si dispone di più pagine, evitare di utilizzare il maggiore-più e meno-più simboli (> e <) per andare avanti e indietro per il successivo set di elementi. Utilizzare invece il testo in chiaro, come ad esempio "Next 10 elementi" e "Precedente 10 elementi." Nota che potrebbe sembrare logico utilizzare il maggiore-di simbolo nella struttura di spostamento ma, purtroppo, lo screen reader leggerà "successivo >>" come "Successivo, maggiore di, maggiore di," che non è utile. Utilizzare un'immagine di sfondo CSS se il vostro design richiede una ">."

Infine, il link deve essere sottolineato. Questo aiuta un utente daltonico per determinare che il testo è un link. È possibile farlo nel foglio di stile utilizzando la decorazione:

    {
      text-decoration: underline;
      display:block;
      border-bottom:1px solid #000;
    }

Per rendere accessibili le immagini, iniziare con un attributo alt significativo e utilizzare un vuoto alt (alt = "") per immagini decorative. Assicurarsi di includere l'attributo titolo — esso si presenta come un punta di tool ed è controllato dai lettori di schermo, se l'attributo alt non è disponibile. Se vengono trovati gli attributi alt né il titolo, il dispositivo a annunciare il nome dell'immagine, quindi assicuratevi di dare l'immagine di un nome significativo.

Ruolo di uso = presentazione per un'immagine o per qualsiasi elemento che non è pertinente ai dispositivi. Se si stanno includendo mappe immagine, utilizzare alt per ogni zona. È inoltre possibile utilizzare i tag di figura e figcaption per le immagini. Tenere le immagini animate al minimo; per le persone con epilessia possono causare crisi epilettiche.

Nell'esempio seguente viene illustrato come rendere accessibile un'immagine:

    <figure><img src="images/maingraphics.png" alt="Example screen shot" title="main graphics showing screenshot example"><figcaption>Image with caption.</figcaption></figure>

Ecco il codice per una mappa immagine:

    <area shape=rect coords=0,0,10,10 href="example.htm" alt="example">

L'ultimo punto sulla creazione di contenuto accessibile è quello di includere parole chiave pertinenti all'inizio dei titoli. Avendo titoli concisi con parole chiave pertinenti presso l'aiuta inizio gli utenti non vedenti scremare attraverso di essi più velocemente.

Nell'esempio seguente, avendo ridondante "Come fare" in ogni titolo sembra più leggibile, ma un lettore di schermo sarebbe ripetere quelle prime tre parole per ogni titolo, rendendo difficile per gli utenti di scremare rapidamente il contenuto. Utilizzando parole chiave pertinenti e precise all'inizio del titolo lo rende più accessibile:

    <a href="#q1"><!--How to make content Accessible-->Accessible Content</a>
    <a href="#q2"><!--How to make links Accessible-->Accessible Links</a>
    <a href="#q3"><!--How to make images Accessible-->Accessible Image</a>
    <a href="#q4"><!--How to make titles Accessible-->Accessible Titles</a>

Ora diamo un rapido sguardo all'aggiunta di una pagina di informazioni per il sito Web accessibile — uno che contiene audio e video. Vediamo che cosa ho bisogno per rendere accessibili gli elementi audio e video.

Un accessibile sulla pagina con Audio e Video

Supponiamo che voglio mia pagina circa per contenere un video che spiega il fondatore del mio sito Web. Il <audio> e <video> Tags: HTML5 rendono facile incorporare contenuto multimediale in una pagina Web, ma così facendo crea sfide per quanto riguarda l'accesso a contenuti per coloro che sono non-madrelingua, non udenti o con problemi di udito, cieco, o per chi può avere rotto gli altoparlanti o essere in un ambiente ad alta voce. Esistono specifiche linee guida da seguire per ciascuna di queste sfide. Qui ci sono alcuni modi per rendere accessibile i contenuti audio e video:

• Comprendono le trascrizioni di testo per l'audio o il video in formato HTML.
• Includere contenuto alternativo per i browser che non supportano il tag media.
• Controlli dovrebbero, come minimo, avere un pulsante On/Off.
• Media dovrebbe non avvio automatico ma deve essere avviata dall'utente.
• Fornire un link per scaricare il file multimediale.
• Fornire didascalie (didascalie o sottotitoli) utilizzando una pista audio/video.

I sottotitoli sono in genere una trascrizione allineato a tempo le parole pronunciate in un video, che possono aiutare gli utenti a capire il contenuto. Per gli utenti sordi, le didascalie sono una soluzione migliore perché includere trascrizioni di rumori, effetti sonori, musica e simili, insieme a parole pronunciate.

Adesso abbiamo didascalia e supporto utilizzando l'elemento traccia insieme con i seguenti formati di sottotitoli:

• WebVTT per le didascalie contenuti video
• SMPTE-TT, un formato di testo temporizzato per i sottotitoli
• SRT, per i file dei sottotitoli

Si noti che supportano l'accessibilità per video è ancora un work in progress, ma ecco un esempio:

    <video controls>
    <source src="video-file.mp4" type="video/mp4"/>
    <track src="en.vtt" kind="subtitles" srclang="en"
    label="English p subtitles" default/>
    <track src="en.ttml" kind="captions" srclang="en"
    label="English p captions" default/>
    </video>

Anche se non c'è un controllo granulare su media, HTML5 ha un attributo di controlli che visualizza i controlli per l'elemento multimediale.Questi controlli sono accessibili da tastiera:

• La barra spaziatrice si alterna tra riproduzione e pausa.
• Le frecce sinistra e destra del vento il video avanti e indietro di 5 secondi.
• CTRL + freccia sinistra o freccia destra venti il video avanti o indietro di 60 secondi.
• HOME + freccia sinistra o freccia destra salta all'inizio o alla fine del video.
• Se il pulsante del volume ha lo stato attivo, l'alto e verso il basso le frecce aumentano e diminuiscono il volume.

Supporto di accesso facilitato in Visual Studio 2012

Sarete felici di sapere che Visual Studio 2012 facilita l'accessibilità.C'è ora IntelliSense per ARIA ruoli, gli attributi e le proprietà di elementi HTML, come illustrato nel Figura 13 e Figura 14.

Figura 13 il supporto IntelliSense per ruoli ARIA in Visual Studio 2012

Figura 14 ARIA proprietà sono supportate in IntelliSense

Dopo aver creato una pagina Web accessibile, ti consigliamo di verificare che effettivamente soddisfa i requisiti di accessibilità.Con Visual Studio 2012, si può fare così facilmente con il tasto destro su una pagina e selezionando Verifica accessibilità, come mostrato Figura 15.

Nella figura 15 si può verificare l'accessibilità di un Web Page in Visual Studio 2012

Scegliete quindi il livello Web Content Accessibility Guidelines, o WCAG, che si desidera controllare contro: Priorità 1 o 2 priorità (vedi bit.ly/S0Nb66).È inoltre possibile controllare contro Access Board sezione 508, che si riferisce agli standard definiti dal governo degli Stati Uniti nella sezione 508 del Rehabilitation Act (section508.gov).Una volta che avete selezionato le linee guida, Visual Studio 2012 controlla tutti gli elementi HTML e visualizza un rapporto dettagliato su eventuali errori o avvisi nella pagina, come mostrato Figura 16.

Figura 16 Web Content Accessibility Report in Visual Studio 2012

Ora che hai imparato come creare un sito Web accessibile utilizzando HTML5, e hai visto come possono aiutare alcune caratteristiche di accessibilità di Visual Studio 2012.Questi dovrebbero essere utili aggiunte alla casella degli strumenti mentre esplori il Web accessibile.

Rajesh Lal lavora a Nokia ed è appassionato di tecnologie HTML5 e Web. Ha scritto più libri su Windows Gadget, widget Web, le tecnologie mobile Web e Silverlight. Per discutere di accessibilità nella progettazione del software e il metodo, visitare dsgnmthd.com/accessibility. Per informazioni sull'autore, check out iRajLal.com.

Grazie ai seguenti esperti tecnici per la revisione di questo articolo: Arte Barstow, C. LedesmaChava e Dennis Lembrée