Projeto Redesign ACIC

ACIC
ASSOCIAÇÃO CATARINENSE PARA
INTEGRAÇÃO DO CEGO

ACIC

Fundada em 18/6/77 na cidade
de Florianópolis e é uma
organização não
governamental sem fins
lucrativos, criada e dirigida por
cegos.

Promover ações que visem a
inclusão social da pessoa
portadora de deficiência visual

Localização SC 401

IHC e Usabilidade

Human Computer Interation, ou Interação
Humano-Computador tem o foco primordial
localizado em duas partes distintas do
processo: a primeira no usuário e a
segunda no sistema.

A ligação entre o usuário e o sistema é
identificada como o meio de comunicação
entre estes dois entes: a interface.

Uma nova categoria de avaliação
ergonômica é criada, verificando a
qualidade e o grau de satisfação destas
interfaces: a Usabilidade.

Acessibilidade

Acessibilidade é definida como
“...condição para utilização, com
segurança e autonomia, total ou
assistida, dos espaços, mobiliários e
equipamentos urbanos, das
edificações, dos serviços de
transporte e dos dispositivos,
sistemas e meios de comunicação e
informação, por pessoa portadora de
deficiência ou com mobilidade
reduzida.” (Senado, 2007)

Requisitos para um
design acessível
O Virtual Vision pode ser utilizado para ler informações presentes na Internet mas algumas
regras devem ser consideradas para que os sites fiquem completamente acessíveis e nos
padrões mais utilizados na Web.

Regras para criação de páginas acessíveis pelo Virtual Vision:

1. Evitar a utilização de frames nas páginas: os frames não são proibidos, porém dificultam
demais a navegação dos Deficientes Visuais na Internet porque quando a página é carregada, o
primeiro frame é focado e, ao navegar com a tecla TAB o foco nos links permanece circulando
dentro do mesmo frame. Pressionando CTRL + TAB o usuário consegue passar para o próximo
frame e continuar a navegação, contudo ele não tem como saber que há outros frames na página
a não ser que você coloque um aviso no primeiro frame indicando que há outros frames na
página e que pressionando CTRL + TAB o usuário pode navegar por eles.

2. Colocar um descrição para cada imagem no quot;ALTquot; das mesmas: o leitor de telas lê essa
descrição. Isso ajuda a transmitir uma boa noção do conteúdo gráfico nas paginas.

3. Colocar um quot;linkquot; em todas as imagens da pagina: o Windows só da foco através do TAB, em
imagens que possuam quot;hyperlinksquot;. Esse link pode apontar para a própria pagina. Ele só tem que
estar presente na imagem para que o usuário consiga focá-la e, através da descrição colocada
no quot;ALTquot;, saber do que se trata.

Requisitos para um
design acessível

4. Não utilizar o recurso quot;IMAGE MAPquot;, ou seja, uma única imagem com um mapeamento para
diversos links: o leitor de telas não consegue ler o ALT dos links de um quot;IMAGE MAPquot;.

5. Evitar o uso de quot;applets javaquot;: os applets java não são proibidos porém, para serem
acessíveis, precisam ser construídos de uma forma especial:

5.1. Precisam conter no canto superior esquerdo da janela do applet um aviso (este aviso pode
ser invisível ao usuário comum) indicando que o usuário esta dentro do applet e dizendo o que
este applet faz e como opera-lo.

5.2. Ao lado de cada campo do applet, colocar um label invisível com a descrição do campo.

Basicamente, estas são as cinco regras que permitem criar páginas totalmente acessíveis aos
deficientes visuais.

Código atual

<html>

<head>
<meta http-equiv=quot;Content-Languagequot; content=quot;pt-brquot;>
<meta http-equiv=quot;Content-Typequot; content=quot;text/html; charset=windows-1252quot;>
<meta name=quot;GENERATORquot; content=quot;Namo WebEditor v5.0(Trial)quot;>
<meta name=quot;ProgIdquot; content=quot;FrontPage.Editor.Documentquot;>
<title>ACIC - Missão</title>
<meta name=quot;authorquot; content=quot;123Net.com.brquot;>
</head>

<body text=quot;#008000quot; link=quot;#008000quot; vlink=quot;#008000quot; alink=quot;#008000quot; topmargin=quot;0quot; leftmargin=quot;0quot;>

<table border=quot;0quot; width=quot;100%quot; background=quot;images/banner_topo.jpgquot; height=quot;100quot;>
<tr>

<td width=quot;100%quot; height=quot;96quot;> 
<p> </p>
</td>
</tr>
</table>
<table border=quot;0quot; width=quot;100%quot;>
<tr>
<td width=quot;100%quot;>
<iframe src ='menu.html' width='800' height='26' frameborder='0' border='0' marginheight='0' marginwidth='0' scrolling='no'
></iframe>
</td>

</tr>

Código ideal

@charset quot;utf-8quot;; <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Transitional//ENquot;
/* CSS Document */ quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdquot;>
<html xmlns=quot;http://www.w3.org/1999/xhtmlquot;>
body { <link href=quot;estilo.cssquot; rel=quot;stylesheetquot; type=quot;text/cssquot; />
font:12px quot;Trebuchet MSquot;, quot;Myriad Proquot;; <head>
font-variant:normal; <meta http-equiv=quot;Content-Typequot; content=quot;text/html; charset=utf-8quot; />
text-decoration:none;
color:#000000; <title>Untitled Document</title>
} </head>

a{color:#000000; text-decoration:none;} <body>
a:hover{color:#FF0000;}
<div id=quot;sitequot;>
#site{
width:1024px; <div id=quot;topoquot;>
height:768px;
margin:0; <div class=quot;marcaquot;>
float:left;
position:relative;
} </div>

#topo{ </div>
width:1024px;
height:130px; </div>
margin:0;
float:left; </body>

Usar CSS+HTML, ou seja, montar o site todo no código do CSS e
depois estruturar o site por meio de DIV

Projeto Redesign ACIC

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a Projeto Redesign ACIC

Semelhante a Projeto Redesign ACIC (20)

Projeto Redesign ACIC