Acessibilidade para Web

15 Março, 2018
João Bosco Junior.

1. Tipos de Deficiências.
2. Diretrizes.
3. Soluções.
4. Referências.

1. Deficiências.
1. Visual parcial.
2. Visual total.
3. Auditiva.
4. Motora.
5. Intelectual.

Visual Parcial
Qualquer pessoa que tenha dificuldade de
enxergar ou necessitam do auxílio de
lentes de aumento, lupas, óculos, etc.
Também se encaixam nesse grupo,
pessoas que tenham daltonismo.
Deficiências.

Visual Total
Pessoas próximas a cegueira ou aquelas
que já estão com a vista comprometida.
Precisam do auxílio de sistemas ledores
para utilizar um computador.
Deficiências.

Auditiva.
Dependem de legendas para entender o
conteúdo do áudio. Pode ser necessário
ativar a legenda de um arquivo áudio;
concentrar muito para ler o que está na
página, ou depender de imagens
suplementares para entender o contexto
do conteúdo. Também podem necessitar
de ajuste no volume do áudio para
aqueles que ainda não são
completamente surdos.
Deficiências.

Motora.
Pessoas com pouca mobilidade ou que
necessitam de ferramentas auxiliares
para utilizar um computador. Podem ser
pessoas que tiveram algum membro
amputado, como também tetraplégicos.
Deficiências.

Intelectual.
pessoa que apresenta dificuldades no seu
funcionamento mental e no desempenho
de algumas tarefas que envolvem a
comunicação, os cuidados pessoais e o
relacionamento social. A deficiência
intelectual faz com que a pessoa
apresente mais demora em seu
aprendizado e no desenvolvimento.
Deficiências.

Diretrizes.
As Diretrizes de Acessibilidade para Conteúdo Web (WCAG) 2.0 abrangem um vasto
conjunto de recomendações que têm como objetivo tornar o conteúdo Web mais
acessível.
O cumprimento destas diretrizes fará com que o conteúdo se torne acessível a um maior
número de pessoas com incapacidades, incluindo cegueira e baixa visão, surdez e baixa
audição, dificuldades de aprendizagem, limitações cognitivas, limitações de movimentos,
incapacidade de fala, fotossensibilidade bem como as que tenham uma combinação
destas limitações. Seguir estas diretrizes fará também com que o conteúdo Web se torne
mais usável aos utilizadores em geral.
WCAG.

Modelo de Acessibilidade em Governo Eletrônico.
As recomendações do eMAG permitem que a implementação da acessibilidade digital seja
conduzida de forma padronizada, de fácil implementação, coerente com as necessidades
brasileiras e em conformidade com os padrões internacionais.
É importante ressaltar que o eMAG trata de uma versão especializada do documento
internacional WCAG (Web Content Accessibility Guidelines: Recomendações de
Acessibilidade para Conteúdo Web) voltado para o governo brasileiro, porém o eMAG não
exclui qualquer boa prática de acessibilidade do WCAG.
eMAG.
Diretrizes.

1. Navegação simplificada.
2. Opção de textos para multimídia.
3. Opção de áudio para vídeo que não contenha áudio.
4. Textos com clareza de informação.
5. Imagens e Ícones de fácil entendimento.
6. Uso adequado de cores.
7. Opções de leitura em alto contraste.
Conteúdo e Interface
Soluções.

1. Uso adequado do WAI-ARIA e web semântica.
2. Facilidade de navegação por teclado.
3. Possibilidade de alteração do contraste.
4. Formulários com fácil preenchimento e correta identificação
de elementos.
5. Imagens com textos alternativos.
6. Tamanhos de textos relativos.
7. Validação de código por ferramentas auxiliares.
Código
Soluções.

Sempre é incentivado o uso de elementos HTML nativos, porque eles fornece foco,
suporte a teclado e semântica incorporada, mas há momentos em que o HTML nativo não
dão conta do trabalho.
A especificação dos Aplicativos Ricos Acessíveis de Internet da Iniciativa para
Acessibilidade da Web (WAI-ARIA, ou apenas ARIA) é uma soluções para problemas
que não podem ser resolvidos com HTML nativo.
No HTML esse recurso é representado pelos seguintes atributos:
Role e Aria-x.
WAI-ARIA
WAI-ARIA.

<li tabindex="0" class="checkbox" role="checkbox" checked aria-checked="true">
Receive promotional offers
</li>
O role serve para definir a semântica/princípio, já o aria-x trata do comportamento do elemento. Por
essa razão o aria-x também é conhecido como status/properties.
Qual a diferença entre Role e Aria-x?
Entenda melhor em: https://www.w3.org/TR/html-aria/#rules-wd
WAI-ARIA.

Role
Lista completa: https://www.w3.org/TR/wai-aria-practices-1.1/
WAI-ARIA.

Landmarks (Navegação por Role)
As regiões Landmark são usadas como alvos para "ignorar links" e por extensões de navegador
para melhorar a navegação do teclado. A ideia é criar um mapa de navegação baseada em roles
principais.
No link abaixo está uma tabela contendo a relação completa do uso dos landmarks:
https://www.w3.org/TR/wai-aria-practices-1.1/#landmark-roles
WAI-ARIA.

Exemplo de Landmarks:
<ul>
<li><a href="#box-viagem" accesskey="1" title="Acesse diretamente o conteúdo do site">Ir para o
conteúdo [1]</a></li>
<li><a href="#menu" accesskey="2" title="Acesse diretamente o menu do site">Ir para o menu
[2]</a></li>
<li><a href="#footer" accesskey="3" title="Acesse diretamente o rodapé do site">Ir para o rodapé
[3]</a></li>
</ul>
WAI-ARIA.

Todos os Landmarks
HTML5 Element Default Landmark Role
aside complementary
footer contentinfo when in context of the body element
header banner when in context of the body element
main main
nav navigation
section region when it has an accessible name using aria-labelledby or aria-label
** Lembrando sempre em usar as roles em minúsculo.
WAI-ARIA.

Status/Properties ou apenas aria-x
• aria-atomic
• aria-busy (state)
• aria-controls
• aria-current (state) - (new)
• aria-describedby
• aria-details - (new)
• aria-disabled (state)
• aria-dropeffect
• aria-errormessage - (new)
• aria-flowto
• aria-grabbed (state)
• aria-haspopup
• aria-hidden (state)
• aria-invalid (state)
• aria-keyshortcuts - (new)
• aria-label
• aria-labelledby
• aria-live
• aria-owns
• aria-relevant
• aria-roledescription- (new)
(…)
Lista completa em: https://www.w3.org/TR/html-aria/
WAI-ARIA.

Serve para adicionar rótulo extra e texto de descrição que sejam expostos somente a
APIs de tecnologia assistiva.
<button aria-label="screen reader only label"></button>
aria-label
WAI-ARIA.

ARIA pode expressar relações semânticas entre elementos que ampliam a conexão
padrão pai/filho, como uma barra de rolagem personalizada que controla uma região
específica.
aria-controls
<div role="scrollbar" aria-controls="main"></div>
<div id="main">
. . .
</div>
WAI-ARIA.

E ARIA pode tornar partes da página "vivas", para que informem imediatamente à
tecnologia assistiva quando mudarem.
aria-live
<div aria-live="true">
<span>GOOG: $400</span>
</div>
WAI-ARIA.

Uso de role em conjunto com aria-*
<li tabindex="0" class="checkbox" checked>
</li>
Visualmente é uma caixa de checkbox bem resolvida, porém como garantimos a acessibilidade?
<li tabindex="0" class="checkbox" role="checkbox" checked aria-checked="true">
</li>
Aqui, adicionamos os atributos role e aria-checked para identificar explicitamente o elemento
como uma caixa de seleção e para especificar que ela é marcada por padrão.
WAI-ARIA.

Tabindex.
O atributo global tabindex indica se um elemento pode receber foco de entrada (se ele é focável),
se e em qual posição ele deve fazer parte da navegação sequencial do teclado (geralmente com
a tecla Tab, daí seu nome). Ele aceita valores inteiros, com diferentes resultados dependendo do
valor:
• um valor negativo (geralmente tabindex="-1") significa que o elemento deve ser focável, mas
que não deve ser localizado pela navegação sequencial do teclado;
• tabindex="0" significa que o elemento deve ser focável e que pode ser localizado pela
navegação sequencial do teclado, mas a sua posição será definida pela ordem no código-fonte
do documento;
• um valor positivo significa que o elemento deve ser focável e que pode ser localizado pela
navegação sequencial do teclado, e a sua posição definida pelo valor do número. Sendo assim,
tabindex="4" seria focado antes de tabindex="5", mas depois de tabindex="3". Se vários
elementos possuírem o mesmo valor positivo de tabindex, a sua posição na ordenação será
definida pela sua posição no código-fonte do documento.

Alto Contraste.
O Alto contraste é uma configuração que auxilia pessoas com dificuldades a
enxergar e ler com mais nitidez os conteúdos da página da web.
A diretriz do WCAG 2.0 sugere um contraste mínimo de 4.5:1. Já para texto ampliado
e imagens compostas por texto ampliado o mínimo sugerido é 3:1.
Um ótimo site para entender como é feito o cálculo:
http://www.linhadecodigo.com.br/artigo/932/analisador-de-contraste-de-cores.aspx

Esse é o cara da combinação do conjunto de atributos “for” e “id”, relacionando de forma
clara o seu rótulo, indicando ao usuário o elemento de entrada de dados a ser editado,
deixar de fazer esse relacionamento entre “for” e “id” certamente vai deixar o usuário
confuso, e não é uma coisa difícil de fazer, veja o exemplo abaixo;
Label
Formulários.
<label for="nome">Nome</label>
<input type="text" id="nome">
**Atualmente não precisa mais envolver a label no input.

O elemento fieldset é responsável por agrupar itens no formulário que tenham
características em comum e sempre dentro do elemento form.
O elemento legend é utilizado em conjunto com o fieldset e deve estar dentro do mesmo,
fazendo dessa forma o melhor entendimento do usuário e toda vezes que um elemento for
anunciado será precedido o elemento legend.
Fieldset e Legend
Formulários.
<form>
<fieldset>
<legend>Formulário de contato</legend>
</fieldset>
</form>

O elemento optgroup é utilizado
juntamente com o select, o
optgroup é a mesma ideia do
fieldset e legend dando título e
agrupando itens do elemento select
quando tem necessidade. Cada
optgroup recebe um “label” que
será o título do grupo, veja o
exemplo:
Optgroup
Formulários.
<form>
<label for="lista">Lista</label>
<select id="lista">
<optgroup label="Diretoria">
<option>Maria</option>
<option>José</option>
<option>João</option>
</optgroup>
<optgroup label="Comercial">
<option>Pedro</option>
<option>Antonio</option>
<option>Manoel</option>
</optgroup>
</select>
</form>

<h1>Formulário de contato</h1>
<h2>Entre em contato que teremos o imenso prazer em responder sua mensagem.</h2>
<label for="nome">Nome</label>
<input type="text" id="nome">
<label for="email">E-mail</label>
<input type="email" id="email">
<label class="label label-primary" for="telefone">Telefone</label>
<input type="tel" id="telefone" class="form-control" maxlength="11">
<label for="departamento">Escolha um departamento</label>
<select id="departamento">
<option>Selecione</option>
<option>Atendimento</option>
<option>Comercial</option>
<option>Elogios</option>
<option>Reclamações</option>
</select>
<label for="mensagem">Mensagem</label>
<textarea id="mensagem"></textarea>
Exemplo1:

<fieldset>
<legend>Cartão de crédito</legend>
<div class="form-group">
<label for="numero-cartao">Número - CVV</label>
<input type="text" class="form-control" id="numero-cartao" name="numero-cartao">
</div>
<label for="bandeira-cartao">Bandeira</label>
<select name="bandeira-cartao" id=“bandeira-cartao">
<option value="master">MasterCard</option>
<option value="visa">VISA</option>
<option value="amex">American Express</option>
</select>
</div>
<label for="validade-cartao">Validade</label>
<input type="month" class="form-control" id="validade-cartao" name="validade-cartao">
</div>
</fieldset>
Exemplo2:

Quer um exemplo?
Imagine uma foto que você tirou enquanto passeava pelo Rio de Janeiro. A foto é
composta pela areia branquinha da praia, as ondas no canto e o Cristo Redentor ao fundo.
Nome: “DSC98761” ou “Férias Rio”
Alt: “Praia do Rio de Janeiro com o Cristo Redentor de fundo”.
Imagens com textos alternativos.
O que é de lei?

• Tamanho de Fonte em Porcentagem (font-size: %)
• Tamanho de Fonte usando em (font-size: em)
• Tamanho de Fonte usando rem (font-size: rem)
Tamanhos de textos relativos.
O que é de lei?

WCAG-Validator
Validando o site.
https://www.npmjs.com/package/wcag https://www.npmjs.com/package/wcag-validator
1. Instalar os pacotes
2. Registrar no site https://achecker.ca/checker/index.php e copiar o ID do usuário
3. Em seguida rodar um dos comandos:
wcag wikipedia.org —id=userid
wcag-validator http://www.amazon.com --id=userid > file.html

Achecker
1. Acessar o site: achecker.ca/checker/index.php
2. Colocar o endereço do site a ser validado.
3. E verificar o relatório.
Validando o site.

AccessMonitor
1. Acessar o site: http://www.acessibilidade.gov.pt/accessmonitor/?cD03MDUzNzI,&wcag20
Validando o site.

Check My Colours
1. Acessar o site: http://www.checkmycolours.com/
Validando o site.

Referências.
• http://www.acessibilidade.net/web/
• http://www.acessibilidadelegal.com/
• https://www.w3.org/TR/html-aria/
• https://www.w3.org/WAI/WCAG20/quickref/
• https://www.w3.org/TR/wai-aria-practices-1.1/
• https://www.w3.org/TR/html-aria/
• http://www.linhadecodigo.com.br/artigo/932/analisador-de-contraste-de-cores.aspx
• https://developer.mozilla.org/pt-BR/docs/Web/HTML/Global_attributes/tabindex
• https://developers.google.com/web/fundamentals/accessibility/semantics-aria/
• https://brasil.uxdesign.cc/acessibilidade-obrigado-por-acompanhar-a19babecea4e

15 Março, 2018
Acessibilidade.

Acessibilidade para Web

Mais conteúdo relacionado

Mais procurados

Semelhante a Acessibilidade para Web

Acessibilidade para Web