segunda-feira, 16 de setembro de 2013

Tabelas de Dados Acessíveis

As tabelas de dados são muito utilizadas para mostrar informações facilmente, em sites não é diferente, quando podem ser visualizadas tudo bem, o problema mesmo é quando você não pode ler. Os leitores não conseguem lê-las de maneira adequada, então é preciso utilizar código limpo e específico, mostrarei alguns exemplos a seguir.

O primeiro passo para se fazer uma tabela de dados acessível é simplificar o código. Depois deve-se usar o atributo "summary", ele deve ficar dentro da tag table.
EX:
<table summary="Tabela de preços das hortaliças do mercado X">

Usa-se também a tag caption, para dar título à tabela. Ao contrário do summary, a tag caption é rendezirada pelo navigador.
EX:
<caption>Hortaliças</caption>

Além disso, usamos o elemento abbr, que é utilizado para abreviar um nome e para expandir uma abreviação, abaixo temos dois exemplos:

<th abbr="RG">Registro Geral</th>
 ou
<th><abbr title="Dynamic Host Configuration Protocol">DHCP</abbr></th>

No primeiro exemplo, o cabeçalho "Registro Geral" será lido pelo leitor de tela apenas no cabeçalho. Nas células onde estarão os conteúdos de Registro Geral, será lido apenas "RG", antes do conteúdo da célula.

No segundo exemplo, o cabeçalho "DHCP" será lido pelo leitor de tela apenas no cabeçalho. Nas células onde estarão os conteúdos de DHCP, será lida sua extensão "Dynamic Host Configuration Protocol", antes do conteúdo da célula.

Para cabeçalho é usado a tag <th>, que já deixa centralizado e em negrito.
Devemos identificar o cabeçalho com um id para referenciá-lo no atributo headers, que fica dentro da célula (td).
EX:

<th id="fruta">Fruta</th><th id="preco">Preço</th>
<td headers="fruta">Laranja</td><td headers="preco">5,00</td>

O headers deve ter o mesmo valor que o id do cabeçalho, assim o leitor de páginas repetirá o valor que você colocou antes de ler o conteúdo, no exemplo acima ele lerá: "fruta laranja, preço 5,00"

Há outra maneira de fazer a associação entre os nomes do cabeçalho e das células, usando o atributo scope dentro de th. 
EX:
<th scope="col">Fruta</th>
<th scope="col">Preço</th>
<td>Laranja</td><td>5,00</td>

Desta maneira fica implícito que a primeira coluna é a de FRUTA e a segunda é a de PREÇO, então deve-se colocar os elementos na ordem correta, caso contrário a tabela pode não fazer sentido.

Identificador axis.
É usado para associar um identificador id a uma célula, o leitor repete o conteúdo do axis sempre que for requisitado
EX:

<th id="portugues" axis="materia">Português</th>
e, na célula da tabela:
<td headers="portugues">7</td>
O leitor lerá: "Matéria Português 7"

As linhas de uma tabela <tr> podem ser agrupadas em cabeçalho (thead), corpo (tbody) e rodapé (tfoot), quando houver mais de um nível de cabeçalho.
EX:

<thead>Linhas de Cabeçalho</thead>
<tbody>Linhas do corpo da tabela e suas células </tbody>

segunda-feira, 9 de setembro de 2013

O que é conteúdo acessível?

      Muitas vezes ao falarmos em conteúdo acessível logo pensamos que significa apenas colocar o atributo "alt" nas imagens do site e pronto, seu conteúdo já é acessível. Mas não é por aí.
      Ao criar um conteúdo para web é necessário compreender que existem diversos tipos de deficiências, e não somente a visual, então o conteúdo deve ser também adaptado para pessoas que:
  • sejam incapazes de ver, ouvir, se deslocar, ou interpretar determinados tipos de informações;
  • tenham dificuldade em ler ou compreender textos;
  • não tenham um teclado ou mouse, ou não sejam capazes de utilizá-los;
  • possuam tela que apresenta apenas texto, ou com dimensões reduzidas, ou ainda uma conexão lenta com a Internet;
  • estejam com seus olhos, mãos ou ouvidos ocupados (por exemplo, em ambientes com excesso ou pouca luz, em um ambiente barulhento, etc);
  • possuam uma versão ultrapassada de navegador web, diferente dos habituais, um navegador por voz, ou um sistema operacional pouco convencional.

    Além do conteúdo escrito, claro, deve-se adaptar a mensagem que você quer passar para o usuário, tanto em imagens quanto em vídeos e sons diversos. Por exemplo, se existe uma imagem do planeta terra apenas ilustrativa:

    O conteúdo alternativo seria: "Imagem do planeta terra visto do espaço"
    Agora se essa imagem fosse um link que fosse para uma outra página com informação bem determinada acerca da geografia do planeta:
O conteúdo alternativo seria melhor aproveitado como: "Informações sobre a Terra"
      Dessa forma a ideia a ser passada é a mesma tanto para as pessoas com deficiência quanto para os outros usuários.Esses equivalentes textuais são bons também para sua página ser melhor rankeada nos motores de busca pois eles (pelo menos eu acho que ainda) não buscam as fotos de maneira visual, então quem tem uma foto com um conteúdo alternativo (no alt) tem vantagem.

      Além das fotos tem os vídeos, que devem conter legendas ou tradução em linguagem de sinais e também deve ser disponível a descrição sonora, para que os deficientes visuais possam entender o que acontece no vídeo.

      O design do site, literalmente onde o conteúdo vai ficar, deve ser considerado também, pois deve atender as pessoas com dificuldade motora ou que não estejam com mouse disponível (o site deve ser acessível utilizando a tecla TAB do tecaldo).

      Então em vez de sair programando um site deve-se lembrar que o público será muito maior se o conteúdo for acessível, tanto com imagens, vídeos ou sons, além de criar um design que seja de fácil compreensão e utilização.

Css Para Web Acessível

Olá galera, aqui estou eu novamente o/, para falar sobre como o css hoje é importante para a acessibilidade, então a partir de agora preste atenção hein!

É sempre importante lembrar que para ter um website acessível tem que ter uma codificação de html, após este pré-requisito é onde chegamos na codificação css que também é importante para a acessibilidade.
Neste momento surge a seguinte duvida: Mas como o css influencia na acessibilidade?
Veja bem alguns softwares leitores de tela já podem identificar elementos de formatação visual, ou seja já pode identificar os códigos que não foram declarados no html mas foram declarados no css, como cor e fonte.

Obs: Vale ressaltar que é sempre importante separar as camadas html, que geralmente é conteúdo em texto, da camada css, que é a formatação visual/layout.

Existe algumas outras maneiras de utilização de css acessível veja quais são:

Contraste

Sempre que desenvolver um website, sua paleta de cores deve existir um contraste entre os elementos de sua página web. Geralmente o que é recomendado é que, fundos e elementos devem possuir um contraste de pelo menos 4,5:1 para possuir uma melhor visualização.

Links

Vocês devem saber como é que funciona a estrutura e um link, mas é sempre bom relembrar como é. Um link sempre deve ser destacado e sempre quando um link for acessado o mesmo deve mudar de cor, uma outra recomendação é: só sublinhe textos caso ele seja um link.

Convulsões

Lembra-se do post anterior que falei sobre WCAG 2.0? Bom olha ele aqui novamente.
O que o WCAG 2.0 ressalta é que deve-se tomar bastante cuidado na criação de alguns conteúdos que piscam frequentemente e são muito luminosos.

Elementos com foco

O famoso TAB, destaque os elementos que recebem o foco e deixe de uma maneira organizada para que as pessoas que utilizam o teclado consigam navegar em seu website sem grandes problemas fazendo com que seu site seja acessível e bem estruturado.

Bom ai estão algumas dicas para que você desenvolvedor as utilize. Eu vou ficando por aqui galera até a próxima.

fonte: Tableless.

Ass:
Rodrigo Camurça.

segunda-feira, 2 de setembro de 2013

WCAG X Seção 508

Um Pouco Sobre WCAG:

Bom para não começar um texto falando siglas e não explicar o que significa já vou falando o significado de WCAG (Web Content Accessibility Guidelines) agora você fica responsavel por traduzi-la ;)!
Quem criou a WCAG foi a W3C (World Wide Web Consortium), WCAG foi um modo de criar um modelo de orientações a serem seguidas pelos desenvolvedores web, para criar sites acessíveis para todos.
Como assim todos? para pessoas com deficiência ex: visual, auditiva, cognitiva, motora etc.

Este modelo WCAG atualmente encotra-se na versão WCAG 2.0, porém foi criada em 1999 com a versão WCAG 1.0 que atualmente não é tão usada como a 2.0, vou falar agora alguns exemplos a serem seguidos para ter um site acessivel seguindo este modelo WCAG:
-Toda imagem deve ter um texto alternativo.
-Sempre quando colocar um videos, colocar legendas, áudio narrando.
Coloquei apenas dois exemplos pois no momento estou um pouco sem tempo pois tenho que trabalhar mais caso quiserem mais detalhes acessem : www.w3c.br .

Agora Um Pouco Sobre A Seção 508:

A Seção 508 é uma lei criada pelo governo dos Estados Unidos que fala sobre a inserção das pessoas com deficiência ex:  visual, auditiva, cognitiva, motora etc... Em todos os setores da tecnologia da informação.
Ou seja, é bem parecida com os padrões da WCAG 2.0, só que a seção 508 existem 16 normas a serem seguidas, e devem ser seguidas a rigor tem que estar dentro dessas 16 normas para obter o selo de Seção 508!
Como é para todos os setores da tecnologia da informação envolve tanto na criação de: software, hardware, equipamentos de telecomunicações e eletrônicos.

WCAG X Seção 508:

Veja bem vou fazer uma comparação simples pois a maneira como os dois funcionam são bem parecidas!
A grande diferença que existe um do outro é a seguinte:
Quando você, desenvolvedor, for desenvolver um site seguindo WCAG você não precisa seguir todas as normas criadas pela WCAG somente algumas, tornando o seu site acessível, ele não vai ser 100% acessível porém estará dentro do que a WCAG exige! 
Agora com a Seção 508 não tem "xorumelas" tem que seguir as 16 normas e se não seguir, pode esquecer não será reconhecido com os padrões Seção 508!

Bom até mais galera, qualquer coisa estou a disposição!

Ass: Rodrigo Camurça.

Design Universal


O Design Universal surgiu primeiramente para fins arquitetônicos nos anos 70, com o passar dos anos foi sendo adaptado aos mais diversos protudos e serviços até chegar aos sistemas de computador - mais específicamente, sistemas de internet.

Um sistema pode ser considerado acessível quando ele "visa atender simultaneamente todas as pessoas, com diferentes características antropométricas e sensoriais, de forma autônoma, segura e confortável, constituindo- se nos elementos ou soluções que compõem a acessibilidade”.Decreto nº 5.296 de 02 de Dezembro de 2004.

No Design universal, há 7 princípios que devem ser seguidos:
1- Igualitário: Deve servir a todos.
2- Adaptável: Pessoas com habilidades diferentes não devem sofrer ao utilizar.
3 - Óbvio: Deve ser de fácil entendimento, não deve requerer muita concentração para se entender a mensagem que se quer passar.
4 - Conhecido: A informação deve se adaptar ao receptor.
5 - Seguro: Serve para minimizar os riscos de possíveis acidentes ou ações não previstas.
6 - Sem esforço: Deve ser eficiente, causar o mínimo de fadiga.
7 - Abrangente: Deve ser apropriado para alcance e manipulação, independentemente da mobilidade do usuário.


Portanto, um sistema baseado no Design Universal deve atender todos os tipos de público, seja ele deficiente visual, auditivo ou com restrição de função motora, mesmo que isso leve à uma quantidade maior de código a ser pensado. Afinal, todo ser humano deve ser considerado de forma igual, assim como disse Aristóteles: "A verdadeira igualdade consiste em tratar-se igualmente os iguais e desigualmente os desiguais a medida em que se desigualem "

segunda-feira, 10 de junho de 2013

Microformatos

1 - Definição da Web Semântica:

 A Web Semântica (idéia) surgiu em 2001, quando Tim Berners Lee, James Hendler e Ora Lassila Publicaram um artigo na revista Scientific American, onde falavam que o futuro era permitir que os computadores entendessem as palavras quanto ao seu sentido, fazendo com que os textos introduzidos em um site sejam legíveis para as máquinas.
Dessa forma - no mundo redondo de Olly, claro - todas as informações seriam tratadas como dados, e não apenas textos, permitindo que pudessem ser procuradas e usadas facilmente, abrindo-se um leque infinito de novas possibilidades.
Bom, ainda não conseguimos esse feito mas estamos quase lá(mentira estamos longe), mas damos um passo significativo ao usarmos HTML5, que nos possibilita usar campos mais adequados para cada tipo de informação. Um exemplo disso é a tag <article></article> que deve conter um texto de autoria própria, um artigo, antigamente usava-se a tag <p></p> que apenas armazenava o texto e não o diferenciava de um texto do rodapé ou do menu. Hoje existe uma tag para cada coisa, tornando seu site muito mais semântico(com significado) para os motores de busca.

2- Definição de Microformatos:


Microformato é um conjunto de formatos abertos que foram criados ainda antes do html5 para proporcionar semântica às informações que você queira expor como por exemplo: informações de contato, eventos, licença etc.
Os Microformatos nada mais são do que tags com nomes específicos(você não pode mudá-los ao seu bel-prazer, meu bem) onde você apresenta as informações desejadas, mais abaixo eu dou exemplos de como usá-los.

3- Definição dos microformatos hCard e hCalendar:
O microformato hCard serve para mostrar suas informações com mais semântica, sejam elas pessoais ou de empresas.  No hCard é possível publicar nome, endereço, email, url de site e até foto(link).
Já o hCalendar serve para eventos, nele é possível mostrar o título do evento, o local, hora de início e fim, e descrição e tags para busca.
Ambos os microformatos por serem padronizados, podem ser acessíveis a outros sites ou programas como por exemplo as agendas do Google e da Apple.

4- Aplicar microformats para marcação de contato (hCard), e informações sobre evento (hCalendar):

Abaixo segue um exemplo de como se apresenta um hCard:






 E agora, o hCalendar:





Para fazer esses dois microformatos eu utilizei o site http://microformats.org
Lá é possível encontrar ferramentas que criam o código necessário para a ciração desses microformatos.


quinta-feira, 6 de junho de 2013