Criando aplicativos HTML5

Projetando a acessibilidade com o HTML5

Rajesh Lal

Baixar o código de exemplo

Se você estiver realmente interessado em atingir um público-alvo amplo, vai querer desenvolver seu site para acessibilidade. Trata-se de tornar suas páginas da Web mais fáceis de acessar, mais fáceis de usar e disponibilizá-las para todos. No geral, usando as tecnologias mais recentes fica mais fácil atingir a acessibilidade. Hoje, isso significa usar o HTML5.

Para ser acessível, seu conteúdo precisa estar disponível em uma ampla gama de dispositivos, como computadores comuns que usam teclado ou mouse, leitores de tela, navegadores de áudio, dispositivos com largura de banda limitada, navegadores e computadores antigos, bem como celulares e dispositivos sensíveis ao toque. Além disso, ele deve poder ser acessado pela diversidade mais ampla de pessoas, incluindo aquelas com deficiências e idosos, bem como pessoas com baixo nível escolar ou enfermidade temporária, ou que preferem usar apenas um teclado ou mouse.

As quatro áreas principais de deficiência que a acessibilidade procura solucionar são:

• Audição
• Mobilidade
• Cognição
• Visual

Os problemas de audição significam que um usuário pode estar inapto a ouvir sons do site. A solução é tornar o todo o conteúdo não textual perceptível usando uma alternativa de texto, como as legendas e os textos explicativos. Inclua fala transcrita e linguagem de sinais, se possível.

Os problemas de mobilidade, nesse caso, significam a incapacidade de usar o mouse ou o teclado. A solução para mobilidade na Web é tornar o conteúdo operável, isto é, tornar toda a funcionalidade acessível apenas por teclado, bem como por joysticks, reconhecimento de voz e retorno de áudio, quando possível. Permita a navegação com uso adequado de títulos e âncoras, e forneça aos usuários a capacidade de parar o conteúdo com base no tempo. Não permita nenhuma atualização automática na página.

As dificuldades cognitivas afetam o conteúdo em si, por exemplo, o tamanho do textos e das imagens ou o contraste de cores. Os gráficos ofuscantes e tipos de fonte também podem causar problemas para alguns usuários. A solução é tornar o conteúdo compreensível. Use fontes sans serif de fácil leitura e permita o redimensionamento da fonte. Use alto contraste de cores entre o segundo plano e o primeiro plano. Evite a atualização automática, imagens cintilantes e a reprodução automática de mídia e animação. Use várias dicas visuais e ícones padrão para que o conteúdo seja de fácil compreensão.

Os problemas visuais podem variar de uma incapacidade de distinguir cores à incapacidade de ver o conteúdo todo. A solução para esses problemas é tornar o conteúdo sólido para que possa ser interpretado confiavelmente pelos agentes do usuário e facilmente acessados com leitores de tela. Use HTML semântica e siga os padrões. Use HTML sintaticamente correta e valide sua página. Use o atributo lang e marcas abbr onde for possível.

Resumindo, para ser acessível, o conteúdo da Web precisa tornar-se perceptível, operável, compreensível e sólido. Juntos, esses atributos compõem o modelo POUR do W3C (World Wide Web Consortium), que decreta que as informações e os elementos da interface do usuário que são apresentados aos usuários sejam perceptíveis aos sentidos; que haja uma forma para que eles operem a interface do usuário; que eles devem poder entender as informações e como usar os elementos da interface; e que o conteúdo seja sólido o suficiente para que os usuários possam acessá-lo usando uma variedade de agentes de usuário, incluindo ATs (tecnologias assistenciais).

Agora que você entende os princípios básicos da acessibilidade, vamos analisar dois conceitos muito importantes relacionados ao design da Web acessível: aprimoramento progressivo e ARIAS (accessible rich Internet applications).

Aprimoramento progressivo e ARIA

O aprimoramento progressivo é uma abordagem para o design da Web que promove a acessibilidade usando HTML semântica, folhas de estilo e script. A ideia é criar um site onde o conteúdo básico esteja disponível a todos, enquanto a funcionalidade e o conteúdo mais avançados possam ser acessados por aqueles com mais capacidade, mais largura de banda ou ferramentas mais avançadas. Ao criar um site, primeiramente, você se concentra em exibir o conteúdo da maneira mais simples. Você projeta sua página usando HTML semanticamente estruturada. Todos os elementos de apresentação que modificam o conteúdo visual (como negrito ou itálico) entram em uma folha de estilo externa.

HTML semântica significa que as marcas HTML em uma página devem descrever o conteúdo de uma maneira que tenha a ver com seu significado, e não com sua apresentação. Qualquer informação sobre a decoração do conteúdo deve entrar em um arquivo CSS, enquanto a lógica e o comportamento do lado do cliente da página da Web devem ser adicionados por meio de JavaScript externamente vinculado depois que a página é carregada e a folha de estilo analisada e aplicada. O aprimoramento progressivo garante que, se houver um erro no arquivo JavaScript, a página ainda assim será carregada com os estilo adequados. E se o arquivo CSS for ignorado (por exemplo, pelos leitores de tela), a página HTML ainda terá todo o conteúdo. 

Todos os sistemas operacionais modernos têm suas próprias APIs de acessibilidade, e cada uma delas é um conjunto de interfaces e métodos abertos expostos pelo navegador para leitura e análise de texto. A versão da Microsoft é a MSAA (Microsoft Active Accessibility), uma parte da UIA (Automação da Interface do Usuário) para Windows, a Linux tem o IAcessible2 e a Apple conta com o Mac OS X Accessibility Protocol - mas todos eles seguem o padrão ARIA, conforme definido pelo W3C (bit.ly/OlD4lX). A Figura 1 mostra como um usuário pode interagir com uma página da Web acessível usando um dispositivo AT, como o leitor de tela. Tais dispositivos usam as APIs de acessibilidade para acessar páginas da Web.

Figura 1 Como um usuário acessa uma página da Web usando a tecnologia assistencial

O ARIA faz parte do WAI (Web Accessibility Initiative, iniciativa de acessibilidade na Web) da W3C e define uma maneira de tornar o conteúdo e os aplicativos da Web mais acessíveis. O ARIA é usado para melhorar a acessibilidade do conteúdo dinâmico e os controles avançados da interface do usuário desenvolvidos com HTML, CSS, JavaScript, AJAX e tecnologias relacionadas. Agora, o ARIA faz parte oficialmente da especificação HTML5 e também foi inserido nas bibliotecas populares do JavaScript, como JQuery, Dojo e YUI. Consulte bit.ly/b89BEJ para obter mais informações.

O ARIA usa um conjunto de funções, estados e propriedades para expor uma página da Web às APIs de acessibilidade. Essas funções, estados e propriedades são atribuídos em elementos de uma página, que são expostos às ATs. A maioria das ferramentas atuais de AT, incluindo JAWS, NVDA e VoiceOver, oferecem suporte ao ARIA. Vamos examinar o ARIA mais detalhadamente.

Funções do ARIA

As funções indicam o tipo de elemento de maneira significativa. Suponha que um leitor de tela se depare com um elemento HTML em uma página que inclua role=navigation. O leitor de tela saberá que esse elemento HTML é para navegação e o usuário poderá acessar a navegação diretamente, em vez de percorrer por todos os links.

Os atributos de função do ARIA são aplicados aos elementos HTML como este:

 

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

Aqui, "XXX" é um valor que depende do tipo do elemento HTML e sua função na página. Ele pode ter vários valores (como form, navigation, search ou article) com base no conteúdo que representa. Há três tipos de função:

• Funções de ponto de referência atuam como pontos de referência de navegação.
• As funções estruturais definem a estrutura do documento e ajudam a organizar o conteúdo.
• A funções de widget consistem em widgets autônomos de interface do usuário, bem como em widgets compostos, que são contêineres de dois ou mais widgets autônomos.

A Figura 2 mostra todos os valores de função disponíveis no ARIA. Existem oito funções de ponto de referência, 18 funções estruturais, 25 funções de widget de interface autônomo e nove funções de widget de interface do usuário composto no ARIA. Você encontrará mais informações em bit.ly/S0HUvi.

Figura 2 Valores de função no ARIA

Funções de ponto de referência	Funções estruturais		Funções de widget
			Widgets autônomos		Widgets compostos
application	article	region	alert	progressbar	combobox
banner	columnheader	row	alertdialog	radio	grid
complementary	definition	rowheader	button	scrollbar	listbox
contentinfo	directory	separator	checkbox	slider	menu
form	document	toolbar	dialog	spinbutton	menubar
main	group		gridcell	status	radiogroup
navigation	heading		link	tab	tablist
search	img		log	tabpanel	tree
	list		marquee	textbox	treegrid
	listitem		menuitem	timer
	math		menuitemcheckbox	tooltip
	note		menuitemradio	treeitem
	presentation		option

Diferentemente das funções, os estados e as propriedades do ARIA são atributos que podem ser definidos para cada elemento HTML.

Estados do ARIA

Um estado do ARIA é uma propriedade dinâmica de um elemento HTML que representa dados associados ao objeto, mas que não afeta a natureza essencial do elemento. Há dois tipos de estados do ARIA - global e widget - conforme mostrado na Figura 3. Os estados globais podem ser aplicados em qualquer elemento, independentemente de uma função ter sido aplicada ao elemento. Os estados de widget são atributos dos widgets da interface do usuário que exigem interação do usuário.

Veja a seguir o atributo oculto pelo aria:

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

Esse código ocultará o parágrafo de um leitor de tela.

Propriedades do ARIA

As propriedades do ARIA são semelhantes aos estados do ARIA, mas são relativamente estáticas na página e atuam como propriedades adicionais do elemento HTML. As propriedades widget são análogas aos estados de widget, mas o valor não se altera dentro do escopo da página. Há 11 propriedades globais e 14 propriedades widget (veja a Figure 3).

Figura 3 Estados e propriedades do ARIA

Tipo de atributo	Global	Widget
Estados do ARIA	aria-busy aria-disabled aria-grabbed aria-hidden aria-invalid	listitem math note presentation region row rowheader separator toolbar
Propriedades do ARIA	aria-atomic aria-controls aria-describedby aria-dropeffect aria-flowto aria-haspopup aria-label aria-labelledby aria-live aria-owns aria-relevant	aria-autocomplete aria-haspopup aria-label aria-level aria-multiline aria-multiselectable aria-orientation aria-readonly aria-required aria-sort aria-valuemax aria-valuemin aria-valuenow aria-valuetext

Veja um exemplo da propriedade widget exigida pelo aria:

 

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

Isso torna obrigatório um campo de entrada do formulário.

A Figura 3 resume todos os estados e as propriedades do ARIA. Visite bit.ly/OlbLeh para obter mais informações.

Agora que você já está um pouco familiarizado com o ARIA e seus estados, funções e propriedades, você poderá usá-lo para criar progressivamente um site acessível aprimorado.

Criando um site acessível

Um site comum contém vários componentes. Vamos observar como criar cada um dos componentes a seguir, não esquecendo a acessibilidade e usando o HTML5 e o ARIA:

1. Página inicial
2. Área de cabeçalho com logotipo
   • Menu de navegação
   • Elementos gráficos principais
   • Conteúdo principal
   • Blocos de informações
   • Formulário de contato
3. Página de perguntas frequentes
4. Página Sobre com vídeo

A Figura 4 mostra a estrutura básica do site que criarei.

Figura 4 Mapa do site para exemplo de site

A Figura 5 mostra o layout de uma página inicial comum de um site de produto ou serviço. Para criá-lo, primeiramente usarei o HTML5 com aprimoramento progressivo e o tornarei acessível aos dispositivos AT.

Figura 5 Layout padrão de uma página inicial

Como você pode ver, identifiquei vários elementos na página: cabeçalho, navegação, plano de ação, elementos gráficos principais, mensagem de boas-vindas com conteúdo breve, blocos de informações e rodapé.

Seguindo os princípios do aprimoramento progressivo, crio uma página sequencial HTML5 para acomodar esses elementos, usando os elementos <header>, <nav>, <figure>, <article>, <section>, <aside> e <footer>, conforme mostrado na Figura 6.

Figura 6 Página inicial HTML5

 

<!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>

Esse código tem suporte da maioria dos navegadores atuais e qualquer elemento HTML5 sem suporte é padronizado para um elemento <div>. Por exemplo, se o elemento <header> não tiver suporte, o navegador substituirá um <div>, desse modo:

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

Para permitir que ferramentas AT reconheçam os pontos de referência de navegação e as partes estruturais do documento, eu adiciono as funções a seguir a cada elemento, conforme mostrado na Figura 7:

• header role=banner
• nav role=navigation
• maincontent role=main
• section role=region
• article role=article
• aside role=complementary
• footer role=contentinfo

Figura 7 Adicionando funções

<!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>

Para aplicar estilos em todos os navegadores, a primeira etapa é transformar todos os elementos HTML5 em elementos de nível de bloco na folha de estilo, dessa forma:

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

Incluo a função do ARIA para que os estilos sejam aplicados a cada elemento específico:

<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>

Como a página HTML é analisada sequencialmente, o melhor lugar para colocar o arquivo JavaScript é na parte inferior da página, depois do cabeçalho. Isso permite que o site seja completamente independente do JavaScript - a função do JavaScript será instanciada apenas depois que o documento estiver pronto e totalmente carregado. O código a seguir mostra o arquivo de script inserido em meu exemplo:

<footer role="contentinfo"><!-- ><!-- footer -->

  <div>Copyright © 2012</div>

  <div><a href="">Política de Privacidade</div>

</footer>

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

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

</body>

</html>

Criando um formulário de contato acessível

Os formulários são uma parte integral da interação baseada na Web e o HTML5 tem vários tipos de entrada e atributos novos que auxiliam a acessibilidade. A Figura 8 lista os que se relacionam aos formulários HTML5.

Figura 8 Tipos de entrada e atributos do formulário

Tipo de entrada	input type=datetime input type=datetime-local input type=date input type=month input type=time input type=week input type=number	input type=range input type=email input type=url input type=search input type=tel input type=color
Atributos	autocomplete autofocus form formaction formenctype formmethod formnovalidate	formtarget list multiple pattern placeholder required step

Para acessibilidade, um formulário deve ser restrito a uma única finalidade. Uma página de contato deve conter apenas o formulário de contato e nenhuma outra distração. Isso facilita muito o uso de dispositivos AT pelas pessoas.

Também é importante usar o tipo de entrada adequado. Isso aprimora a UX de dispositivos que oferecem suporte a esse atributo. Por exemplo, input type=number pode mostrar um teclado numérico para dispositivos móveis enquanto input type=url exibe um botão especial ".com" no teclado virtual de muitos smartphones.

Use o atributo for em um rótulo juntamente com o atributo id no elemento de entrada, como se segue:

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

Isso mapeia o rótulo para o elemento de entrada no dispositivo assistencial. Você também pode fazer isso de maneira mais descritiva usando o atributo aria-describedby. Por exemplo, se você tiver algum texto de ajuda para cada campo de entrada, será possível fazer a conexão com o texto de entrada:

<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>

A próxima etapa é adicionar os atributos HTML5 placeholder e required (com aria-required="true"). O atributo placeholder permite mostrar a aparência da entrada válida e o atributo required torna a caixa de entrada um campo obrigatório:

<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>

Observe que placeholder não é um rótulo. E lembre-se de que se você usar um asterisco com o texto para indicar um campo obrigatório, o asterisco será lido pelos leitores de tela com cada campo, fornecendo uma UX inferior para o deficiente visual. Em vez disso, use o atributo de campo aria-required, que informa o dispositivo AT que o campo é obrigatório, e use uma cor ou imagem de plano de fundo no lugar do asterisco para indicar a obrigatoriedade ao usuário.

Também é possível adicionar o atributo autofocus, que proveitosamente define o foco para o primeiro elemento do formulário.

A Figura 9 mostra o código que cria um formulário de contato HTML5 acessível e a Figura 10 exibe o formulário de contato.

Figura 9 Criando um formulário de contato 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 A página do formulário de contato no navegador

As atualizações podem apresentar dificuldades para pessoas com deficiências, mas live regions pode tornar os dispositivos assistenciais cientes das atualizações quando você usa o atributo aria-live juntamente com os atributos de função status, log e alert:

• aria-live=“off”: as atualizações não são anunciadas (region não é live)
• aria-live=“polite”: as atualizações são anunciadas quando o usuário está ocioso
• aria-live=“assertive”: prioridade mais alta, mas as atualizações não são necessariamente anunciadas de imediato
• role=“log”, role=“status” e role=“alert” para diferentes tipos de mensagens

Veja uma maneira simples de integrar isso ao código HTML:

 

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

Agora vamos observar uma página de perguntas frequentes com conteúdo acessível.

Criando uma página de perguntas frequentes acessível com imagens

As páginas de perguntas frequentes estão entre as páginas mais visitadas de muitos sites. Sua página de perguntas frequentes pode conter texto, tabelas, links, imagens e títulos, e tudo isso deve ser acessível. Vamos ver como você pode fazer isso. Em primeiro lugar, o conteúdo HTML deve conter somente marcas HTML semântica e todos os elementos de decoração devem entrar na folha de estilo. Sendo assim, em vez de:

 

<i>italics</i>

use:

 

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

e em vez de:

<b>bold</b>

use:

 

<strong>strong</strong>

Observe que esses elementos adicionam significado ao conteúdo e são interpretados de forma diferente pelos leitores de tela. Por exemplo, alguns leitores de tela mudarão o tom do elemento <strong>, mas não de elementos <b>.

Também é importante usar adequadamente os elementos heading relacionados ao título, como <h1>, <h2> e assim por diante. O ideal é que você use um heading <h1> em uma página e vários subheadings, conforme a necessidade. Não se esqueça de colocar marcas de fechamento em cada elemento HTML. Não se esqueça de fechar todas as listas ordenadas e desordenadas corretamente. A prática padrão também sugere que você use letras minúsculas em todas as marcas e aninhe-as corretamente. A Figura 11 mostra um exemplo.

Figura 11 Marcação de uma página de perguntas frequentes

<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>

Para criar conteúdo localizado, você define o idioma da página usando o atributo lang no elemento global <html>:

<html lang="en">

Para conteúdo em um idioma diferente, use lang dentro dos elementos <p> ou <span>, dessa forma:

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

E use a marca abbr para abreviações:

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

O tamanho da fonte do seu conteúdo sempre deve ser relativo. Nunca use tamanhos fixos ou absolutos, pois isso restringe a funcionalidade de dimensionamento da fonte do navegador. Use uma das alternativas a seguir para aumentar ou diminuir o tamanho da fonte no padrão do navegador:

• porcentagem (%)
• eme (relativo ao tamanho da letra maiúscula M)
• xis (relativo ao tamanho da letra maiúscula X) 
• Palavras-chave (pequena, média, maior, menor, e assim por diante) 

Veja um exemplo:

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

A cor deve ser usada como uma ajuda visual para o conteúdo e não deve ser usada sozinha para apresentar informações. Um alto contraste de cor entre o primeiro e o segundo plano é importante para tornar a página acessível. A W3C recomenda uma taxa de contraste de 4,5 para 1 para um texto normal e 3 para 1 para textos maiores.

Para validação do formulário, os elementos de entrada individuais podem mostrar o plano de fundo como colorido para indicar um erro, que pode não ser visível a um usuário daltônico. Verifique se você tem várias dicas para a mesma informação, como um rótulo para indicar um erro.

Quando você estiver usando uma cor em uma folha de estilo, defina o elemento de cor de plano de fundo para usar uma cor complementar. Algumas pessoas podem ler mais facilmente com um plano de fundo preto, assim, permita a alteração da cor da página para um tema mais escuro. Veja um exemplo:

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

Geralmente, as tabelas padrão têm uma linha de cabeçalho e, possivelmente, uma linha de rodapé, mas diferenciá-las não é possível com marcas de tabela simples. No entanto, o HTML5 apresenta várias marcas novas e úteis:

• <caption> é o título da tabela
• <details> mostra detalhes adicionais que um usuário pode exibir ou ocultar sob demanda
• <summary> é anunciado antes que os dados da tabela real sejam lidos por um leitor de tela
• <thead> indica a linha de cabeçalho da tabela
• <tfoot> indica a linha de rodapé da tabela

A Figura 12 mostra o código de um exemplo de tabela HTML que pode ser acessada por dispositivos AT.

Figura 12 Uma tabela acessível

 

<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>

Ao criar links, evite usar links genéricos "clique aqui" e "veja mais". Use o atributo title e um texto de ancoragem significativo. Veja uma maneira correta de adicionar links:

 

<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>

Tenha cuidado ao usar símbolos ASCII. Quando você tem várias páginas, evite usar os símbolos de maior ou menor (> e <) para avançar e voltar para o próximo conjunto de itens. Em vez disso, use texto limpo, como "Próximos 10 itens" e "10 itens anteriores". Observe que pode parecer lógico usar o símbolo de maior na navegação estrutural mas, infelizmente, o leitor de tela lerá "Próximos >>" como "Próximos, maior que, maior que", o que não é nada útil. Use uma imagem de plano de fundo CSS se seu design exigir um ">".

Por fim, os links devem ser sublinhados. Isso ajuda um usuário daltônico a determinar que o texto é um link. Isso pode ser feito na folha de estilo usando decoração:

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

Para que as imagens possam ser acessadas, inicie com um atributo alt significativo e use blank alt (alt="") para imagens decorativas. Não se esqueça de incluir o atributo title - ele será mostrado como uma dica de ferramenta e será verificado pelos leitores de tela se o atributo alt não estiver disponível. Se nem o atributo alt, nem o atributo title forem encontrados, o dispositivo AT anunciará o nome da imagem. Assim, dê um nome significativo à imagem.

Use role=presentation para uma imagem ou para qualquer elemento que não seja relevante para os dispositivos AT. Se estiver incluindo mapas de imagem, use alt para cada área. Também é possível usar as marcas figure e figcaption para imagens. Procure não usar muitas imagens animadas; elas podem causar convulsões em pessoas com epilepsia.

O exemplo a seguir mostra como tornar uma imagem acessível:

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

Veja o código de um mapa de imagem:

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

A última consideração sobre a criação de conteúdo acessível é incluir palavras-chave relevantes no início dos títulos. Ter títulos concisos com palavras-chave relevantes no início ajuda os usuários com deficiência visual a passar os olhos por eles com mais rapidez.

No exemplo a seguir, a redundância das palavras "Como tornar" em cada título parece mais claro, mas um leitor de tela repetiria essas duas palavras em cada título, dificultando para os usuários passar pelo conteúdo rapidamente. Usando palavras-chave precisas e relevantes no início do título torna-o mais acessível:

<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>

Agora vamos ver rapidamente como adicionar uma página Sobre ao site acessível - que contenha áudio e vídeo. Vamos ver o que preciso para tornar os elementos de áudio e vídeo acessíveis.

Uma página Sobre acessível com áudio e vídeo

Suponha que eu queira que minha página Sobre contenha um vídeo que explique a base do meu site. As marcas <audio> e <video> no HTML5 facilitam inserir conteúdo de multimídia em uma página da Web, mas isso cria desafios relacionados ao acesso do conteúdo por pessoas que não sejam falantes nativos, surdas ou com dificuldades auditivas, cegas ou para qualquer pessoa que não tenha alto-falantes ou esteja em um ambiente barulhento. Há diretrizes específicas a serem seguidas para cada um desses desafios. Veja algumas maneiras de tornar o conteúdo de áudio e vídeo acessível:

• Inclua transcrições de texto para o áudio ou vídeo em formato HTML.
• Inclua conteúdo alternativo para navegadores que não oferecem suporte a marcas de mídia.
• Os controles devem, no mínimo, ter um botão Liga/Desliga.
• A mídia não deve ser autoiniciada; deve ser iniciada pelo usuário.
• Forneça um link para download do arquivo de mídia.
• Forneça legendas ou textos explicativos usando um track de vídeo/áudio.

Geralmente, as legendas são uma transcrição alinhada com o tempo das palavras faladas em um vídeo, o que pode ajudar os usuários a entender o conteúdo. Para usuários surdos, os textos explicativos são a melhor solução, pois eles incluem transcrições de barulhos, efeitos sonoros, música, etc., juntamente com as palavras faladas.

No momento, temos suporte para a legenda e o texto explicativo usando o elemento track juntamente com os seguintes formatos: 

• WebVTT para captura do conteúdo do vídeo
• SMPTE-TT, um formato de texto limitado por tempo para colocação de legenda
• SRT, para arquivos de legenda

Observe que o suporte de acessibilidade para vídeo ainda está em andamento, mas veja um exemplo:

 

<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>

 

Embora não haja um controle granular sobre a mídia, o HTML5 tem um atributo controls que exibe controles para o elemento media. Esses controles podem ser acessados pelo teclado:

• A barra de espaço alterna entre a reprodução e a pausa.
• As seta para a esquerda e para a direita rodam o vídeo para frente e para trás em incrementos de 5 segundos.
• CTRL+seta para a esquerda ou seta para a direita roda o vídeo para frente ou para trás em incrementos de 60 segundos.
• HOME+seta para a esquerda ou seta para a direita pula para o início ou fim do vídeo.
• Se o botão de volume tiver foco, as setas para cima e para baixo aumentam e diminuem o volume.

Suporte à acessibilidade no Visual Studio 2012

Você ficará feliz em saber que o Visual Studio 2012 facilita a acessibilidade. Agora há IntelliSense para funções, atributos e propriedades do ARIA em elementos HTML, conforme mostrado na Figura 13 e Figura 14.

Figura 13 Suporte do IntelliSense para funções do ARIA no Visual Studio 2012

Figura 14 Propriedades do ARIA têm suporte do IntelliSense

Após a criação de uma página da Web acessível, você desejará ter certeza de que ela realmente atende aos requisitos de acessibilidade. Com o Visual Studio 2012, você pode fazer isso com facilidade, bastando clicar com o botão direito do mouse em uma página e selecionar Verificar Acessibilidade, conforme mostrado na Figura 15.

Figura 15 Você pode verificar a acessibilidade de uma página da Web no Visual Studio 2012

Você então escolhe o nível de Diretrizes de Acessibilidade de Conteúdo da Web, ou WCAG, que deseja verificar: Prioridade 1 ou Prioridade 2 (consulte bit.ly/S0Nb66). Você também pode fazer verificações relacionadas à Access Board Section 508, que se refere aos padrões definidos pelo governo dos Estados Unidos em Section 508 da Rehabilitation Act (section508.gov). Depois que você seleciona as diretrizes, o Visual Studio 2012 verifica todos os elementos HTML e exibe um relatório detalhado sobre os erros e avisos na página, conforme mostrado na Figura 16.

Figura 16 Relatório de Acessibilidade do Conteúdo da Web no Visual Studio 2012

Você aprendeu como criar um site acessível usando o HTML5, além de ter visto como alguns recursos de acessibilidade do Visual Studio 2012 podem ajudar. Eles devem ser adições úteis à sua caixa de ferramentas à medida que explora a Web acessível.

Rajesh Lal trabalha na Nokia e é apaixonado pelo HTML5 e pelas tecnologias da Web. Ele escreveu vários livros sobre gadgets do Windows, widgets da Web e tecnologias móveis Web e Silverlight. Para discutir a acessibilidade no método e design de software, visite dsgnmthd.com/accessibility. Para obter informações sobre o autor, consulte iRajLal.com.

Agradecemos aos seguintes especialistas técnicos pela revisão deste artigo: Art Barstow, Lakshmi C. Chava e Dennis Lembrée