/ 112
Por onde vamos...
› Preocupe-se com o visual
› Lembra do teclado?
› Um mundo de faz de conta
› Juntando tudo: um controle acessível
› Bons links e referências
2
/ 112
Preocupe-se com o
visual
Bons motivos para se preocupar com cores, tipos e sons,
mesmo não sendo um designer!
3
/ 112
Preocupe-se com o visual
A W3C, World Wide Web Consortium, é a principal organização internacional responsável por padronizar quesitos relacionados à Web
www.w3.org
* Assunto paralelo: antes de reclamar ou elogiar um ou outro browser, sempre confira a especificação oficial ; )
5
/ 112
Preocupe-se com o visual
Preocupada em levar o conteúdo da Web ao maior número de pessoas possível, a W3C criou o Web Content Accessibility Guidelines, ou WCAG, disponível em:
www.w3.org/TR/WCAG20
O foco principal do WCAG são pessoas com diversos tipos de necessidades especiais, como problemas de visão, surdez, dislexia...
6
/ 112
Preocupe-se com o visual
O WCAG é um conjunto de diretrizes que se atentam a diversas características relacionadas com a experiência do usuário com conteúdo Web, como por exemplo:
› Sons
› Cores
› Animação
› Texto (tipos / fontes)
7
/ 112
Preocupe-se com o visual
O WCAG está atualmente na versão 2.0, e suas diretrizes são dividida em quatro grandes grupos:
1. Perceptibilidade
2. Usabilidade
3. Compreensibilidade
4. Robustez
8
/ 112
Preocupe-se com o visual
1. Perceptibilidade
1.1 Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.
1.2 Provide alternatives for time-based media.
1.3 Create content that can be presented in different ways (for example simpler layout) without losing information or structure.
1.4 Make it easier for users to see and hear content including separating foreground from background.
* Conteúdo extraído do WCAG 2.0 na íntegra
9
/ 112
Preocupe-se com o visual
2. Usabilidade
2.1 Make all functionality available from a keyboard.
2.2 Provide users enough time to read and use content.
2.3 Do not design content in a way that is known to cause seizures.
2.4 Provide ways to help users navigate, find content, and determine where they are.
10
/ 112
Preocupe-se com o visual
3. Compreensibilidade
3.1 Make text content readable and understandable.
3.2 Make Web pages appear and operate in predictable ways.
3.3 Help users avoid and correct mistakes.
11
/ 112
Preocupe-se com o visual
4. Robustez
4.1 Maximize compatibility with current and future user agents, including assistive technologies.
12
/ 112
Preocupe-se com o visual
No tempo que temos, não é possível discutir TODAS as diretrizes, então...
... vamos a alguns exemplos práticos! :D
13
/ 112
Preocupe-se com o visual
Gosta de cores?!
Que tal essas combinações...
14
Texto
Texto
Texto
TextoTexto
Texto
Texto
Texto
Texto
/ 112
Preocupe-se com o visual
Junto com a WCAG, a W3C criou um conjunto de técnicas para auxiliar os desenvolvedores a atingirem o que é proposto pelas diretrizes
Esse conjunto de técnicas está disponível em:
www.w3.org/TR/WCAG20-TECHS
17
/ 112
Preocupe-se com o visual
Cálculo do contraste baseado na luminosidade relativa das cores:
L = 0.2126 * CR + 0.7152 * CG + 0.0722 * CB
CX é definido da seguinte forma (X varia de 0 a 1):
se (X ≤ 0.03928) entãoCX = X / 12.92
senãoCX = ((X + 0.055) / 1.055) 2.4
* Extraído das técnicas G17 e G18
18
/ 112
Preocupe-se com o visual
Uma vez calculada a luminosidade relativa do texto e do fundo, obtém-se o contraste através da fórmula:
Contraste = (L1 + 0.05) / (L2 + 0.05)
Onde L1 é a maior luminosidade (dentre texto e fundo), e L2 é a menor
19
/ 112
Preocupe-se com o visual
Perfeito! Fiz todas as contas, mas... Ainda não sei se minha combinação de cores está boa....... :(
20
/ 112
Preocupe-se com o visual
O documento que explica como trabalhar com esse valor de contraste está disponível em:
www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast7.html
21
/ 112
Preocupe-se com o visual
Existem dois tipos de aprovação:
Nível AA: contempla pessoas normais, ou com pouca perda de visão
Nível AAA: comtempla pessoas com maior perda de visão, ou mais idosas
22
/ 112
Preocupe-se com o visual
Contraste mínimo para aprovação:
23
Tamanho da fonte Nível AA Nível AAA
< 18pt normal ou
< 14pt negrito4.5 : 1 7 : 1
> 18pt normal ou
> 14pt negrito3 : 1 4.5 : 1
/ 112
Preocupe-se com o visual
Experimentando na prática...
carlosrafaelgn.com.br/Aula/Cores.html
* Existem muitos outros sites onde isso também pode ser experimentado...
24
/ 112
Preocupe-se com o visual
Existem diversos tipos de daltonismo...
Há pessoas que só enxergam preto, branco e tons de cinza
Há outras cuja visão não capta corretamente o vermelho, ou o verde, ou o azul
...
27
/ 112
Preocupe-se com o visual
Vamos a alguns exemplos práticos...
carlosrafaelgn.com.br/Aula/Cores.html
33
/ 112
Preocupe-se com o visual
Outros fatos e técnicas interessantes...
› Pessoas com alguns tipos de dislexia não conseguem compreender corretamente textos que utilizam fontes com serifa (dessa forma, por exemplo)
Aqui existe bastante informação sobre isso:
www.dyslexic.com/fonts
34
/ 112
Preocupe-se com o visual
› Técnica G19: Nenhum componente deveria piscar mais de três vezes por segundo
› Técnica G11: Elementos que piscam devem piscar por no máximo cinco segundos, para não distrair
› Técnica G56: Quando existir um áudio contendo voz, o volume a voz deve ser pelo menos 20dB maior que o volume do som de fundo
35
/ 112
Resumindo...
› Branco e preto sempre funciona ;)
› Verifique a legibilidade dos textos nos elementos
› Teste as cores antes de liberar o documento ao usuário
› Se depender de cores, procure utilizar formas ou ícones com desenhos diferenciados
36
/ 112
Lembra do teclado?
Qual a diferença básica entre esses dois documentos... (além do título)?!?!
38
Teclado01A.html Teclado01B.html
/ 112
Lembra do teclado?
Vamos ao código simplificado de ambos:
40
<div>
<div>Item 1: ... </div>
<div>Item 2: ... </div>
<div>Item 3: ... </div>
<div>Item 4: ... </div>
</div>
Teclado01A.html <div>
<div>Item 1: ... </div>
<div style="...">Item 4: ... </div>
<div>Item 3: ... </div>
<div style="...">Item 2: ... </div>
</div>
Teclado01B.html
/ 112
Lembra do teclado?
O que ocorre...
No documento A, a exibição da tela coincide com a ordem dos elementos no código HTML
Já no documento B, a exibição da tela foi “simulada” através de estilos CSS, e a ordem da tela NÃO coincide com a ordem do código HTML
41
/ 112
Lembra do teclado?
Por padrão, o cursor se move de acordo com a ordemdos elementos no código HTML!
Mas...
42
/ 112
Lembra do teclado?
Novamente, qual a diferença básica entre esses dois documentos... (além do título)?!?!
43
Teclado02A.html Teclado02B.html
/ 112
Lembra do teclado?
E, de novo... A diferença é que o da direita (B) confunde o usuário!!!
... Quer ver?!
44
/ 112
Lembra do teclado?
Vamos ao código simplificado de ambos:
45
<div>
<div>Item 1: <input type="text" /></div>
<div>Item 2: <input type="text" /></div>
<div>Item 3: <input type="text" /></div>
<div>Item 4: <input type="text" /></div>
</div>
Teclado02A.html
<div>
<div>Item 1: <input type="text" tabindex="0" /></div>
<div>Item 2: <input type="text" tabindex="3" /></div>
<div>Item 3: <input type="text" tabindex="1" /></div>
<div>Item 4: <input type="text" tabindex="2" /></div>
</div>
Teclado02B.html
/ 112
Lembra do teclado?
O comportamento padrão do cursor é seguir a ordem dos elementos no código HTML, de cima para baixo...
...mas o atributo tabindex altera a ordem padrão dos elementos
* Elementos com tabindex iguais são percorridos na ordem dos elementos no código HTML
46
/ 112
Lembra do teclado?
Antes que alguém conclua que o atributo tabindex é malvado (ou qualquer outro adjetivo), um exemplo prático para comparar dois cenários, onde os botões na verdade são controles personalizados (mais sobre isso depois...)
47
Teclado03A.html Teclado03B.html
/ 112
Lembra do teclado?
No documento A foi possível navegar pelos botões através do teclado, diferente do documento B
Quem foi o responsável por isso?
...
tabindex
48
/ 112
Lembra do teclado?
O atributo tabindex é responsável por permitir que um elemento como div, receba o foco do teclado
No caso, todos os “botões“ do documento A possuem tabindex igual à 0, para que a navegação do cursor siga a ordem do código HTML
49
/ 112
Lembra do teclado?
* Fato interessante:
Vamos dar uma olhada no atributo outline nos estilos CSS do documento A...
50
/ 112
Lembra do teclado?
Como o estilo dos nossos botões foi bem bolado, modéstia à parte :), os botões já possuem uma indicação visual bem marcante quando o botão possui o foco do teclado
Assim, pode-se remover o outline utilizando a combinação destruidora do CSS: 0 none transparent
51
/ 112
Lembra do teclado?
Pessoas com deficiência visual geralmente navegam pelos documentos sem o auxílio de mouse ou toque, apenas com o auxílio do teclado, leitores de tela, ou outros dispositivos táteis, como “telas” em braile
53
/ 112
Lembra do teclado?
Além de utilizar o teclado para navegar linearmente pelos documentos, as pessoas fazem uso de atalhospara acelerar a navegação e poder ir mais rapidamente para locais específicos do documento
Os atalhos mais comuns são: títulos e links
54
/ 112
Lembra do teclado?
Ia mostrar duas imagens iguais, de novo, mas ficaria muito repetitivo...
Vamos logo para o exemplo!
:)
* Para constar: Teclado03A.html e Teclado03B.html
55
/ 112
Lembra do teclado?
O que é possível tirar disso?
Não basta “falsificar”, ou “simular” (para usar uma palavra mais branda) a aparência do documento
Visualmente, as pessoas até podem entender que determinada área do documento está destacada, mas quando não se pode enxergar...
56
/ 112
Lembra do teclado?
Opa! Já ia me esquecendo! Não tem muita relação com o teclado, mas...
Alguém reparou no alerta verde que apareceu nos exemplos?
Isso é porque os documentos foram devidamente formatados com o atributo lang="pt-br", que indica o idioma do conteúdo
57
Voice switch from en to pt-br
/ 112
Lembra do teclado?
O atributo lang é utilizado pelo leitor de telas para ajustar sua voz para o idioma apropriado, ou ao menos emitir um alerta, caso não possua uma voz compatível
Ele também é utilizado para auxiliar alguns serviços de tradução automática...
58
/ 112
Resumindo...
› Mesmo nos tempos de touch é importante fornecer meios para navegar pelo documento através do teclado
› O teclado beneficia não só as pessoas com necessidades especiais, mas também pessoas que utilizam um sistema todo dia (pense em um sistema com listas, formulários e cadastros sem teclado...)
59
/ 112
Um mundo de faz de conta
Em um passado não tão distante, os únicos controlesencontrados em documentos HTML eram os controles disponibilizados pelo padrão HTML
61
/ 112
Um mundo de faz de conta
Graças a uma série de fatores, como:
› Maior adoção dos padrões Web› Maior compatibilidade entre browsers› JavaScript com mais funcionalidades e mais robusto› Novas funcionalidades disponibilizadas pelos padrões HTML e CSS
Cada vez mais, controles personalizados têm tomado conta da Web
62
/ 112
Um mundo de faz de conta
Os controles personalizados fornecem mais controle (desculpe o trocadilho...) sobre sua aparência, além de comportamentos mais complexos
Exemplo: carlosrafaelgn.com.br/Aula/SpriteAnim.html
63
/ 112
Um mundo de faz de conta
A criação de controles personalizados consiste basicamente em alterar elementos comuns como div, span, ul, li, dando-lhes aparência e comportamento bem diferentes!
64
/ 112
Um mundo de faz de conta
É um conjunto de várioselementos div!!!
Mas poderiam ser diversoselementos li, ou qualqueroutro...
67
/ 112
Um mundo de faz de conta
Quem consegue enxergar visualmente o controle, entenderá e deduzirá sobre o que se trata aquele “monte de div”
Agora, para o browser, sempre será um conjunto de elementos div!
68
/ 112
Um mundo de faz de conta
Como diferenciar um div que é um elemento de uma árvore, de um div que é simplesmente um div?!?!?!
69
/ 112
Um mundo de faz de conta
Para solucionar esse dilema, a W3C criou o Web Accessibility Initiative - Accessible Rich Internet Applications, WAI-ARIA
O WAI-ARIA é um conjunto de diretrizes para aumentar a acessibilidade de conteúdo Web dinâmico, como por exemplo, controles personalizados via JavaScript
www.w3.org/TR/wai-aria
70
/ 112
Um mundo de faz de conta
A documentação completa do WAI-ARIA é bem extensa, e não poderia ser coberta com nosso tempo ;)
Por isso, vamos à parte prática: Roles e States/Properties
www.w3.org/TR/wai-aria/roles
www.w3.org/TR/wai-aria/states_and_properties
71
/ 112
Um mundo de faz de conta
Um role, indica o papel que o elemento tem na página, como um ator em uma peça de teatro
Os roles servem para guiar as ferramentas assistentes, para que elas possam proporcionar a melhor interação possível para cada situação
Vamos ver o exemplo da árvore...
72
/ 112
Um mundo de faz de conta
Outros roles comuns:
comboboxgridlistboxmenumenuitemtablistcheckboxdialogspinbuttonprogressbar
74
/ 112
Um mundo de faz de conta
Os states e as properties servem, como o nome sugere, para indicar o estado dos controles, e algumas propriedades estendidas
75
/ 112
Um mundo de faz de conta
Algumas properties comuns:
› aria-describedby: indica o id do elemento que possui a descrição do controle
› aria-haspopup: indica se o controle possui um popup
› aria-labelledby: indica o id do elemento que serve de label (descrição breve) para o controle
› aria-owns: indica o(s) id(s) do(s) elemento(s) que pertencem ao controle
76
/ 112
Um mundo de faz de conta
Algumas properties comuns:
› aria-readonly: indica se o conteúdo do controle é somente para leitura
› aria-valuemin: indica o valor mínimo do controle
› aria-valuemax: indica o valor máximo do controle
› aria-valuenow: indica o valor atual do controle
77
/ 112
Um mundo de faz de conta
Algumas properties comuns:
› aria-valuetext: fornece uma representação textual do valor do controle
› aria-activedescendant: indica o id do elemento atualmente ativo dentro do controle (como o item selecionado em uma lista)
78
/ 112
Um mundo de faz de conta
Alguns states comuns:
› aria-hidden: indica se o controle está visível ou não
› aria-disabled: indica se o controle está habilitado ou não
› aria-checked: indica se o controle está marcado ou não
› aria-selected: indica se o controle está atualmente selecionado ou não (como o item selecionado em uma lista)
79
/ 112
Um mundo de faz de conta
Alguns states comuns:
› aria-expanded: indica se o controle está expandido ou não (como um item dentro de uma árvore)
› aria-pressed: indica se o controle está pressionado ou não
80
/ 112
Juntando tudo: um controle acessível
Vamos juntos criar um controle lista acessível, similar ao que tenho em meu site, utilizando alguns dos conceitos demonstrados, como navegação por teclado e os atributos WAI-ARIA
:D
84
/ 112
Juntando tudo: um controle acessível
* Todos os atributos aria-xxx e role serão definidos através do método setAttribute() dos elementos HTML, conforme mostrado na documentação:
www.w3.org/TR/WCAG20-TECHS/aria.html
85
/ 112
Juntando tudo: um controle acessível
** Todo o código será criado utilizando apenas métodos e atributos padronizados pela W3C, e funcionará independentemente do browser, desde que o browser siga corretamente o padrão
86
/ 112
Juntando tudo: um controle acessível
*** Pelo tempo e pela intuito, não utilizaremos uma separação em camadas, como MVC
87
/ 112
Juntando tudo: um controle acessível
Começando pela parte fácil...
function btnAdicionar_Click() {
lista.adicionaItem(document.getElementById("txtNome").value);
return true;
}
document.getElementById("btnAdicionar").addEventListener("click", btnAdicionar_Click);
function btnRemover_Click() {
lista.removeSelecionado();
return true;
}
document.getElementById("btnRemover").addEventListener("click", btnRemover_Click);
89
/ 112
Juntando tudo: um controle acessível
Agora o começo da classe Lista...
function Lista(idElemento, largura, altura) {
var itemSelecionado = null,
temFoco = false,
elemento = document.getElementById(idElemento);
elemento.className = "lista";
elemento.style.width = largura;
elemento.style.height = altura;
elemento.setAttribute("role", "listbox");
elemento.setAttribute("tabindex", "0");
}
90
/ 112
Juntando tudo: um controle acessível
Instanciando a lista...
lista = new Lista("divLista", "200px", "200px");
Já podemos testar o comecinho!
91
/ 112
Juntando tudo: um controle acessível
Tratando os eventos da lista...
elemento.addEventListener("focus", function () {
temFoco = true;
if (itemSelecionado)
itemSelecionado.className = "item itemFoco";
return true;
});
elemento.addEventListener("blur", function () {
temFoco = false;
if (itemSelecionado)
itemSelecionado.className = "item itemSel";
return true;
});
92
/ 112
Juntando tudo: um controle acessível
elemento.addEventListener("mousedown", function (e) {
elemento.focus();
if (e.button === 0) {
if (e.target !== elemento && e.target.parentNode === elemento)
selecionaItem(e.target);
return false;
}
return true;
});
93
/ 112
Juntando tudo: um controle acessível
elemento.addEventListener("keydown", function (e) {switch (e.keyCode) {case 38: //cima
if (itemSelecionado) {if (itemSelecionado.previousSibling)
selecionaItem(itemSelecionado.previousSibling);} else {
if (elemento.firstChild)selecionaItem(elemento.firstChild);
}break;
case 40: //baixoif (itemSelecionado) {
if (itemSelecionado.nextSibling)selecionaItem(itemSelecionado.nextSibling);
} else {if (elemento.firstChild)
selecionaItem(elemento.firstChild);}break;
default:return true;
}if (e.preventDefault)
e.preventDefault();return false;
});
94
/ 112
Juntando tudo: um controle acessível
Dando vida (colocar abaixo das variáveis em Lista)...
function selecionaItem(item) {
if (itemSelecionado)
itemSelecionado.className = "item";
itemSelecionado = item;
if (item) {
item.className = (temFoco ? "item itemFoco" : "item itemSel");
elemento.setAttribute("aria-activedescendant", item.id);
} else {
elemento.setAttribute("aria-activedescendant", "");
}
return true;
}
95
/ 112
Juntando tudo: um controle acessível
this.adicionaItem = function (texto) {
var item = document.createElement("div");
item.appendChild(document.createTextNode(texto));
item.className = "item";
item.id = "item" + idItens.toString();
item.setAttribute("role", "option");
item.setAttribute("aria-selected", "false");
elemento.appendChild(item);
idItens = idItens + 1;
return true;
};
96
/ 112
Juntando tudo: um controle acessível
this.removeSelecionado = function () {
if (itemSelecionado) {
var anterior = itemSelecionado.previousSibling,
proximo = itemSelecionado.nextSibling,
pos = itemSelecionado.posicao;
elemento.removeChild(itemSelecionado);
itemSelecionado = null;
if (proximo)
selecionaItem(proximo);
else if (anterior)
selecionaItem(anterior);
}
return true;
};
97
/ 112
Juntando tudo: um controle acessível
Bem... Esse comportamento não é legal!
Eu quero que o item selecionado apareça conforme eu pressiono as teclas do teclado...
Então... Vamos às mudanças!
99
/ 112
Juntando tudo: um controle acessível
Dentro de adicionaItem...
...
item.setAttribute("aria-selected", "false");
item.posicao = elemento.childNodes.length;
elemento.appendChild(item);
...
100
/ 112
Juntando tudo: um controle acessível
Dentro de removeSelecionado...
...
itemSelecionado = null;
while (pos < elemento.childNodes.length) {
elemento.childNodes[pos].posicao = pos;
pos = pos + 1;
}
if (proximo)
...
101
/ 112
Juntando tudo: um controle acessível
Por fim, dentro de selecionaItem...
...
elemento.setAttribute("aria-activedescendant", item.id);
var itemTopo = item.posicao * 28, itemTopoRelativo = itemTopo - elemento.scrollTop;
if (itemTopoRelativo < 0)
elemento.scrollTop = itemTopo;
else if (itemTopoRelativo + 28 >= elemento.clientHeight)
elemento.scrollTop = itemTopo - elemento.clientHeight + 28;
} else {
...
102
/ 112
Juntando tudo: um controle acessível
Bem, na verdade... Ainda tem duas coisinhas faltando...
Se for para funcionar no IE, temos um probleminha...
104
/ 112
Juntando tudo: um controle acessível
Criando uma nova variável no começo do código
IE = (navigator.userAgent.indexOf("MSIE") >= 0);
Modificando o tratamento de mousedown...
selecionaItem(e.target);
if (IE)
e.preventDefault();
return false;
105
/ 112
Bons links e referências
Resumo de todos os links mostrados anteriormente, e
onde ir depois daqui...
106
/ 112
Bons links e referências
› W3Cwww.w3.org
› Web Content Accessibility Guidelines 2.0www.w3.org/TR/WCAG20
› Techniques for WCAG 2.0www.w3.org/TR/WCAG20-TECHS
107
/ 112
Bons links e referências
› Understanding WCAG 2.0www.w3.org/TR/UNDERSTANDING-WCAG20
› Contrast (Minimum)www.w3.org/TR/2012/NOTE-UNDERSTANDING-WCAG20-20120103/visual-audio-contrast-contrast.html
› Contrast (Enhanced)www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast7.html
108
/ 112
Bons links e referências
› Web Accessibility Tools Consortiumwww.wat-c.org
› Minha página de aula sobre corescarlosrafaelgn.com.br/Aula/Cores.html
› Typefaces for Dyslexiawww.dyslexic.com/fonts
109
/ 112
Bons links e referências
› Accessible Rich Internet Applications (WAI-ARIA) 1.0www.w3.org/TR/wai-aria
› WAI-ARIA - The Roles Modelwww.w3.org/TR/wai-aria/roles
› WAI-ARIA - Supported States and Propertieswww.w3.org/TR/wai-aria/states_and_properties
110
/ 112
Bons links e referências
› ARIA Techniques for WCAG 2.0www.w3.org/TR/WCAG20-TECHS/aria.html
› WARAU - Websites Atendendo a Requisitos de Acessibilidade e Usabilidade (UNICAMP)warau.nied.unicamp.br
› Mozilla Developer Networkdeveloper.mozilla.org/en-US/docs
111
Top Related