BOAS PRÁTICAS DE ACESSIBILIDADE PARA SISTEMAS WEB

Bloco 1- Introdução: Padrões de acessibilidade WCAG e eMAG

O documento internacional de recomendações de acessibilidade para

conteúdo web, WCAG, possui 4 princípios que são a base para a
acessibilidade web, sendo eles:
1. Perceptível: as informações e componentes de interface devem ser
apresentadas de forma que o usuário possa percebê-las usando um
de seus sentidos;
2. Operável: os componentes de interface e navegação devem ser
operáveis e não podem exigir do usuário uma interação de que ele
não possa executar;
3. Compreensível: a informação e a operação dos componentes da
interface de usuário devem exigir do usuário uma compreensão do
usuário, não acima de suas capacidades; e
4. Robusto: o conteúdo deve ser robusto o bastante para permitir que
uma interpretação confiável por uma vasta quantidade de agentes de
usuário, incluindo tecnologias assistivas.
O documento do eMAG, do governo federal, foi baseado no WCAG e
em uma releitura das diretrizes de Portugal, Irlanda, Canadá e EUA.
 BOAS PRÁTICAS DE ACESSIBILIDADE PARA SISTEMAS WEB

O documento do eMAG apresenta as seguintes seções :

Marcação, Comportamento(DOM), Conteúdo/Informação,
Apresentação/Design, Multimídia e Formulário. Neste curso
daremos mais ênfase aos formulários, isso porque as equipes
da infoTIC trabalham com sistemas WEB da UFRJ que utilizam
com frequência formulários. As seções de apresentação e
multimídia serão abordadas mas não com a mesma
profundidade. De acordo com a legislação brasileira, portais do
governo devem ser acessíveis.

Lei nº 12.527, de 18 de novembro de 2011 (Lei de Acesso à

Informação), que no seu artigo 8º, parágrafo 3º, inciso VIII
preconiza que: “Os sítios de que trata o § 2º deverão, na
forma de regulamento, atender, entre outros, aos seguintes
requisitos: (…) adotar as medidas necessárias para garantir
a acessibilidade de conteúdo para pessoas com
deficiência”.
 BOAS PRÁTICAS DE ACESSIBILIDADE PARA SISTEMAS WEB

Algumas pessoas possuem deficiência motora, auditiva ou visual

e precisam navegar pelo sistema através de leitores de tela ou
teclado adaptado. A navegação web por leitores de tela
funciona de três formas: leitura de toda a página, leitura de
links e leitura de cabeçalhos. Seu HTML deve estar bem
estruturado, limpo e semântico. O HTML5 possui elementos
que ajudam o usuário com necessidades especiais a reconhecer
que tipo de conteúdo ele está navegando, exemplo: <header>,
<main>, <article>, <detail>, <video>, <figure> dentre outros.

É importante estabelecer uma organização lógica por blocos de

conteúdo em um site, tornando-o fácil de navegar e
compreender. As divisões de blocos de conteúdo mais comuns
são "topo", "conteúdo", "menu" e "rodapé". Nas páginas
internas deve-se manter uma mesma divisão para que o usuário
se familiarize mais rapidamente com a estrutura do site, que
deverá ser padronizada. É recomendado também um mapa do
site e uso de Breadcumbs.
 BOAS PRÁTICAS DE ACESSIBILIDADE PARA SISTEMAS WEB

Deve-se criar seu HTML com uma sequência lógica de leitura

para percorrer links, controles de formulários e objetos. Essa
sequência é determinada pela ordem que se encontra no código
HTML.

Os cabeçalhos (títulos) em HTML são representados pelas tags

< h1> até < h6> . Assim, as tags < h1>, < h2>, < h3>, < h4>, <
h5 > e < h6> informam ao navegador que aquele elemento trata-
se de um cabeçalho. O h1 deve ser o título principal da página.

Devem existir atalhos para, no mínimo, ir ao início do

conteúdo, ao início do menu e ao campo de busca. De
acordo com o documento da W3C na sua versão mais atual,
WCAG 2.1, é importante ter âncoras de acesso no início de
cada página, para que o usuário possa ser redirecionado para o
conteúdo principal, pelo menos.

Eventos que funcionam somente pelo mouse são um grande

problema para a acessibilidade, pois nem todas as pessoas
conseguem utilizá-lo.
 BOAS PRÁTICAS DE ACESSIBILIDADE PARA SISTEMAS WEB

Na figura abaixo temos um exemplo de utilização de HTML5

semântico e ARIA roles. A utilização de elementos semânticos
do HTML5 não é suficiente para garantir a acessibilidade, então
WAI-ARIA landmarks roles garantem que todas as tecnologias
assistivas poderão interpretar as informações.

Os landmark roles do ARIA são: banner, complementary,

contentinfo, main, navigation e search.
 BOAS PRÁTICAS DE ACESSIBILIDADE PARA SISTEMAS WEB

O Tabindex é um atributo global que indica que um elemento pode receber foco. Este atributo
permite com que acesse o conteúdo da página pela tecla TAB. Segue abaixo elementos HTML que
não necessitam de Tabindex e que normalmente já aparecem em sequência do uso da tecla TAB do
teclado:

<a>
<link>
<button>
<input>
<select>
<textarea>

Tabindex=”0” - Elemento entra em foco, que por padrão não está em foco. Exemplo, inserir
tabindex=”0” em uma div interativa. Tabindex=”-1” esconde elementos da sequência, por exemplo,
esconder da sequência uma modal que está no código.
 BOAS PRÁTICAS DE ACESSIBILIDADE PARA SISTEMAS WEB

De acordo com a W3C, imagens e vídeos precisam ter descrição alternativa. Imagens utilizam a tag
ALT e vídeos podem ter descrição alternativa em áudio e texto. As recomendações da WCAG
também citam que deve haver uma ferramenta de tradução para libras nos vídeos.

Além disso a W3C recomenda que as páginas de sistemas web ou sites tenham uma área de ajuda.
Exemplo, o label do formulário que direcione para página de ajuda.

<form action="test.html">
<label for="test">Test control
<a href="help.html" target="_blank">Help</a></label>
<input type="text" name="test" id="test" />
</form>

Formulários acessíveis são muito importantes para as equipes da infoTIC, pois os sistemas
normalmente possuem diversos formulários. É recomendado que os desenvolvedores evitem forms
muito extensos e confusos. É importante seguir uma sequência lógica no formulário e deixá-lo
acessível. Leia este documento do governo federal sobre formulários acessíveis.
 BOAS PRÁTICAS DE ACESSIBILIDADE PARA SISTEMAS WEB

A cartilha técnica do eMag apresenta as seguintes recomendações:

●
Desenvolver código em camadas de conteúdo, apresentação e comportamento;

●
Evite utilizar elementos obsoletos ou em desuso , consulte a lista completa no sítio da W3C;

●
Utilizar arquivos externos para as folhas de estilo e javascript;

●
Limitar o número de requisições HTTP;

●
Evitar recurso de quadros frame;

●
Evitar uso de Popups;

●
Deixar seu código documentado;

●
Utilizar URLS amigáveis;
 BOAS PRÁTICAS DE ACESSIBILIDADE PARA SISTEMAS WEB

●
URLS devem funcionar sem “WWW”;

●
Evite a utilização desnecessária de elementos HTML e class;

●
Não utilize tabelas para layouts;

●
Declare o doctype corretamente na página (strict, transitional ou frameset);

●
Declare o idioma principal da página;

●
Os títulos das páginas devem ser relevantes e presentes em todas elas;

●
Descreva a codificação de caractéres, sendo que a recomendada pela W3C é unicode (utf-8);

●
Páginas devem ser compreendidas com CSS e javascript desabilitados;

●
Nomeie classes e IDS pela sua função, de preferência utilizando letras;

●
Utilize preferencialmente unidades de tamanho relativas (em e %);
 BOAS PRÁTICAS DE ACESSIBILIDADE PARA SISTEMAS WEB

●
Forneça alternativa ao conteúdo script através do NOSCRIPT;

●
Utilize documentos acessíveis;

●
O usuário pode recusar o uso de cookies sem afetar a usabilidade;

●
Avalie a real necessidade de utilização de plugins, caso utilize, disponibilizar link para
download;
 BOAS PRÁTICAS DE ACESSIBILIDADE PARA SISTEMAS WEB

A utilização de uma lista de verificação pode ajudar o desenvolvedor a conferir se todas as

recomendações foram seguidas, segue abaixo exemplo de lista de verificação:

1. A página usa doctype correto?

2.A página usa codificação de caracteres correto?
3. A página usa codificação válida?
4. As folhas de estilo CSS são válidas?
5.Há declarações de classes e IDS desnecessárias?
6.O código está bem estruturado?
7.Há links quebrados?
8.Qual a performance/velocidade de carregamento da página?
9. A página utiliza URLS amigáveis?
10.URLS funcionam sem WWW?
11.Existem erros de javascript?
12.A página funciona com CSS e javascript desabilitado?
13.Contraste de cores é suficiente?
14. A página funciona em dispositivos portáteis?
 BOAS PRÁTICAS DE ACESSIBILIDADE PARA SISTEMAS WEB

Bloco 2 - Orientações de uso em sistemas da

infoTIC:

Utilize o menu de acessibilidade disponível no

NIVi. Utilize idioma principal da página no início do
html: <html lang="pt-BR"> .

Utilizar HTML5 semântico e WAI-ARIA roles.

Utilize doctype strict no início da paǵina:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML
4.01//EN”http://www.w3.org/TR/html4/strict.dtd”>

Descreva a codificação de caracteres:

<meta http-equiv=”Content-Type” content=”text/
html;charset=utf-8”>

Utilize alt="" em todas as imagens para descrevê-

las de forma detalhada. Exemplo: <img src="/."
alt="imagem-de-um-cachorro-sentado"/>
 BOAS PRÁTICAS DE ACESSIBILIDADE PARA SISTEMAS WEB

Utilize o helpinfotic em todas as páginas. Usar table Summary

em tabelas.
Descreva links de forma clara e sucinta:

<p><a href="notici5125.html">Leia mais notícias sobre Educação

Superior</a> </p>

Utilize Label, FIELDSET, LEGEND e OPTGROUP nos

formulários de forma correta. Exemplo de formulário acessível:

<form id="form" method="post" action="enviar.php">

<fieldset><legend>Dados para Contato</legend>
<label for="nome">Nome:<input type="text" name="nome" id="nome"
value="*" /></label>
<label for="email">E-mail:<input type="text" name="email" id="email"
value="*" /></label>
<label for="assunto">Assunto:<input type="text" name="assunto"
id="assunto" value="*" /></label>
<label for="msg">Mensagem:<textarea rows="6" cols="500" name="msg"
id="msg">*</textarea></label>
<input type="submit" value="Enviar Mensagem" id="enviar"
/></fieldset></form>
 BOAS PRÁTICAS DE ACESSIBILIDADE PARA SISTEMAS WEB

Realize testes de acessibilidade no sistema durante as fases

de desenvolvimento através das seguintes ferramentas:

ASES WEB – Avaliador

Automático de Acessibilidade
http://asesweb.governoeletronico.gov.br (eMAG (Brasileiro) )

Access Monitor
http://www.acessibilidade.gov.pt/access
monitor/
WCAG 1.0 (Internacional)
WCAG 2.0 (Internacional)

Achecker
http://achecker.ca/checker/index.php WCAG 1.0 (Internacional)
WCAG 2.0 (Internacional)
BITV 1.0 (Alemão)
Section 508 (Americano)
Stanca Act (Italiano)
Material produzido pelo Núcleo de Identidade Visual da InfoTIC

Referências

http://www.acessibilidadelegal.com/13-formularios.php

http://www.w3c.br/traducoes/wcag/wcag21-pt-BR/

https://www.governodigital.gov.br/documentos-e-arquivos/formularios-
acessiveis.pdf

http://emag.governoeletronico.gov.br/

http://epwg.governoeletronico.gov.br/cartilha-codificacao

Intercon 2018 – Quem se importa com acessibilidade na web? Com

Maurício Maujor, https://youtu.be/pjT59n56xqo