Conheça os elementos de uma página acessível na web
Objetivos de aprendizagem
Após concluir esta unidade, você estará apto a:
- Descrever como o bom design torna a Web mais acessível.
- Criar uma estrutura de títulos acessível para seu design.
- Listar as estratégias utilizadas para passar significado aos usuários desprovidos de visão.
Acessibilidade é um catalisador, não uma barreira à inovação
Um dos maiores equívocos quando se trata de design e acessibilidade é o de que um produto acessível precisa ser feio, chato ou desorganizado. Este módulo ensina que não só é o contrário, mas que, ao entender melhor a acessibilidade e as limitações de um design acessível, você poderá criar produtos que sejam mais consistentes e mais utilizáveis por todos os seus usuários. O conhecimento de design acessível aumenta suas oportunidades de criar designs inovadores.
Design e acessibilidade são parceiros com um objetivo comum: garantir que todos os seus usuários desfrutem de seus produtos. Os designers fazem parcerias com equipes de pesquisa para garantir que certas personalidades de usuários sejam consideradas. Os designers também devem fazer parceria com a acessibilidade para considerar personalidades que possam fundamentar a acessibilidade no projeto.
Muito mais do que o mouse
Pode parecer óbvio, mas, como designer, você é responsável por muito mais do que cliques de mouse e posicionamento visual do conteúdo na tela. Embora seja importante considerar a interação do mouse e o layout visual de um projeto, você também deve considerar outros fatores.
- Modelos completos de interação para fluxos.
- Como um recurso funciona exclusivamente com um teclado.
- Considerações sobre laptops e tablets com toques habilitados.
- Usuários que alternem entre modos de entrada, indo do mouse para o teclado, para touch, talvez para entrada de voz.
Ao ler este módulo, lembre-se de que você não quer criar para seus colegas, mas para seus usuários. Crie para o diversificado conjunto de usuários que vão interagir com seus produtos. Os usuários têm diferentes formas de interagir com os produtos e diferentes formas de receber informações dos produtos.
Usuários diversificados podem incluir pessoas cegas, daltônicas ou com baixa visão; pessoas surdas ou com dificuldades auditivas; pessoas com baixa mobilidade, que pode ser temporária ou permanente; ou pessoas com deficiências cognitivas. Crie para pessoas que sejam jovens, velhos, usuários constantes, usuários casuais e aqueles que apenas gostem de uma experiência de qualidade.
Excluir conscientemente uma limitação focada na acessibilidade de seu design é excluir conscientemente pessoas de seus produtos. Adote as diretrizes de acessibilidade como faria com qualquer conjunto de limitações do projeto. Elas são parte do desafio e do ímpeto de criar produtos surpreendentes.
Entender a interface de usuário
Quando os usuários visualizam um site ou um aplicativo Web pela primeira vez, eles levam alguns momentos para entender todas as informações na tela. Eles descobrem o que é possível fazer e isso fundamenta seus próximos passos. Os usuários com visão podem percorrer visualmente a página para obter o layout geral, decidir por onde começar e se aprofundar em certas partes do aplicativo. Eles podem ver diferentes agrupamentos visuais, grandes títulos, listas e outros padrões de experiência do usuário (UX) familiares, como cartões, conjuntos de guias, tabelas ou árvores.
Os usuários visuais podem dividir a página inicial do Lightning Experience de forma semelhante à captura de tela abaixo. Aqui, os itens de navegação são destacados em amarelo, um gráfico grande em verde e vários cartões informativos em rosa.
Os usuários desprovidos de visão confiam em uma boa estrutura de página que incorpore cabeçalhos e pontos de referência, bem como outras estruturas semânticas, para obter um entendimento holístico de uma página. Abaixo, a navegação da página principal e os cabeçalhos visuais claros na mesma página do Lightning Experience estão contornados em vermelho. Embora os engenheiros exponham essas informações aos usuários, como designer, é importante incluir pontos de referência e cabeçalhos claros, entendendo seu propósito e comunicando-os como um requisito para as equipes de engenharia.
Layout
Assim como os usuários com visão podem ter diferentes técnicas para se familiarizar com um novo site, os usuários de leitores de tela também podem empregar diferentes abordagens. Embora muitas vezes gere lentidão, alguns usuários de leitores de tela podem optar por ter uma página inteira lida para eles ao visualizar um site ou aplicativo pela primeira vez. Outros podem percorrer a página navegando por todos os cabeçalhos ou pontos de referência.
Similar à identificação de capítulos em um livro, artigos em uma revista, ou descrição de seções para um trabalho de pesquisa, os títulos dão estrutura à sua página da Web. Entretanto, em vez de usar numerais, letras e números romanos, as páginas da Web usam marcas de cabeçalho, <h1> até <h6>, para criar essa estrutura de forma programática.
Quando as páginas são codificadas corretamente, os usuários podem usar com sucesso um recurso comum de leitura de tela que indique uma lista de todos os cabeçalhos de uma página. Eles também podem navegar individualmente por cabeçalho pressionando uma tecla de atalho. Na captura de tela abaixo, um usuário de leitor de tela solicitou uma lista de todos os cabeçalhos da página. Há um único cabeçalho de nível 1, Início, e o resto dos cabeçalhos são de nível 2. Há um cabeçalho de nível 2 para cada cartão nessa página do Lightning Experience.
Quando você tem uma estrutura lógica de títulos, os usuários podem compreender a estrutura do conteúdo de uma página. Além disso, ter cabeçalhos visuais claros também ajuda os usuários a entender a hierarquia da página. Isso é especialmente útil para algumas pessoas com deficiências cognitivas.
Além da estrutura lógica de títulos, queremos que os engenheiros usem pontos de referência HTML semânticos para ajudar as pessoas a identificar onde elas estão em uma página. Eles incluem:
- Cabeçalho
- Navegação
- Área de conteúdo principal
- Artigos
- Tópicos paralelos (conteúdo tangencialmente relacionado, muitas vezes usado para barras laterais ou call-outs)
- Corpo
- Rodapé
Os leitores de tela identificam pontos de referência e também permitem que os usuários naveguem por região com atalhos de teclado. Como designer, você tem a capacidade de projetar pontos de referência claros e identificá-los aos engenheiros para que sejam devidamente incluídos no código.
No exemplo abaixo, a página tem apenas um ponto de referência, que é a região de navegação global.
Você pode ver que faltam alguns outros pontos de referência potencialmente úteis, como Pesquisar, Cabeçalho, Principal e Artigo.
Ícones e imagens
Algumas pessoas cegas usam leitores de tela ou teclados digitais em braile, mas essas tecnologias adaptáveis só leem texto; elas não leem automaticamente ícones e imagens, o que significa que cabe a você criá-los corretamente.
Há dois tipos de ícones, e os leitores de tela lidam com eles de maneira diferente: decorativo (ignorar) e informacional (transmitir o conteúdo ao usuário). Como designer, você deve entender a diferença, escolher qual funciona melhor para seu caso de uso, escrever rótulos preliminares (se necessário) para a equipe de experiência de conteúdo rever e informar os engenheiros para que eles possam programar o ícone corretamente.
Decorativo
Os ícones e imagens decorativos não acrescentam nenhuma informação ou funcionalidade relevante. Os ícones e imagens redundantes também se enquadram nessa categoria porque reforçam o significado do texto adjacente, mas não acrescentam novas informações. Os leitores de tela não devem lê-los para os usuários porque isso acrescenta verborragia desnecessária. Os ícones não precisam de nada especial para marcá-los como decorativos, mas as imagens precisam de um rótulo alt vazio, o que obriga os leitores de tela a pulá-los. Se um leitor de tela encontra uma imagem sem uma marca alt vazia, ele lê a marca src da imagem, que muitas vezes se parece com algo assim: /images/weji2362iofweio6.png.
Os ícones Papéis do contato, Produtos e Notas e anexos na imagem abaixo são decorativos porque são redundantes. Cada um tem um texto adjacente descrevendo as mesmas informações (ícone de arquivos ao lado de Notas e anexos (0)).
Informacional
Ícones e imagens informacionais transmitem informações importantes que o texto ao redor não transmite. Botões de ícones e avatares autônomos são exemplos comuns. Os ícones precisam de um texto de ajuda ou aria-label, e as imagens precisam de uma descrição alternativa. Escreva o que o ícone ou imagem faz e não como ele se parece (por exemplo, Carregar arquivo em vez de clipe de papel).
Na captura de tela abaixo, os botões de ícones na navegação global superior são todos informacionais porque são todos botões de ícones, e você precisa saber o que eles fazem para interagir com eles.
E quanto ao ícone a seguir? Embora tenha texto adjacente, ainda é informacional porque o ícone indica que o objeto é uma conta e o texto é o nome da conta. Sem o ícone, os usuários não saberiam se é um contato, uma oportunidade ou um tipo diferente de objeto.
Resumindo
Design e acessibilidade são parceiros com um objetivo comum: garantir que todos os seus usuários desfrutem de seus produtos. Ao considerar a estrutura e o layout de seus projetos, e incluindo alternativas de texto para imagens e outros tipos de conteúdo não textual, você está fornecendo um forte alicerce para usuários com deficiências. Na próxima unidade, discutimos como ajudar os usuários a perceber e entender melhor o conteúdo de seus designs.