Posts

Lista de checagem para acessibilidade de sites na internet

A lista de checagem (checklist) de acessibilidade é  muito importante para qualquer pessoa que esteja envolvida no desenvolvimento de sites e sistemas baseados na web, e principalmente que deseja ter seu trabalho acessível para o maior número possível de pessoas (incluindo portadores de qualquer tipo de deficiência visual, motora ou outras), seja por questões de negócios ou por pura responsabilidade social.

O objetivo da criação deste documento era desenvolver uma simples lista de itens (recomendações) que quando seguidos corretamente garantam a acessibilidade do projeto, sem maiores complicações. O resultado foi um documento relativamente curto mas muito eficiente em seu propósito.




Marcação (HTML)

  • Sempre separe estrutura de apresentação, e use marcação adequada para a estrutura. Exemplo: Use <ul> para uma lista não ordenada ao invés de inserir uma quebra de linha após cada item utilizando a tag <br>.
  • Cabeçalhos do HTML como <h1><h2><h3> e assim por diante são muito úteis para usuários sem visão. Marque adequadamente as seções da página e o corpo do documento com cabeçalhos semânticos ao invés de fazer por CSS com que outro elemento se pareça com um título.
  • Sempre dê títulos descritivos e com significado preciso para cada página do site utilizando a tag <title>.
  • Indique o idioma principal do documento usando o atributo lang na tag <html>, também o utilize em outras tags do documento caso apresentarem conteúdo em idioma diferente do principal. Exemplo: <span lang="es">Hola</span> significa “Olá”.
  • Forneça um link “Pular para o conteúdo” no topo do documento para que seja possível pular toda a navegação e ir direto para o conteúdo.
  • Sempre indique cabeçalhos em tabelas usando a tag <th>, e associe todas as células a seus respectivos cabeçalhos.
  • Assegure-se de oferecer uma ordem lógica para a navegação com tecla tab utilizando o atributo tabindex. Porém se o código HTML já estiver na ordem adequada não é preciso utilizar este atributo.




Aparência Visual do Conteúdo

  • Certifique-se que a página continua utilizável com as imagens desabilitadas. (Isso inclui verificar se o contraste continua suficiente para leitura quando as imagens de fundo não são carregadas).
  • Certifique-se que a página se mantém usável quando o usuário aumenta o texto até duas vezes o tamanho original.
  • Certifique-se que cada elemento na página possa ser alcançado e controlado pelo teclado.
  • Sempre que possível escreva cabeçalhos descritivos e textos de links que podem ser compreendidos fora do contexto (isso mesmo, nada de links “clique aqui”).
  • Assegure-se que seu conteúdo tem bom contraste com o fundo, considerando também usuários daltônicos ou com pouca visão.
  • Não use elementos que pisquem mais de três vezes por segundo (ou simplesmente não use elementos que pisquem).
  • Não esconda o indicador de foco (geralmente uma borda pontilhada em volta do elemento em foco). Quando um usuário usar a tecla tab para navegar deve ficar aparente qual elemento está em foco.
  • Não exija que os usuários percebam fontes, cores ou outros estilos visuais para entender o significado. Nada de “A palavra destacada no parágrafo anterior é a mais importante”, ou “Itens marcados em vermelho são erros e precisam ser corrigidos”, a menos que a palavra ou itens sejam indicados de algum outro modo, preferencialmente com marcação adequada.

Conteúdo Dinâmico

  • Não use eventos em JavaScript que alterem radicalmente a página ou carreguem uma página inteiramente nova quando acionados, não importa se “AJAX está na moda”.

Imagens e Multimídia

  • Assegure-se que todas as imagens possuam o atributo alt para descrevê-la, deixando o texto em branco caso a imagem seja apenas decorativa e não tiver significado no contexto, o código fica assim: alt="".
  • Adicione o atributo alt mesmo que as imagens sejam também links.
  • Seja breve com o conteúdo do atributo alt (Exemplo: “Catedral de Notre Dame”), mas forneça detalhes quando eles derem significado dentro do contexto (Exemplo: “Filho em pé com sua mãe nos braços”).
  • Forneça transcrições, legendas e/ou tradução em linguagem de sinais para todo conteúdo de áudio e vídeo com falas.
  • Forneça uma versão descrita de um vídeo quando a descrição é necessária para usuários sem visão entenderem o conteúdo (o áudio descrito pode ser distribuído com o conteúdo do vídeo ou como um arquivo de áudio apenas).
  • Certifique-se que todos os vídeos, caso não iniciem automaticamente, tenham um controle de início acessível.
  • Quando texto real pode ser renderizado pelo navegador tão bem como apresentado em uma imagem, evite usar imagens para o texto.
  • Evite Captchas (aqueles campos que pedem para que você escreva o que aparece na imagem) a todo custo. No entanto se você realmente não tem saída forneça um Captcha alternativo em áudio. Uma boa solução é o reCAPTCHA.

Formulários

  • Sempre rotule todos os campos de formulários com a tag <label>. Se um campo do formulário não tiver texto específico de rotulo, adicione um e o esconda por CSS, ou use o atributo title.
  • Use a tag de agrupamento de campos <fieldset> com tags de legenda <legend> para associar com campos de seleção e caixas de checagem (checkbox). Exemplo: Considerando um campo que pergunta o sexo do usuário e oferece as opções “Masculino” e “Feminino”, o label “Sexo:” ficaria dentro de uma tag <legend>, que por sua vez junto com os outros dois elementos ficaria dentro da tag <fieldset>.
  • Identifique todos os erros de validação de formulário (indo além de apenas imagens ou ícones), e coloque a notificação de erro próxima ao campo correspondente ou em destaque no topo da página com um link para o campo em questão.
  • Quando necessário forneça links de ajuda ou instruções sobre como preencher os campos do formulário.
  • Não permita que os usuários completem ações importantes sem uma confirmação, ou pior ainda, sem a possibilidade de desfazerem.
  • Evite utilizar elementos do HTML de formas não semânticas, como elementos de formulários para navegação, links para envio de formulários e o uso incorreto mais famoso de todos: tabelas para formatação do layout.

Testando

  • Valide sua marcação com o validador do W3C. Se sua página não passar no teste pode ser sinal de erros de semântica no HTML ou mesmo erros de escrita.
  • Teste todas as páginas com simuladores de daltonismo como o Color Oracle e o Vischeck.
  • Teste todas as páginas com um avaliador de acessibilidade, mas apenas após fazer tudo o que pode para assegurar a acessibilidade da página (mais especificamente, seguir todas as recomendações anteriores).
  • E mesmo assim, se possível, tenha suas páginas analisadas por um perito em acessibilidade, sempre há algo que pode ser melhorado.

Fonte: MeioBit

Gostou da postagem? Foi útil para você? Então, considere fazer uma doação PIX para nossa edição.

E, precisando de ajuda, clique aqui e saiba como podemos te ajudar.

 

O que é responsive web design?

Responsive Web Design é uma das soluções técnicas para resolver o problema de vários dispositivos e resoluções. Programar um site de forma que os elementos que o compõem se adaptem automaticamente à largura de tela do dispositivo no qual ele está sendo visualizado.




Um design responsivo inclui:

  • Adaptar o layout da página de acordo com a resolução em que está sendo visualizada.
  • Redimensionar as imagens automaticamente para que caibam na tela e para que não sobrecarreguem a transferência de dados em um celular, por exemplo.
  • Simplificar elementos da tela para dispositivos móveis, onde o usuário normalmente tem menos tempo e menos atenção durante a navegação.
  • Ocultar elementos desnecessários nos dispositivos menores.
  • Adaptar tamanho de botões e links para interfaces touch onde o ponteiro do mouse é substituído pelo dedo do usuário.
  • Utilizar de forma inteligente recursos mobile como geolocalização e mudança na orientação do aparelho (horizontal ou vertical).

Uma variação do “Responsive Web Design” é o “Adaptive Web Design”, uma versão um pouco simplificada da primeira. A diferença, no segundo caso, é que o layout se adapta para três ou quatro larguras de tela específicas – e não pixel a pixel, como no primeiro caso.

Gostou da postagem? Foi útil para você? Então, considere fazer uma doação PIX para nossa edição.

E, precisando de ajuda, clique aqui e saiba como podemos te ajudar.

 

Internet sua aliada para o SUCESSO

Com o crescimento atual da internet e mais ainda a popularização das redes sociais, nossos negócios ganharam um aliado muito importante, uma vez que a web se tornou um importante canal de comunicação entre o negócio e os consumidores, otimizando os recursos de atendimento ao cliente. Isso permitiu ao navegante poder falar o que quer e o que pensa sobre produtos e empresas e se as empresas não estiverem preparadas, poderão transformar esse aliado em “inimigo”.

Aspectos como webdesign, usabilidade, monitoramento de redes sociais e acessibilidade, devem ser levados em consideração, sem perder o seu foco do negócio, mas direcioná-lo para o usuário (cliente), que é o seu maior patrimônio.




Na questão da usabilidade o site deve transmitir as informações com rapidez sem obstáculos nem incômodos, aumentando o grau de satisfação. Um bom projeto da arquitetura de informação; navegabilidade clara; rapidez no carregamento da página, são alguns dos itens que podem melhorar a usabilidade.

Na questão do monitoramento de redes sociais, significa estar atento ao que o usuários “fala” sobre os seus produtos ou serviços. E, quando o “comentário” não for favorável, estar pronto de imediato para fazer as devidas correções, dando satisfação a esse e outros consumidores.

Na questão da acessibilidade, essa não está ligada apenas aos deficientes visuais, mas a todas as pessoas com algum tipo de limitação: física, visual ou cognitiva. Além desse público a acessibilidade diz também a acesso através de outros formatos como: celulares, palms, Tablets, ou mesmo outros sistemas operacionais, navegadores etc.

Ter um site  que atenda aos conceito, acima citados,  garante inúmeras vantagens às empresas. Entre elas o aumento de usuários; aumento de visibilidade em buscadores (Google, Yahoo etc); fácil acesso ao site e maior valor agregado a marca.

Então, se o seu site não atende aos seus objetivos, nós da MDesign estamos pronto para ajudá-lo faça um contato, teremos o maior prazer em ajudá-los.

Gostou da postagem? Foi útil para você? Então, considere fazer uma doação PIX para nossa edição.

E, precisando de ajuda, clique aqui e saiba como podemos te ajudar.