Projeto Redesign ACIC

ACICASSOCIAÇÃ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 é definida como “...condição para utilização, com segurança e autonomia, total ou assistida, dos espaços, mobiliários e equ ipamen tos u rbanos , das edif icaçõ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)

Acessibilidade

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 "ALT" 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 "link" em todas as imagens da pagina: o Windows só da foco através do TAB, em imagens que possuam "hyperlinks". 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 "ALT", saber do que se trata.

4. Não utilizar o recurso "IMAGE MAP", 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 "IMAGE MAP".

5. Evitar o uso de "applets java": 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.

Requisitos para um design acessível

Interface Atual

Primeira Proposta

Segunda Proposta

Proposta final

Código atual

<html>

<head><meta http-equiv="Content-Language" content="pt-br"><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"><meta name="GENERATOR" content="Namo WebEditor v5.0(Trial)"><meta name="ProgId" content="FrontPage.Editor.Document"><title>ACIC - Missão</title><meta name="author" content="123Net.com.br"></head>

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

<table border="0" width="100%" background="images/banner_topo.jpg" height="100"> <tr>

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

</tr>

Código ideal

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

@charset "utf-8";/* CSS Document */

body {font:12px "Trebuchet MS", "Myriad Pro";font-variant:normal;text-decoration:none;color:#000000;}

a{color:#000000; text-decoration:none;}a:hover{color:#FF0000;}

#site{width:1024px;height:768px;margin:0;float:left;position:relative;}

#topo{width:1024px;height:130px;margin:0;float:left;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><link href="estilo.css" rel="stylesheet" type="text/css" /><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title></head>

<body>

<div id="site">

<div id="topo"> <div class="marca"> </div> </div> </div>

</body>

Projeto Redesign ACIC

Technology

Transcript of Projeto Redesign ACIC