Manual de Utilização dos Modelos de Páginas Acessíveis



A acessibilidade digital é a capacidade de um produto ser flexível o suficiente para atender às necessidades e preferências do maior número possível de pessoas, além de ser compatível com tecnologias assistivas usadas por pessoas com necessidades especiais. Acessibilidade na Web significa que qualquer pessoa, utilizando qualquer tipo de tecnologia de navegação - navegadores gráficos, textuais, especiais para sistemas de computação móvel, etc. - deve ser capaz de visitar e interagir com qualquer site, compreendendo inteiramente as informações nele apresentadas. (DIAS, Cláudia. Usabilidade na Web - criando portais mais acessíveis. RJ: Alta Books, 2003).

Procurando apoiar a construção de páginas acessíveis, estamos disponibilizando um conjunto de modelos de sites que podem ser utilizados em suas disciplinas. Para cada modelo, está sendo disponibilizado o arquivo HTML e o arquivo de estilo CSS.
 

Neste momento, estão sendo disponibilizados sete modelos de páginas de disciplinas e três modelos de agenda. Neste documento você encontrará também um pequeno manual de instruções de utilização dos modelos, bem como uma seção para as perguntas mais freqüentes que será atualizada sempre que novas dúvidas forem surgindo. Por fim, apresentamos também algumas sugestões de sites sobre formatação utilizando CSS e Acessibilidade Digital.
 

Os modelos foram criados utilizando unicamente HTML e CSS e toda a sua formatação pode ser alterada por quem for utilizá-los.
 

Se tiveres alguma sugestão ou dúvida entre em contato!


Modelos de Site e de Agenda


Modelos de site
  Ver Modelo 1  
  Salvar Modelo 1

  Ver Modelo 2  
  Salvar Modelo 2

  Ver Modelo 3  
  Salvar Modelo 3

  Ver Modelo 4  
  Salvar Modelo 4

  Ver Modelo 5  
  Salvar Modelo 5

  Ver Modelo 6  
  Salvar Modelo 6

  Ver Modelo 7  
  Salvar Modelo 7

Modelos de agenda
  Ver Agenda 1  
  Salvar Agenda 1

  Ver Agenda 2  
  Salvar Agenda 2

  Ver Agenda 3  
  Salvar Agenda 3

Topo

Manual de Instruções


Escolhendo um modelo

1- Escolha o modelo desejado.

2- Faça o download do arquivo zip. Este arquivo contêm todos os arquivos que compõem o modelo (HTML, CSS, GIF). Salve os arquivos em um mesmo diretório, pois é necessário que o arquivo de estilo esteja salvo no mesmo diretório dos arquivos HTML que utilizam o recurso da formatação por estilos.

3- Abra o arquivo HTML que você deseja utilizar, em um editor HTML. Para a construção dos modelos foram utilizados o FrontPage 2000 e o Nestcape Composer 7.0, podendo haver alterações de formatação em outros editores (ou em outras versões destes mesmos editores).



Editando um modelo

1- A inclusão de informações no arquivo HTML pode ser realizada tanto no modo código quanto no modo gráfico. No entanto, as definições que incluam ou alterem tags do HTML (como tamanho de fonte, cor, parágrafo, etc.), devem ser especificadas no arquivo CSS do modelo. Estas alterações não devem ser feitas no código fonte HTML.

2- Existem duas formas de se fazer a edição de uma tag no arquivo CSS:


a) Alteração do tamanho e cor de fonte diretamente no código:

Antes da alteração:

Código de formatação de estilo de título

Depois da alteração:

Código de formatação de estilo de título alterado

b) Alteração do tamanho e cor de fonte através da janela de estilos (FrontPage):

Selecione a opção Estilo na janela Formatar do menu:

Tela de um Editor HTML com a opção Formatar Estilo selecionada

Selecione a tag que será alterada, em seguida clique na opção Modificar:


Janela de Formatação de Estilo




Em seguida clique na opção Formatar e edite o estilo da tag escolhida:

Janela da opção Modificar Estilo

Assim que a formatação da tag é concluída, as alterações são automaticamente atualizadas no código.

Utilizando qualquer um dos dois processos apresentados acima (alteração via código ou por meio da janela de estilo), você pode além de editar as tags já existentes, criar novas tags, conforme achar necessário.


Atenção

Para visualizar as alterações é necessário salvar o arquivo CSS e dar um Refresh no documento HTML.


Escolhendo um modelo de Agenda ou Cronograma

Para inserir um dos modelos de tabela na agenda da sua página, é necessário acessar a página onde está a tabela, copiar o código e colá-lo no arquivo HTML onde vai ficar a agenda do site. Após é necessário abrir o arquivo CSS responsável pela formatação da tabela, copiar todo o código e inserir no arquivo CSS da sua página.

Não esqueça de que o código acima é o código da tabela, ainda falta copiar o código do arquivo CSS que está no diretório da tabela escolhida e colar no arquivo CSS da sua página. Não se preocupe pois os modelos não tem tags de tabela previamente salvos, as tags de tabela estão apenas nos arquivos CSS dos modelos de agendas.


Atenção

Ao copiar o código da tabela, não leve todo o código da página mas sim tudo o que estiver entre <table> e </table>, inclusive.

Exemplo:


Tela de um dos modelos de agenda

(......)

<table>
<thead>

<tr>
<th>&nbsp;DOM&nbsp;&nbsp; </th>
<th>&nbsp;SEG&nbsp;&nbsp; </th>
<th>&nbsp;TER&nbsp;&nbsp; </th>
<th>&nbsp;QUA&nbsp;&nbsp; </th>
<th>&nbsp;QUI&nbsp;&nbsp; </th>
<th>&nbsp;SEX&nbsp;&nbsp; </th>
<th>&nbsp;SAB&nbsp;&nbsp; </th>
</tr>

<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
</tr>

<tr>
<td>06</td>
<td>07</td>
<td>08</td>
<td>09</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>

<tr>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</th>
<td>18</td>
<td>19</td>
</tr>

<tr>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
</tr>

<tr>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td</td>
<td></td>
</tr>
</thead>
</table>

     (......)

Criando uma nova tabela

Estando no editor gráfico, faça a sua tabela diretamente no documento. Preencha as informações necessárias, sem especificar nenhuma formatação de célula ou de texto. Lembrando, estas informações devem estar no arquivo CSS e não incorporadas no arquivo HTML.

Para as formatações, edite o arquivo CSS para fazer as indicações das tags th e td que são responsáveis pelo cabeçalho (th) e pelas demais células (td) da tabela. A saber, a maioria dos editores criam tabelas somente com as especificações de td. Assim, devemos indicar as informações de th e td e após informar quais células correspondem ao cabeçalho.

Na janela Estilo, no Campo Lista, escolha a opção Marcas HTML. Após, na definição dos estilos escolha a tag th e clique na opção modificar e indique as alterações de formatação necessárias. Faça o mesmo para a tag td.

Finalmente, no HTML, substitua as indicações de td por th das células que devem compor o cabeçalho.


Publicando seu site

Para que a formatação da página utilizando CSS funcione, é necessário que o arquivo CSS esteja publicado no mesmo diretório dos arquivos HTML.



Topo

Perguntas mais Freqüentes

1) Por que ter páginas acessíveis?

Ao publicarmos um site na Web, precisamos lembrar que é muito difícil, quando não impossível, delimitar e conhecer o seu público-alvo a ponto de se ter certeza de que ninguém terá dificuldades em acessar o conteúdo que foi publicado.

Diante desta realidade, tornar os sites acessíveis passa a ser uma alternativa para garantir que o material que está sendo disponibilizado poderá ser acessado por um maior número de pessoas sem grandes dificuldades.

Cabe salientar que tornar um site totalmente acessível talvez seja impossível pois muitos são os fatores que podem impedir o acesso de determinadas pessoas ou de pessoas em determinadas situações. No entanto, ao ser construído um site que considere regras de acessibilidade demonstra respeito pela diversidade de usuários que há na Internet e seus direitos ao acesso à informação.



2) Por que as alterações de formatação devem ser feitas no arquivo CSS e não diretamente no arquivo HTML?

Ao utilizarmos folhas de estilo para fazer a formatação de uma página, permitimos ao usuário criar sua própria folha de estilos para acessar o conteúdo Web. Deste modo, o nosso arquivo HTML será visualizado de acordo com a folha de estilos default que for informado no browser do usuário. Daí a importância deste recurso para pessoas que apresentam baixa visão ou algum algum outro problema como dificuldade em diferenciar cores, por exemplo.

Esta recomendação é trabalhada no Ponto de verificação 3.3 das Recomendações de Acessibilidade na Web do W3C que diz:

"Utilizar folhas de estilo para controlar a paginação (disposição em página) e a apresentação. Use as folhas de estilo para controlar o layout das páginas. Os elementos FONT e BASEFONT estão ultrapassados no HTML 4.0. Use folha de estilo para diagramar e formatar cor, tamanho e tipo de fonte."


3) Quando devo editar o arquivo CSS?


Sempre que quisermos alterar qualquer aspecto da formatação do site devemos editar o arquivo CSS. Nos modelos apresentados neste documento a formatação foi feita utilizando apenas CSS. No início pode não parecer ser simples mas com a prática, com a utilização de estilos, esta tarefa passa a não apresentar dificuldades.


4) Como posso testar minha página?


Existem programas verificadores de acessibilidade. Estes analisam todo o código da página e verificam a conformidade do uso do HTML com as regras definidas no W3C. Na seção "Links Interessantes" há links para os verificadores Bobby, Da Silva e Taw.


5) Ocorrem alterações na apresentação do arquivo, se este for visualizado através de browser diferentes?


Sim. Os modelos foram inicialmente testados no "Internet Explorer" e no "Netscape" e a apresentação não sofreu alterações. No "Mozilla" o tamanho da fonte e disposição de alguns elementos se apresentaram alterados, isso aconteceu, porque alguns elementos não possuíam unidades de medida relativas (em, %) as unidades foram substituídas e a partir de agora os modelos estão acessíveis também para visualização através do "Mozilla".


Topo

Links Interessantes

Maujor

Site projetado em CSS, apresenta tutoriais, dicas, exemplos, etc.
http://www.maujor.com

Recomendações de Acessibilidade do W3C

Site do W3C - - com as recomendações de acessibilidade para publicação de documentos na Web.(em Inglês)
http://www.w3.org/TR/WAI-WEBCONTENT

Recomendações de Acessibilidade do W3C

Tradução das recomendações de acessibilidade para publicação de documentos na Web por Cláudia Dias.
http://www.geocities.com/claudiaad/ acessibilidade_web.html


Acesso Brasil

Site da ONG Acesso Brasil, sociedade que busca promover e divulgar a acessibilidade.
http://www.acessobrasil.org.br

PRODAM

Setor da Companhia de Processamento de Dados do município de São Paulo que trata da Acessibilidade Digital
http://www.prodam.sp.gov.br/acess

SERPRO

Setor do Serviço Federal de Processamento de Dados que trata da Acessibilidade Digital
http://www.serpro.gov.br/acessibilidade

Acessibilidade Brasil - "daSilva"

Site da Acessibilidade Brasil, uma ONG que busca alternativas de promoção e divulgação da acessbilidade. Este site possui o único verificador de acessibilidade brasileiro o "daSilva".
http://www.tawdis.net

TAW

Este site possui um verificador de acessibilidade para documentos Web e, duas versões: uma on-line e outra para download. (em Espanhol)
http://www.tawdis.net

Bobby

Este site possui a versão on-line do primeiro verificador de acessibilidade na Web. Esta versão é free e avalia uma página de cada vez. (em Inglês)
http://www.cast.org/bobby




Topo

Para maiores Informações e contato

Dircelene Kur Evaldt - dirce@mgcore.com
Bolsista de Iniciação Científica do Projeto Ambiente computacional com suporte à Língua Brasileira de Sinais - Fase 2 - CNPQ.
Professora Orientadora: Profa. Márcia de Borba Campos - marciabc@inf.pucrs.br


Topo


Este site foi submetido ao "daSilva" (avaliador de acessibilidade desenvolvido pela Acessibilidade Brasil) e  recebeu um selo de aprovação nas três prioridades, conforme as Recomendações do W3C.  Ele também foi testado manualmente através do DosVox.

Selo de Aprovação da Acessibilidade Brasil com ligação para o site da ONG