{"id":3615,"date":"2014-10-29T08:59:57","date_gmt":"2014-10-29T10:59:57","guid":{"rendered":"http:\/\/blog.turbosite.com.br\/?p=3615"},"modified":"2014-10-29T08:59:57","modified_gmt":"2014-10-29T10:59:57","slug":"praticas-web-acessiveis","status":"publish","type":"post","link":"https:\/\/www.turbosite.com.br\/blog\/praticas-web-acessiveis\/","title":{"rendered":"Pr\u00e1ticas Web acess\u00edveis"},"content":{"rendered":"

Tornar uma p\u00e1gina responsiva, tanto \u00e0 diferentes resolu\u00e7\u00f5es de telas quanto a dispositivos variados, praticamente j\u00e1 tornou-se lei de mercado para que uma p\u00e1gina tenha uma boa qualidade na transmiss\u00e3o da informa\u00e7\u00e3o. Por\u00e9m, apenas \u00a0adaptar o layout<\/em> da p\u00e1gina para respeitar padr\u00f5es responsivos<\/strong>,\u00a0n\u00e3o \u00e9 o bastante para deixar a p\u00e1gina acess\u00edvel<\/strong>.<\/p>\n

Hoje, se voc\u00ea tem interesse em criar uma\u00a0\u00a0p\u00e1gina acess\u00edvel \u00e0 v\u00e1rios ambientes, apenas adaptar o layout<\/em> \u00e0 varia\u00e7\u00f5es de resolu\u00e7\u00e3o n\u00e3o basta. Algumas metodologias devem ser revistas para uma completa adequa\u00e7\u00e3o. Eventos\u00a0gerenciados pelo DOM, como key press, mouse over e mouse out, n\u00e3o funcionam muito bem em dispositivos m\u00f3veis. Enquanto conte\u00fados que s\u00e3o ativados por meio de alguma a\u00e7\u00e3o, n\u00e3o ser\u00e3o bem aproveitados para usu\u00e1rios com alguma defici\u00eancia, por exemplo.<\/p>\n

Alguns t\u00f3picos ser\u00e3o levantados durante esse artigo, envolvendo quest\u00f5es quanto \u00e1 portabilidade e acessibilidade.<\/p>\n

 <\/p>\n

Independ\u00eancia de dispositivo<\/h3>\n

Eventos que funcionam somente pelo mouse<\/span> s\u00e3o um grande problema para a acessibilidade, pois nem todas as pessoas conseguem utilizar o mouse<\/span>. Quem utiliza leitor de tela, por exemplo, navega exclusivamente pelo teclado. Pessoas com determinados tipos de defici\u00eancia f\u00edsica poder\u00e3o n\u00e3o ter a habilidade de usar o mouse<\/span> convencional e poder\u00e3o utilizar teclados e mouses\u00a0<\/span>adaptados. Por isso, todas as fun\u00e7\u00f5es de uma p\u00e1gina devem ser dispositivo-independentes, ou seja, devem funcionar pelo mouse<\/span><\/strong>, teclado<\/strong> ou outro dispositivo<\/strong>. Al\u00e9m disso, o foco do teclado n\u00e3o deve ficar fixado ou \u201cpreso\u201d em algum elemento, pois o usu\u00e1rio deve poder percorrer toda a p\u00e1gina pelo teclado facilmente. Valendo lembrar que em dispositivos m\u00f3veis, muitos eventos s\u00e3o inexistentes.<\/p>\n

Como exemplo, aquele popover<\/em> que aparece na p\u00e1gina, coma op\u00e7\u00e3o de fechar ao click de um bot\u00e3o gera uma\u00a0excelente usabilidade, mas uma acessibilidade terr\u00edvel para usu\u00e1rios que n\u00e3o conseguem alcan\u00e7ar aquele bot\u00e3o. Uma simples adi\u00e7\u00e3o de c\u00f3digo aplica \u00e0 tecla “ESC” do teclado a a\u00e7\u00e3o de fechar o popover<\/em>.<\/p>\n

 <\/p>\n

window.onload = function(){\n\tdocument.onkeydown = function(e){\n\t\t\/\/ tecla ESC\n\t\tif(e.keyCode==13){\n\t\t\tfecha_popover();\n\t\t}\n\t}\n}\n<\/pre>\n
Se forem utilizados eventos de JavaScript espec\u00edficos para mouse<\/span>, devem ser utilizados os correspondentes para teclado:<\/p>\n\n\n\n\n\n\n\n\n\n
Eventos correspondentes para mouse<\/span> e teclado<\/caption>\n
Evento do teclado<\/th>\nEvento correspondente do mouse<\/span><\/th>\n<\/tr>\n<\/thead>\n
onkeydown<\/td>\nonmousedown<\/td>\n<\/tr>\n
onkeyup<\/td>\nonmouseup<\/td>\n<\/tr>\n
onkeypress<\/td>\nonclick<\/td>\n<\/tr>\n
onfocus<\/td>\nonmouseover<\/td>\n<\/tr>\n
onmouseover<\/td>\nonmouseout<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Adequar a navega\u00e7\u00e3o\u00a0da p\u00e1gina pela tecla “TAB” do teclado \u00e9 outra dica importante. Ordene o conte\u00fado da sua p\u00e1gina para que este tipo de navega\u00e7\u00e3o passe apenas por conte\u00fados utiliz\u00e1veis, como formul\u00e1rios e links.<\/p>\n
Por fim, sempre teste o site navegando por todo o conte\u00fado somente pelo teclado, com setas e “TAB”, e em diferentes navegadores.<\/p>\n
 <\/p>\n
Altera\u00e7\u00f5es temporais do conte\u00fado<\/h3>\n
\u00c9 muito comum a utiliza\u00e7\u00e3o de conte\u00fados que se movem, como os slideshows<\/em>. Esse tipo de elemento n\u00e3o deve mover-se automaticamente, pois o usu\u00e1rio \u00e9 quem deve decidir se quer \u201crolar\u201d o conte\u00fado ou n\u00e3o. Assim, devem ser oferecidos controles para iniciar, pausar e reiniciar\u00a0<\/strong>tais rolagens. Esses controles devem ser acess\u00edveis tamb\u00e9m pelo teclado e devem estar bem descritos, para quem utiliza leitor de tela.<\/p>\n
 <\/p>\n
\"slide<\/p>\n
 <\/p>\n
Atualiza\u00e7\u00e3o e redirecionamento autom\u00e1ticos<\/h3>\n
Quando ocorre uma mudan\u00e7a, atualiza\u00e7\u00e3o ou redirecionamento repentino na p\u00e1gina, o usu\u00e1rio pode sentir-se confuso ou desorientado, especialmente se estiver utilizando algum recurso de Tecnologia Assistiva, como um leitor de tela, por exemplo. Isso ocorre em p\u00e1ginas com atualiza\u00e7\u00e3o ou redirecionamento autom\u00e1ticos. A atualiza\u00e7\u00e3o autom\u00e1tica peri\u00f3dica \u2013 muito utilizada por canais de not\u00edcias – \u00e9 comumente realizada atrav\u00e9s do uso do o atributo http-equiv<\/em> com conte\u00fado \u201crefresh<\/em>\u201d do elemento meta<\/em> no HEAD<\/em> do documento.<\/p>\n
Em p\u00e1ginas onde a atualiza\u00e7\u00e3o \u00e9 absolutamente necess\u00e1ria, o usu\u00e1rio dever\u00e1 ser informado que a p\u00e1gina \u00e9 atualizada automaticamente.<\/p>\n
Quanto ao redirecionamento autom\u00e1tico, o mesmo deve ocorrer de forma transparente para o usu\u00e1rio. Ou seja, n\u00e3o devem ser utilizadas marca\u00e7\u00f5es para redirecionar a uma nova p\u00e1gina, como o uso do atributo http-equiv<\/em> com conte\u00fado \u201crefresh<\/em>\u201d do elemento META<\/em>.<\/p>\n
 <\/p>\n
Limite de tempo<\/h3>\n
Em uma p\u00e1gina onde h\u00e1 limite de tempo para realizar uma tarefa deve haver a op\u00e7\u00e3o de desligar<\/strong>, ajustar<\/strong> ou prolongar<\/strong> esse limite. Essa recomenda\u00e7\u00e3o n\u00e3o se aplica a eventos em que o limite de tempo \u00e9 absolutamente necess\u00e1rio. Deve-se lembrar que, em ambos os casos, o limite de tempo deve ser informado.<\/p>\n
Ao especificar o tempo limite para o usu\u00e1rio conclua\u00a0a a\u00e7\u00e3o, n\u00e3o se deve tomar como modelo um desktop conectado a teclado e mouse convencionais. Dispositivos m\u00f3veis mostram uma ergonomia mais prec\u00e1ria, comparadas ao desktop, exigindo um esfor\u00e7o maior e mais prolongado para resolver algumas a\u00e7\u00f5es. Defici\u00eancias motoras retardam\u00a0a conclus\u00e3o de alguns trabalhos na p\u00e1gina da web. \u00c9 importante adequar o tempo levando em conta o dispositivo que o usu\u00e1rio esteja utilizando, e a\u00a0dificuldade que usu\u00e1rios possam ter concluir trabalhos convencionais.<\/p>\n
 <\/p>\n
Intermit\u00eancia de tela<\/h3>\n
N\u00e3o apenas pela acessibilidade, mas tamb\u00e9m pelo bom gosto. N\u00e3o devem ser utilizados efeitos visuais piscantes, intermitentes ou cintilantes. Em pessoas com epilepsia fotosensitiva, o cintilar ou piscar pode desencadear um ataque epil\u00e9tico. Al\u00e9m disso, elementos piscantes podem causar desconforto, desaten\u00e7\u00e3o e confus\u00e3o para os usu\u00e1rios.<\/p>\n
 <\/p>\n
A import\u00e2ncia do contraste para usu\u00e1rios com Daltonismo<\/h3>\n
A defici\u00eancia de cor vermelho\/verde \u00e9 o tipo mais comum de Daltonismo. Por isso, deve-se evitar a utiliza\u00e7\u00e3o de contrastes<\/strong> entre essas duas cores.<\/p>\n