Índice (2)
Índice (3)
Índice (4)
Motivação
- Desde o dia 8 de fevereiro de 2013 que todos os sites que disponibilizam informação ou serviços online são obrigados a cumprir, respetivamente, os níveis A e AA das WCAG 2.0 - conjugação da lei que estabelece a adoção de normas abertas (lei n.º 36/2011) e do RNID (RCM n.º91/2012).
Definição de Acessibilidade
- Acessibilidade
- diz respeito ao meio e aos recursos que potenciam as competências de quem os utiliza, reduzindo o efeito de barreiras existentes.
Número de utilizadores com deficiência
- As pessoas com deficiências fazem parte do maior grupo minoritário do Mundo.
- Atualmente estima-se que 10% da população mundial tem algum tipo de deficiência.
- Este número tem tendência a subir à medida que a população vai envelhecendo.
- Em países com uma esperança média de vida superior a 70 anos, as pessoas vivem aproximadamente 11.5% da sua vida com algum tipo de deficiência.
Alguns tipos de deficiência
- Motora
- Visão (cegueira, baixa visão, daltonismo, etc.)
- Audição
- Cognitivas
- Etc.
A acessibilidade como uma ferramenta
- Preocupações com a acessibilidade tendem a melhorar a qualidade do software e respetivos conteúdos.
- No entanto, ao resolver os problemas de acessibilidade para alguns utilizadores não se devem criar problemas para os restantes.
- Podem ser fornecidas funcionalidades adicionais para melhorar a experiência de alguns utilizadores, mas a solução no seu todo não deve diferenciar utilizadores.
Áreas de atuação
- Estrutura do site (ou aplicação)
- Conteúdos (como texto, imagem ou vídeo)
- Formulários (e outros elementos interativos)
Páginas Web
As páginas Web são geralmente baseadas em três linguagens:
- O HTML como linguagem essencial para representação de conteúdos e que faz referência aos recursos que necessita para apresentar a informação.
- As CSS como linguagem auxiliar com instruções sobre o aspeto visual de elementos HTML.
- O JavaScript como linguagem auxiliar para definição de comportamentos e aspetos funcionais dos elementos HTML.
HTML
- O HTML tem uma sintaxe relativamente simples. No entanto é importante saber aplicar convenientemente cada uma das suas tags para obter os resultados mais adequados.
- Cada tag tem as suas funções e caraterísticas, fornecendo informações essenciais sobre o conteúdo e respetiva semântica.
- Aplicações como navegadores, indexadores de motores de pesquisa, leitores de ecrã, etc, baseiam-se nestas instruções para definir o seu comportamento.
Tags em HTML
Uma tag HTML é composta por elementos como o nome (obrigatório), atributos (opcional) e valor (opcional)
Estrutura formal de uma página Web
Uma página Web é composta pela especificação do tipo de documento, um cabeçalho e um corpo.
<!DOCTYPE html>
<html>
<head>
<title>Título da página</title>
</head>
<body>
Conteúdo da página
</body>
</html>
Estrutura formal de uma página Web (2)
- O
doctypedefine o tipo e versão da especificação que deve ser utilizada para interpretar o documento. - No cabeçalho da página (englobado pela tag
head) geralmente encontramos metadados que caraterizam a página, bem como a especificação de recursos necessários para o correto funcionamento e apresentação da página (por exemplo, ficheiros CSS). - No corpo da página (englobado pela tag
body) estão os conteúdos propriamente ditos (texto, imagens, vídeos, etc).
Cascading Style Sheet (CSS)
- As folhas de estilo definem a aparência que os conteúdos devem assumir.
- Instruções com as especificações de tamanho, cor, espaçamentos, etc., devem ser definidas através desta linguagem, promovendo assim a separação entre a apresentação e os conteúdos.
- As informações de estilos tratam essencialmente aspetos visuais e são geralmente ignoradas pelos leitores de ecrã (com algumas exceções).
Exemplo de instruções CSS
No exemplo seguinte é apresentado um conjunto de instruções CSS que define a cor vermelha e o estilo negrito para todos os parágrafos de um documento HTML.
p {
color: red;
font-weight: bold;
}
JavaScript
- Esta é uma linguagem de programação que permite manipular, adicionar interação, definir comportamentos e até modificar aspetos visuais de elementos HTML.
Exemplo:
document.getElementById("javascript-example-btn") .addEventListener("click", function () { alert("Ativou o botão!"); }, false); - São necessários alguns cuidados na utilização do JavaScript na Web pois algumas modificações podem não ser detetadas por alguns leitores de ecrã (consultar aria-live).
Dicas práticas: Definições de idioma
- O atributo
langdefine qual o idioma em que o conteúdo da tag que o define está escrito. - Os leitores de ecrã podem utilizar esta informação para escolher a voz que devem utilizar na leitura.
- Os motores de pesquisa podem utilizar esta informação para indexar o site no idioma definido.
<html lang="pt-PT"><!-- Define o idioma do documento para Português --> (...)
<span lang="en">Web</span><!-- A palavra "Web" está em Inglês -->
Títulos das páginas
- Os títulos das páginas devem ser úteis.
- Uma boa prática é inverter a ordem do título mostrando primeiro o título da página seguido do nome do site.
Cabeçalhos
- Os cabeçalhos devem ser utilizados para títulos.
- Cada documento deve ter uma estrutura lógica de cabeçalhos que começa no nível 1 e não salta níveis.
- O título do conteúdo principal do documento deve ser um cabeçalho de nível 1.
<h1>Nome do site</h1>
<h2 class="list-title">Menu principal</h2><ul><li>...</li></ul>
<div id="content">
<h1>Título da página</h1>
<p>Conteúdo da página</p>
</div>
Aumente o tamanho da letra
- É recomendado um tamanho de, pelo menos, 16px efetivos.
- O texto deve ser legível a um metro do ecrã.
- Utilize tamanhos relativos1
html { font-size: 62.5%; } body { font-size: 1.6em; /* aproximadamente 16px */ }
Herança de tamanhos
Atenção à herança de tamanhos!
body {
font-size: 1.6em; /* ±16px */
}
h1 {
font-size: 2em; /* 1.6em*2em≅3.2em (32px e não 20px) */
}
Espaçamento do texto
A falta de espaço entre linhas pode dificultar a leitura de textos longos:
line-height: normal;
Resultado:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed metus justo, id sagittis neque. Donec neque quam, consequat sit amet tincidunt in, semper id est. Integer sed odio ac metus accumsan rutrum elementum et tortor. Proin suscipit condimentum feugiat. Vestibulum placerat, justo sit amet dapibus fringilla, nisi diam laoreet diam, in ullamcorper arcu neque id mi.
Espaçamento do texto (2)
Um espaçamento adequado facilita a transição entre linhas:
line-height: 1.4em;
Resultado:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed metus justo, id sagittis neque. Donec neque quam, consequat sit amet tincidunt in, semper id est. Integer sed odio ac metus accumsan rutrum elementum et tortor. Proin suscipit condimentum feugiat. Vestibulum placerat, justo sit amet dapibus fringilla, nisi diam laoreet diam, in ullamcorper arcu neque id mi.
Espaçamento entre parágrafos
O espaçamento entre parágrafos também é importante:
p{ margin-bottom: 0; }
Resultado:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed metus justo, id sagittis neque. Donec neque quam, consequat sit amet tincidunt in, semper id est.
Integer sed odio ac metus accumsan rutrum elementum et tortor. Proin suscipit condimentum feugiat. Vestibulum placerat, justo sit amet dapibus fringilla, nisi diam laoreet diam, in ullamcorper arcu neque id mi.
Espaçamento entre parágrafos
O espaçamento facilita a diferenciação de parágrafos:
p{ margin-bottom: 0.5em; }
Resultado:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed metus justo, id sagittis neque. Donec neque quam, consequat sit amet tincidunt in, semper id est.
Integer sed odio ac metus accumsan rutrum elementum et tortor. Proin suscipit condimentum feugiat. Vestibulum placerat, justo sit amet dapibus fringilla, nisi diam laoreet diam, in ullamcorper arcu neque id mi.
Alinhamento do texto
- O alinhamento de textos longos para idiomas em que a leitura se faça da esquerda para direita deve ser à esquerda.
- Texto justificado tende a deixar um espaçamento maior entre palavras o que pode dificultar a leitura para alguns utilizadores (nomeadamente, pessoas com dislexia ou baixa visão).
- A hifenização e espaçamento de letras nas palavras poderá permitir que, no futuro, se possa justificar o texto na web (CSS 3).
Hiperligações sem conteúdo
- As hiperligações devem ter sempre conteúdo (não basta apenas definir o endereço de destino)
<a href="http://exemplo.com/"></a><!-- Errado! --> <a href="http://exemplo.com/"><img src="imagem.png" alt=""></a><!-- Errado! --> - O texto é importante para dar um contexto à hiperligação
<a href="http://exemplo.com/">Texto</a><!-- Melhor --> <a href="http://exemplo.com/"><img src="imagem.png" alt="Texto"></a><!-- Melhor -->
Texto das hiperligações
- O texto das hiperligações não deve ser repetido no mesmo documento.
- Textos genéricos, que não fornecem informação de contexto sobre a hiperligação, não são adequados:
<a href="http://exemplo.com/documentoxpto.pdf">Clique aqui</a> para descarregar o documento XPTO.<!-- Errado! --> - Expressões como "clique aqui" são desaconselhadas (existem utilizadores que não "clicam").
Alternativa ao exemplo anterior
<a target="_blank" title="Siga a hiperligação para aceder ao documento XPTO em uma nova janela ou separador" href="http://exemplo.com/documentoxpto.pdf">Descarregue documento XPTO (<abbr lang="en" title="Portable Document Format">PDF</abbr>)</a>.
- Caso se aplique, é recomendável informar o utilizador que o destino da hiperligação será apresentado numa nova janela/separador.
- É ainda aconselhável indicar o tipo de documento associado à hiperligação (caso este não seja uma página HTML).
Hiperligações JavaScript
- Hiperligações com iteração devem sempre ter o atributo
hrefdefinido. - Isto é importante para garantir que as mesmas podem ser ativadas através de outros métodos que não apenas o clique ou o toque.
<a id="close" title="Fechar elemento">Fechar</a><!-- Errado! -->
<a href="#" id="close" title="Fechar elemento">Fechar</a><!-- OK -->
Hiperligações de salto
- Nem todos os utilizadores utilizam um rato ou uma superfície tátil para navegar num site.
- As hiperligações de salto fornecem um mecanismo para que um utilizador possa ter acesso facilitado ao conteúdo ou saltar grandes blocos de informação.
- É particularmente útil para utilizadores que navegam com o teclado (por exemplo, utilização da tecla Tabulação) ou com outros dispositivos de mudança de foco passo a passo.
Hiperligações de salto (2)
- As hiperligações de salto não são mais do que do que hiperligações normais cujo o destino são âncoras para identificadores existentes na página.
<a href="#content" title="Siga a hiperligação para saltar para o conteúdo da página" class="skip-link">Ir para o conteúdo</a> <!-- HTML para banners, menus, etc --> <div id="content"><!-- Conteúdo... --></div> - A primeira hiperligação do documento deve apontar diretamente para o conteúdo.
- Hiperligações de salto para grandes blocos de hiperligações são também recomendadas.
Visibilidade das hiperligações de salto
- As hiperligações de salto não devem ser escondidas quando estão ativas
.skip-link{ text-indent: -9999px; /* Errado */ } .skip-link{ display: none; /* Muito errado!!! */ }
Visibilidade das hiperligações de salto (2)
- As hiperligações de salto podem ser escondidas da área vísivel apenas quando não estão ativas
a.skip-link, a.skip-link:hover, a.skip-link:visited{ position:absolute; left:0px; top:-1000px; width:1px; height:1px; overflow:hidden; }
Visibilidade das hiperligações de salto (3)
- No entanto estas devem ser apresentadas quando estão em foco (por exemplo, na navegação por teclado)
a.skip-link:active, a.skip-link:focus{ position:static; width:auto; height:auto; }
ARIA landmark roles
- As hiperligações de salto ainda são bastante utilizadas (promovidas pelas WCAG 2.0)
- No entanto as ARIA landmark roles podem fornecer uma solução mais interessante para descrever logicamente a estrutura do site/aplicação e permitir a navegação entre as suas secções com recurso a tecnologias de apoio.
Limite do foco de hiperligações
- O limite (ou linha) que contorna as hiperligações quando as mesmas estão focadas não deve ser removido.
a{ outline:none; /* OH, NÃO!!!!! */ } - Os utilizadores que apenas utilizam o teclado para navegar necessitam de saber qual a hiperligação que está selecionada.
- Este limite pode ser removido mas apenas para o estado
:active.
Menus
- Os menus não são mais do que uma lista de hiperligações.
- Neste sentido as listas não ordenadas do HTML fornecem uma solução interessante para representar a estrutura de um menu.
<nav role="navigation">
<h2>Lista com o menu principal do <em lang="en">site</em></h2>
<ul>
<li><a href="/inicio">Inicio</a></li> (...)
<li><a href="/contactos">Contactos</a></li>
</ul>
</nav>
Métodos de navegação alternativos
- Nem todos os utilizadores recorrem ao rato para navegar na web.
- É importante garantir que estes utilizadores não são negligenciados, através da implementação do suporte a métodos de navegação alternativos tais como navegação com o teclado, ecrãs táteis, etc.
Métodos de navegação alternativos (2)
- A execução de ações apenas no
:hoveré um dos erros mais comunsa:hover{ text-decoration: underline; } - Solução: aplicar o mesmo efeito também no
:focusa:hover, a:focus, a:active{ text-decoration: underline; }
Métodos de navegação alternativos (3)
- A utilização de código JavaScript pode ser útil para adaptar comportamento às caraterísticas da aplicação cliente.
- Por exemplo, pode modificar-se o comportamento se for detetada a presença de um interface tátil:
if("ontouchstart" in window){ /* Interface tátil; definir código para expandir o menu ao toque */ }else{ /* Interface não tátil; definir código para expandir o menu ao focar ou deslocar o rato sob o mesmo */ }
Tabelas
- As tabelas servem para mostrar informação num formato tabular e não devem ser utilizadas para definir a estrutura ou layout de um site!!!
Título das tabelas
- Deve ser definido um título e um sumário2 para a tabela.
- O título é geralmente apresentado ao utilizador e funciona como uma legenda para a tabela.
<table>
<caption>Tabela 1: Avaliações dos alunos por UCs</caption> (...)
</table>
2 A utilização do sumário através do atributo
summary é desaconselhada no HTML 5 e a descrição da tabela deve ser feita através do caption ou através de uma tag figure que englobe a tabela.Estrutura formal das tabelas
- É recomendável a definição de uma zona de cabeçalho e de conteúdo que forneçam informações sobre a estrutura da tabela.
- Opcionalmente pode ser definido também um rodapé que, em conjunto com o cabeçalho, pode ser repetido em caso de quebra de página (na impressão).
<table>
<caption>Tabela 1: Avaliações dos alunos por UCs</caption>
<thead><!-- Células de cabeçalho (...) --></thead>
<tfoot><!-- Células de rodapé (opcional) (...) --></tfoot>
<tbody><!-- Células de conteúdo (...) --></tbody>
</table>
Exemplo de código de uma tabela
<table>
<caption>Tabela 1: Avaliações dos alunos por Unidades Curriculares (de 0 a 20 valores)</caption>
<thead>
<tr>
<th scope="col"><span title="Número do aluno">Aluno</span></th>
<th scope="col"><span title="UC de Qualidade de Serviços em Rede">QSR</span></th>
<th scope="col"><span title="UC de Computação em Ambientes Distribuídos">CAD</span></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">2120915</th>
<td>19</td>
<td>17</td>
</tr>
<tr>
<th scope="row">2120917</th>
<td>18</td>
<td>18</td>
</tr>
</tbody>
</table>
Resultado do exemplo anterior
| Aluno | QSR | CAD |
|---|---|---|
| 2120915 | 19 | 17 |
| 2120917 | 18 | 18 |
Mais sobre tabelas
Interpretar uma tabela complexa apenas com recurso à audição pode ser algo bastante difícil pelo que se recomenda que as tabelas sejam simplificadas sempre que possível.
Existem mais algumas instruções HTML para construção de tabelas mais complexas que não foram abordadas. Em caso de necessidade estas opções adicionais podem e devem ser exploradas para facilitar a interpretação dos dados a apresentar.
Imagens
- Devem ter o atributo
altsempre definido. Este atributo fornece uma alternativa textual à imagem e pode estar vazio para imagens sem relevância informativa (por exemplo, imagens decorativas). - O atributo
titlefornece informações adicionais sobre a imagem e pode ser utilizado para descrições curtas que podem ser consultadas por todos os utilizadores.
Imagens (2)
- Imagens mais complexas podem ser descritas contextualmente no conteúdo ou através da adição de uma hiperligação junto da imagem que remeta para um documento com uma descrição mais completa.
- No caso das imagens de fundo, deve ser sempre definida uma cor de fundo que forneça contraste suficiente para ler o texto (para o caso da imagem não ser apresentada).
Contraste de cores
- O contraste entre as cores de primeiro e de segundo plano do texto devem ser garantido para que a informação seja legível.
- Recomenda-se um rácio de contraste, de pelo menos, 7:1 para textos inferiores a 18pt (ou 14pt no caso de texto negrito) e de, pelo menos, 4.5:1 para textos com dimensões superiores (fórmula de contraste WCAG 2.0).
- Ferramentas como o Colour Contrast Check permitem verificar o rácio de contraste entre duas cores.
Estava aqui um texto...
Etiquetas
- As etiquetas (
labels) permitem adicionar informação descritiva aos campos de um formulário. - Estas devem ser associadas de forma implícita ou explícita aos respetivos campos permitindo aumentar a área de foco.
<label>Nome: <input type="text" /></label><!-- associação implícita --> (...) <label for="name">Nome:</label> <input id="name" type="text" /><!-- associação explícita -->
Agrupamentos em formulários
- Os campos de formulários podem ser agrupados logicamente para simplificar o preenchimento.
<form> <fieldset> <legend>Dados pessoais: </legend> <p><label>Nome: <input type="text" size="30"></label></p> <p><label>Email: <input type="text" size="30"></label></p> <p><label>Idade: <input type="text" size="3"></label></p> </fieldset> </form> - Geralmente os leitores de ecrã anunciam a legenda antes da etiqueta para cada um dos campos.
Tamanho de botões
- Elementos interativos devem ter um tamanho suficiente para que possam ser utilizados por utilizadores com dificuldades na execução de movimentos precisos.
Ferramentas de acessibilidade
- Ferramentas como uma barra de acessibilidade pode ser uma boa forma de fornecer uma melhor experiência de navegação para os utilizadores da vossa aplicação, por exemplo, definindo e controlando a forma como o tamanho do texto pode ser alterado, as cores do site modificadas, ou através da descrição da estrutura e do funcionamento do vosso software.
Progressive Enhancement
- O responsive web design e descrição de elementos com as ferramentas para as ARIA podem permitir otimizar e melhorar a experiência de navegação em função das caraterísticas dos utilizadores e respetivos dispositivos de acesso (progressive enhancement).
- No entanto, é importante garantir que o acesso à informação continua a ser possível mesmo que as aplicações cliente não disponham de todas as funcionalidades necessárias para a melhor experiência possível (graceful degradation).
Testes e validação
- As ferramentas de validação automática são muito úteis e podem detetar uma boa parte dos problemas de acessibilidade. Exemplos:
- AccessMonitor - desenvolvido pela UMIC – Agência para a Sociedade do Conhecimento, IP
- WAVE - Web Accessibility Tool
- No entanto as verificações automáticas podem não ser suficientes para detetar todos os problemas de acessibilidade. Validações manuais, análise ao conteúdo e testes com utilizadores, complementam as análises automáticas.
Algumas normas importantes
Questões?
- Dúvidas?
- Comentários?
Referências
- G. Ivo, HTML/CSS tips to improve the accessibility of your websites, Codebits 2011, 10 de novembro de 2011.
- Inclusão e Acessibilidade em Ação, Inclusão vs. Acessibilidade, Instituto Politécnico de Leiria, 1 de junho de 2012 <iact.ipleiria.pt/concepts/acessibilidade/> [Acedido a 3 de maio de 2013]
- Disabled World, World Facts and Statistics on Disabilities and Disability Issues, <www.disabled-world.com/disability/statistics/> [Acedido a 27 de maio de 2015]
Referências (2)
- Windows Dev Center, Introduction to ARIA, Microsoft, <msdn.microsoft.com/en-us/windows/gg671918> [Acedido a 27 de maio de 2015]
- J. Craig & M. Cooper, Accessible Rich Internet Applications (WAI-ARIA) 1.0, W3C, 3 de fevereiro de 2014 <www.w3.org/WAI/PF/aria/> [Acedido a 27 de maio de 2015]
Source code
- Pode encontrar o código-fonte desta apresentação no GitHub: https://github.com/cesperanc/daws