10 ótimas maneiras de tornar seu conteúdo portátil e acessível

Contente

• Acessibilidade não é um 'recurso'
• Definindo plataformas
• Manter o conteúdo portátil e acessível
• 1. Comece com HTML5
• 2. WAI-ARIA
• 3. Usando doctype
• 4. Tags de documentos HTML5
• 5. Links ruins
• 6. Imagens - ALT versus TITLE
• Deixe as pessoas saberem
• Resumo
• Reconhecimentos
• Recursos

Quando Kerie digita em seu iPhone, parece que está tocando flauta. Ela o segura perto do rosto e seus dedos se movem em um ritmo incrível. Ela termina de escrever e me entrega seu telefone para ler a mensagem que acabou de digitar. Ele tem ortografia e gramática perfeitas e foi digitado muito mais rapidamente do que eu poderia ter feito usando o teclado de toque do iPhone.

Kerie usa um aplicativo chamado Fleksy para ajudá-la a mover os dedos pela superfície do telefone em padrões que se transformam em palavras. Ela também lê notícias, ouve aplicativos de rádio, verifica o Twitter e procura horários de trens com seu telefone. Ela está completamente cega.

'Publicar' significa coisas diferentes para pessoas diferentes. Para algumas pessoas, significa produzir um volume físico de trabalho impresso. Outras pessoas associam a publicação à capacidade de distribuir trabalhos escritos por meio de dispositivos e aplicativos. Cada vez mais, as pessoas pensam em publicar como disponibilizar conteúdo para desfrutar em qualquer formato, seja isso significar enviar um artigo para um blog ou atualizar um post do Google Plus.

A realidade é que as expectativas variam entre os usuários e essas expectativas mudam com o tempo. Leitores que antes consumiam vorazmente a última postagem em um blog agora esperam poder ler essa postagem, ou qualquer artigo ou livro, onde e quando for conveniente para eles. Hoje, o conteúdo nos segue de um blog a Reeder em um telefone, Instapaper em um iPad e uma versão enviada por e-mail via Whispernet para um Kindle.

O fluxo de trabalho de leitura de cada pessoa é diferente e, para aqueles que exigem recursos de acessibilidade como leitor de tela, alto contraste ou texto ampliado, esse fluxo de trabalho é interrompido, às vezes de forma irreparável, quando os autores e editores deixam de considerar detalhes de formatação menores, mas necessários. Não pense nisso como "não marcar a caixa de acessibilidade". Em vez disso, perceba que você está efetivamente transformando seu conteúdo em uma caixa preta para muitos clientes em potencial.

Acessibilidade não é um 'recurso'

Embora seja verdade que os controles acessíveis são usados ​​por indivíduos com audição e visão reduzidas, há muitas outras pessoas que se beneficiam deles também. Alguém com deficiência visual ajusta o tamanho das fontes para ler o conteúdo em uma tela com mais facilidade. Uma pessoa daltônica aprecia a capacidade de ajustar a paleta de cores para que itens como o texto de advertência em vermelho realmente se destaquem. Pessoas com longos deslocamentos usam leitores de tela para ouvir os artigos lidos para elas. Falantes não nativos usam vídeo e áudio legendados para ajudá-los a entender um novo idioma. Todos esses cenários representam um escopo mais amplo para o seu conteúdo, experiência e empatia do usuário aprimoradas e, possivelmente, ainda mais receita.

Para uma ótima visão geral do que significa acessibilidade, consulte o artigo de Ian Hamilton.

Definindo plataformas

Vamos começar com algumas definições sobre em quais formatos podemos nos concentrar para tornar nosso conteúdo mais fácil de ler:

• HTML: Com HTML5, a web é um lugar ainda melhor para escritores e editores mostrarem seus trabalhos. Novas tags como artigo, seção, cabeçalho e rodapé agora são implementados em muitos navegadores e podem ser usados ​​de forma semi-confiável para adicionar contexto semântico à sua escrita. Além disso, o próximo módulo de página CSS3 também pode ser de interesse para aqueles que procuram uma experiência de leitura de página mais fixa para habilitar.
• EPUB: EPUB é o padrão oficial do International Digital Publishing Forum (IDPF). O EPUB3 foi aprovado em outubro de 2011 e permite que as publicações tenham um conteúdo mais estilizado e personalizável, mais próximo do que é compatível com HTML / CSS, ao invés das diretrizes anteriores, mais estáticas.
• MOBI: MOBI, abreviação de Mobipocket, é um formato usado pelo Kindle e outros leitores digitais. É menos personalizável novamente do que EPUB, mas nós o cobrimos aqui porque você pode usá-lo na publicação de conteúdo na Amazon, se desejar. De acordo com Robin Christopherson da AbilityNet, alguns modelos do Kindle são acessíveis para usuários cegos; no entanto, o aplicativo Kindle no iOS não é. KF8, o novo formato do Kindle, é atualmente compatível com o Kindle Fire e em breve será lançado para dispositivos de e-ink Kindle de última geração e aplicativos de leitura Kindle.
• PDF: PDF tornou-se uma entidade onipresente na web. Incluo aqui porque a maioria dos tablets tem uma boa tecnologia integrada para ler PDFs e habilitar tecnologia assistiva com eles. Com um PDF, o fator decisivo é como ele foi criado. De acordo com Alan Dalton, consultor de desenvolvimento de acessibilidade na Autoridade Nacional de Deficiência da Irlanda, "Você pode tornar PDFs acessíveis; no entanto, muitas pessoas não o fazem. Elas não percebem que suas ferramentas estão produzindo produtos ruins. Se eu pudesse, tudo o que fazemos seja HTML. " Navegação e acessibilidade à parte, os PDFs também não se adaptam bem a tamanhos diferentes, e qualquer pessoa que já tentou ler um PDF em um smartphone está familiarizado com os complicados beliscar, zoom e panorâmica necessários para fazer isso.

O que não se enquadra nesta categoria são os aplicativos que pegam seu conteúdo e o transformam em imagens grandes. Embora isso possa garantir que a aparência e o estilo sejam os mesmos em todas as plataformas, você está bloqueando muito do seu público ao mesmo tempo que cria um download muito pesado. Esse problema é agravado quando começamos a falar sobre telas de Retina e imagens de tamanho duplo. Para ter uma ideia de como é ser negado algo que você deseja ler (mas ainda assim terá que pagar por isso), consulte os comentários sobre os aplicativos do Play Banca serem quase todos inacessíveis via VoiceOver no iOS.

Para ver como são esses tipos de revistas para um usuário de tecnologia acessível, veja meus vídeos incorporados, que mostram a experiência frustrante de tentar ler essas revistas com um
ferramenta de acessibilidade, como VoiceOver:

Manter o conteúdo portátil e acessível

Focar em formatos portáteis nos permite lidar com nosso conteúdo para vivermos felizes em mais navegadores, telefones, dispositivos de leitura digital e aplicativos de leitura. O que precisamos fazer com nosso conteúdo para garantir que ele seja bem traduzido entre esses diferentes formatos, enquanto mantemos um estilo personalizado e uma ótima experiência?

Elaborei algumas diretrizes abaixo para pessoas que desejam que seu público seja o mais amplo possível e que não desejam bloquear seu conteúdo em uma caixa preta para muitos usuários. Essas técnicas podem ser aplicadas a tudo, desde postagens de blog a jornalismo de longa duração, a quaisquer outros trabalhos que você esteja considerando a autopublicação:

1. Comece com HTML5

Ao criar seus documentos inicialmente com HTML5, você terá menos com que se preocupar no futuro. A marcação HTML5 ajudará a manter seus documentos fáceis de navegar e de traduzir para outros formatos. Você fará muito menos 'retroajuste' de suas publicações em outros formatos se tiver informações semânticas desde o início.

2. WAI-ARIA

WAI-ARIA é a Iniciativa de Acessibilidade da Web - Conjunto de Aplicativos de Internet Ricos Acessíveis. É um conjunto de diretrizes criado pelo Grupo de Trabalho de Protocolos e Formatos (PFWG) da
o W3C. WAI-ARIA define uma maneira de tornar o conteúdo da web e aplicativos mais acessíveis para pessoas com deficiências e ajuda com conteúdo dinâmico e controles de interface de usuário avançados desenvolvidos com Ajax, HTML, JavaScript e tecnologias relacionadas. Algumas das técnicas neste artigo vêm das diretrizes WAI-ARIA e, embora este artigo não seja longo o suficiente para cobrir todas as especificações, eu encorajo você a verificá-lo para obter mais detalhes sobre por que são recomendadas e as práticas recomendadas para implementá-los.

3. Usando doctype

Embora o uso de um doctype específico não afete a acessibilidade do código HTML associado, a razão importante para usar um doctype é garantir que o modo quirks do navegador não seja acionado. Basta usar ! DOCTYPE html> para garantir que isso não aconteça.

4. Tags de documentos HTML5

A navegação adequada de um documento é um fator importante em seu índice de acessibilidade. Muitos usuários de tecnologia acessível que entrevistei expressaram sua frustração com os provedores de conteúdo e desenvolvedores que não marcam corretamente seus documentos para capacidade de navegação. Essas tags fornecem mais contexto para as seções do seu documento do que usar muitos divs.

• Cabeçalho e Rodapé podem ser usados ​​várias vezes em uma página. Eles podem denotar o respectivo cabeçalho ou rodapé principal do documento, ou podem ser usados ​​para informações de cabeçalho / rodapé em artigos ou seções.
• Aparte é uma boa tag para usar em seções, como barras laterais em um livro, que são complementares ao documento, mas não são absolutamente cruciais para seu entendimento.
• Seções são maneiras de dividir ideias ou agrupar conteúdo que faça sentido.
• Artigos são peças independentes e autônomas que poderiam existir sem o resto do conteúdo. Usar essas tags de forma adequada ajuda a garantir que a estrutura do seu conteúdo seja interpretada corretamente.

5. Links ruins

Com CSS, é possível usar imagens de fundo em links e botões. Este é um bom efeito para web designers porque dá mais controle sobre a tipografia. No entanto, isso fez com que as pessoas se esquecessem de incluir descrições de texto. Certifique-se de que também esteja usando texto dentro da imagem para garantir que ela permaneça acessível. Isso também pode afetar coisas como SEO e
internacionalização.

Exemplo:

a href = "/ contato"> / a>

Isto é mau.

a href = "/ contact"> Entre em contato / a>

Muito melhor.

6. Imagens - ALT versus TITLE

As pessoas costumam incluir alt ou título atributos em sua imagem, mas não ambos, pois muitas vezes são mal compreendidos e, portanto, parecem redundantes. Para esclarecer a confusão, título pode representar informações consultivas, como as que podem aparecer em uma dica de ferramenta. Isso também pode fornecer informações adicionais quando você passa o mouse sobre uma imagem, uma técnica que muitas pessoas usam em seus blogs. Com o crescimento dos dispositivos de toque, no entanto, esse tipo de informação se torna menos útil.

Alt por outro lado, é usado por tecnologia assistiva e dá contexto ao elemento. Você deve usar alt em suas imagens e certifique-se de que são informações úteis. Usando img alt = "" src = "1348.webp">

Deixe as pessoas saberem

Se o seu conteúdo estiver disponível em vários formatos, certifique-se de que haja uma maneira de descobrir isso em seu site. Você provavelmente já viu o link "Se tiver problemas para visualizar este e-mail, leia o online
versão "na parte superior de muitos boletins informativos por e-mail. Pratique fazer o mesmo com o seu conteúdo. Se você tiver um PDF acessível ou uma versão em áudio, bem como um ePub, certifique-se de que os usuários possam encontrar essas informações. Usuário testes para garantir que o conteúdo seja localizável e legível.