Aplicações Web AcessíveisCálculo do contraste baseado na luminosidade relativa das cores: L = 0.2126 * C R + 0.7152 * C G + 0.0722 * C B C X é definido da seguinte forma (X varia

Aplicações Web

Acessíveis

Carlos Rafael Gimenes das Neves

/ 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

Antes de tudo... Todos já ouviram falar da W3C?!?!?!

4

/ 112


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

http://www.w3.org/

/ 112


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

http://www.w3.org/TR/WCAG20/

/ 112


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


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


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


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


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


4. Robustez

4.1 Maximize compatibility with current and future user agents, including assistive technologies.

12

/ 112


No tempo que temos, não é possível discutir TODAS as diretrizes, então...

... vamos a alguns exemplos práticos! :D

13

/ 112


Gosta de cores?!

Que tal essas combinações...

14

Texto

Texto

Texto

TextoTexto

Texto

Texto

Texto

Texto

/ 112


Como saber se uma combinação de cores é legível?!?!?!

15

/ 112


› Bom senso

› Matemática

* A segunda tende a falhar menos!!! :)

16

/ 112


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

http://www.w3.org/TR/WCAG20-TECHS/

/ 112


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


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


Perfeito! Fiz todas as contas, mas... Ainda não sei se minha combinação de cores está boa....... :(

20

/ 112


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

http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast7.html

/ 112


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


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


Experimentando na prática...

carlosrafaelgn.com.br/Aula/Cores.html

* Existem muitos outros sites onde isso também pode ser experimentado...

24

http://carlosrafaelgn.com.br/Aula/Cores.html

/ 112


Fica uma pergunta... Será que todos enxergam as mesmas cores?!?!

25

/ 112


Um “causo” real...

26

/ 112


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


Exemplos reais de quem se preocupa com isso...

28

/ 112


29

/ 112


30

/ 112


31

/ 112


32

/ 112


Vamos a alguns exemplos práticos...

carlosrafaelgn.com.br/Aula/Cores.html

33


/ 112


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

http://www.dyslexic.com/fonts

/ 112


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

Utilizando esse velho amigo na época do swipe, touch e

slide

37

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

A diferença é que o da direita (B) confunde o usuário!!!

... Quer ver?!

39

/ 112

Lembra do teclado?

Vamos ao código simplificado de ambos:

40

<div>

<div>Item 1: ... </div>




</div>

Teclado01A.html <div>


<div style="...">Item 4: ... </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


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

Teclado02A.html

<div>

<div>Item 1: <input type="text" tabindex="0" /></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


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

Afinal, por que o teclado é tão importante?

52

/ 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

Nem tudo é o que parece, pelo menos de acordo com o

WAI-ARIA

60

/ 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


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


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

http://carlosrafaelgn.com.br/Aula/SpriteAnim.html

/ 112


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


Contudo...

O que é o controle ao lado?

65

/ 112


Pode até parecer uma árvore...

Mas na verdade...

66

/ 112


É um conjunto de várioselementos div!!!

Mas poderiam ser diversoselementos li, ou qualqueroutro...

67

/ 112


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


Como diferenciar um div que é um elemento de uma árvore, de um div que é simplesmente um div?!?!?!

69

/ 112


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

http://www.w3.org/TR/wai-aria/

/ 112


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

http://www.w3.org/TR/wai-aria/roles

http://www.w3.org/TR/wai-aria/states_and_properties

/ 112


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


73

treebutton

treeitem

/ 112


Outros roles comuns:

comboboxgridlistboxmenumenuitemtablistcheckboxdialogspinbuttonprogressbar

74

/ 112


Os states e as properties servem, como o nome sugere, para indicar o estado dos controles, e algumas propriedades estendidas

75

/ 112


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



› 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



› 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


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


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


Ufa!!!

:D

81

/ 112


Vamos ver mais exemplos práticos...

82

/ 112

Juntando tudo: um

controle acessível

Mãos à obra!

83

/ 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


* 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

http://www.w3.org/TR/WCAG20-TECHS/aria.html

/ 112


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


*** Pelo tempo e pela intuito, não utilizaremos uma separação em camadas, como MVC

87

/ 112


**** Chega de *’s !!!

88

/ 112


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


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


Instanciando a lista...

lista = new Lista("divLista", "200px", "200px");

Já podemos testar o comecinho!

91

/ 112


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;


itemSelecionado.className = "item itemSel";

return true;

});

92

/ 112


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


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


Dando vida (colocar abaixo das variáveis em Lista)...

function selecionaItem(item) {


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


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


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


Agora é só testar! :D

98

/ 112


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


Dentro de adicionaItem...

...

item.setAttribute("aria-selected", "false");

item.posicao = elemento.childNodes.length;

elemento.appendChild(item);

...

100

/ 112


Dentro de removeSelecionado...

...

itemSelecionado = null;

while (pos < elemento.childNodes.length) {

elemento.childNodes[pos].posicao = pos;

pos = pos + 1;

}

if (proximo)

...

101

/ 112


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


Pronto!!

103

/ 112


Bem, na verdade... Ainda tem duas coisinhas faltando...

Se for para funcionar no IE, temos um probleminha...

104

/ 112


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


› W3Cwww.w3.org

› Web Content Accessibility Guidelines 2.0www.w3.org/TR/WCAG20

› Techniques for WCAG 2.0www.w3.org/TR/WCAG20-TECHS

107

http://www.w3.org/

http://www.w3.org/TR/WCAG20/

http://www.w3.org/TR/WCAG20-TECHS/

/ 112


› 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

http://www.w3.org/TR/UNDERSTANDING-WCAG20/

http://www.w3.org/TR/2012/NOTE-UNDERSTANDING-WCAG20-20120103/visual-audio-contrast-contrast.html

http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast7.html

/ 112


› 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

http://www.wat-c.org/


http://www.dyslexic.com/fonts

/ 112


› 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

http://www.w3.org/TR/wai-aria/

http://www.w3.org/TR/wai-aria/roles

http://www.w3.org/TR/wai-aria/states_and_properties

/ 112


› 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

http://www.w3.org/TR/WCAG20-TECHS/aria.html

http://warau.nied.unicamp.br/

https://developer.mozilla.org/en-US/docs

/ 112

Ficamos por aqui!

112

Documents

Aplicações Web AcessíveisCálculo do contraste baseado na luminosidade relativa das cores: L = 0.2126 * C R + 0.7152 * C G + 0.0722 * C B C X é definido da seguinte forma (X varia