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!
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
Salvar Agenda 1
Ver Agenda 2
Salvar Agenda 2
Ver Agenda 3
Salvar Agenda 3
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).
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:
Antes da alteração:
Depois da alteração:
Selecione a opção Estilo na janela Formatar do menu:
Selecione a tag que será alterada, em seguida clique na opção Modificar:
Em seguida clique na opção Formatar e edite o estilo da tag escolhida:
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.
Para visualizar as alterações é necessário salvar o arquivo CSS e dar um Refresh no documento HTML.
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.
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:
(......)
<table>
<thead>
<tr>
<th> DOM </th>
<th> SEG </th>
<th> TER </th>
<th> QUA </th>
<th> QUI </th>
<th> SEX </th>
<th> SAB </th>
</tr>
<tr>
<td> </td>
<td> </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>
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.
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.
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.
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."
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.
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.
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".
Site projetado em CSS, apresenta tutoriais, dicas, exemplos, etc.
http://www.maujor.com
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
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
Site da ONG Acesso Brasil, sociedade que busca promover e divulgar a
acessibilidade.
http://www.acessobrasil.org.br
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
Setor do Serviço Federal de Processamento de Dados que trata da Acessibilidade Digital
http://www.serpro.gov.br/acessibilidade
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
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
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
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
