Projetando para acessibilidade e inclusão

“A acessibilidade é resolvida na fase de projeto.” Esta é uma frase que Daniel Na e sua equipe ouviram repetidamente enquanto participavam de uma conferência. Projetar para acessibilidade significa ser inclusivo às necessidades de seus usuários . Isso inclui seus usuários-alvo, usuários fora do seu público-alvo demográfico, usuários com deficiências e até mesmo usuários de diferentes culturas e países. Compreender essas necessidades é a chave para criar experiências melhores e mais acessíveis para elas.

Um dos problemas mais comuns ao projetar para acessibilidade é saber para quais necessidades você deve projetar. Não é que projetamos intencionalmente para excluir usuários, é apenas que “não sabemos o que não sabemos”. Então, quando se trata de acessibilidade, há muito o que saber.

Como podemos entender a miríade de usuários e suas necessidades? Como podemos garantir que suas necessidades sejam atendidas em nosso design? Para responder a essas perguntas, descobri que é útil aplicar uma técnica de análise crítica de visualizar um projeto através de diferentes lentes.

“Um bom design [acessível] acontece quando você vê seu [design] de muitas perspectivas ou lentes diferentes.”

— A arte do design de jogos: um livro de lentes

Uma lente é “um filtro estreito através do qual um tópico pode ser considerado ou examinado”. Muitas vezes usadas para examinar obras de arte, literatura ou cinema, as lentes nos pedem para deixar para trás nossa visão de mundo e, em vez disso, ver o mundo através de um contexto diferente.

Por exemplo, ver a arte através das lentes da história nos pede para entender o “clima social, político, econômico, cultural e/ou intelectual da época”. Isso nos permite entender melhor quais influências do mundo afetaram o artista e como isso moldou a obra de arte e sua mensagem.

As lentes de acessibilidade são um filtro que podemos usar para entender como diferentes aspectos do design afetam as necessidades dos usuários. Cada lente apresenta um conjunto de perguntas a serem feitas ao longo do processo de design. Ao usar essas lentes, você se tornará mais inclusivo para as necessidades de seus usuários, permitindo que você crie uma experiência de usuário mais acessível para todos.

As Lentes de Acessibilidade são:

• Lente de animação e efeitos
• Lente de áudio e vídeo
• Lente de cor
• Lente de controles
• Lente de fonte
• Lente de imagens e ícones
• Lente do teclado
• Lente de Layout
• Lente da Honestidade Material
• Lente de legibilidade
• Lente da Estrutura
• Lente do Tempo

Você deve saber que nem todas as lentes se aplicam a todos os projetos. Enquanto alguns podem se aplicar a todos os projetos, outros são mais situacionais. O que funciona melhor em um projeto pode não funcionar em outro.

As perguntas fornecidas por cada lente são apenas uma ferramenta para ajudá-lo a entender quais problemas podem surgir. Como sempre, você deve testar seu design com os usuários para garantir que seja utilizável e acessível a eles.

Lente de animação e efeitos

Animações eficazes podem ajudar a dar vida a uma página e marca, orientar o foco dos usuários e ajudar a orientar um usuário. Mas as animações são uma faca de dois gumes. O uso indevido de animações não apenas pode causar confusão ou distração, mas também pode ser potencialmente mortal para alguns usuários.

Efeitos intermitentes rápidos (definidos como piscar mais de três vezes por segundo) ou efeitos e padrões de alta intensidade podem causar convulsões, conhecidas como 'epilepsia fotossensível'. A fotossensibilidade também pode causar dores de cabeça, náuseas e tonturas. Os usuários com epilepsia fotossensível devem ter muito cuidado ao usar a web, pois nunca sabem quando algo pode causar uma convulsão.

Outros efeitos, como efeitos de paralaxe ou movimento, podem causar tonturas ou vertigens em alguns usuários devido à sensibilidade vestibular. O sistema vestibular controla o equilíbrio e a sensação de movimento de uma pessoa. Quando este sistema não funciona como deveria, causa tonturas e náuseas.

“Imagine um mundo onde seu giroscópio interno não esteja funcionando corretamente. Muito parecido com estar embriagado, as coisas parecem se mover por conta própria, seus pés nunca parecem estar estáveis ​​embaixo de você e seus sentidos estão se movendo mais rápido ou mais devagar que seu corpo.”

— Uma cartilha para distúrbios vestibulares

Animações ou movimentos constantes também podem distrair os usuários, especialmente aqueles que têm dificuldade de concentração. Os GIFs são notavelmente problemáticos, pois nossos olhos são atraídos para o movimento, facilitando a distração por qualquer coisa que seja atualizada ou se mova constantemente.

Isso não quer dizer que a animação é ruim e você não deve usá-la. Em vez disso, você deve entender por que está usando a animação e como criar animações mais seguras. De um modo geral, você deve tentar criar animações que cubram pequenas distâncias, correspondam à direção e velocidade de outros objetos em movimento (incluindo rolagem) e sejam relativamente pequenas para o tamanho da tela.

Você também deve fornecer controles ou opções para atender a experiência do usuário. Por exemplo, o Slack permite ocultar imagens animadas ou emojis como uma configuração global e por imagem.

Para usar o Lens of Animation and Effects , faça a si mesmo estas perguntas:

• Existem efeitos que podem causar uma convulsão?
• Existem animações ou efeitos que podem causar tonturas ou vertigens pelo uso do movimento?
• Existem animações que podem distrair ao mover-se constantemente, piscar ou atualizar automaticamente?
• É possível fornecer controles ou opções para parar, pausar, ocultar ou alterar a frequência de qualquer animação ou efeito?

Lente de áudio e vídeo

A reprodução automática de vídeos e áudio pode ser bastante irritante. Eles não apenas quebram a concentração do usuário, mas também forçam o usuário a caçar a mídia ofensiva e silenciá-la ou pará-la. Como regra geral, não reproduza mídia automaticamente.

“Use a reprodução automática com moderação. A reprodução automática pode ser uma poderosa ferramenta de engajamento, mas também pode incomodar os usuários se um som indesejado for reproduzido ou se eles perceberem o uso desnecessário de recursos (por exemplo, dados, bateria) como resultado da reprodução de vídeo indesejada.”

— Diretrizes de reprodução automática do Google

Você provavelmente está se perguntando: "Mas e se eu reproduzir automaticamente o vídeo em segundo plano, mas mantê-lo sem som?" Embora o uso de vídeos como plano de fundo possa ser uma tendência crescente no design da Web de hoje, os vídeos de plano de fundo sofrem dos mesmos problemas que os GIFs e as animações em movimento constante: podem ser uma distração. Como tal, você deve fornecer controles ou opções para pausar ou desativar o vídeo.

Juntamente com os controles, os vídeos devem ter transcrições e/ou legendas para que os usuários possam consumir o conteúdo da maneira que funcionar melhor para eles. Os usuários com deficiência visual ou que preferem ler em vez de assistir ao vídeo precisam de uma transcrição, enquanto os usuários que não podem ou não querem ouvir o vídeo precisam de legendas.

Para usar a lente de áudio e vídeo , faça a si mesmo estas perguntas:

• Existe algum áudio ou vídeo que possa ser irritante pela reprodução automática?
• É possível fornecer controles para parar, pausar ou ocultar qualquer áudio ou vídeo que seja reproduzido automaticamente?
• Os vídeos têm transcrições e/ou legendas?

Lente de cor

A cor desempenha um papel importante em um design. As cores evocam emoções, sentimentos e ideias. As cores também podem ajudar a fortalecer a mensagem e a percepção de uma marca. No entanto, o poder das cores é perdido quando um usuário não pode vê-las ou percebê-las de forma diferente.

O daltonismo afeta cerca de 1 em 12 homens e 1 em 200 mulheres. A deuteranopia (daltonismo vermelho-verde) é a forma mais comum de daltonismo, afetando cerca de 6% dos homens. Os usuários com daltonismo vermelho-verde normalmente percebem os vermelhos, verdes e laranjas como amarelados.

O significado das cores também é problemático para usuários internacionais. As cores significam coisas diferentes em diferentes países e culturas. Nas culturas ocidentais, o vermelho é normalmente usado para representar tendências negativas e tendências positivas em verde, mas o oposto é verdadeiro nas culturas orientais e asiáticas.

Como as cores e seus significados podem ser perdidos por diferenças culturais ou por daltonismo, você deve sempre adicionar um identificador que não seja de cor. Identificadores como ícones ou descrições de texto podem ajudar a superar diferenças culturais enquanto os padrões funcionam bem para distinguir as cores.

Cores supersaturadas, cores de alto contraste e até mesmo apenas a cor amarela podem ser desconfortáveis ​​e perturbadoras para alguns usuários, principalmente aqueles no espectro do autismo. É melhor evitar altas concentrações desses tipos de cores para ajudar os usuários a permanecerem confortáveis.

O baixo contraste entre as cores do primeiro plano e do plano de fundo dificulta a visão de usuários com baixa visão, usando um monitor de baixo custo ou que estejam apenas sob luz solar direta. Todos os textos, ícones e indicadores de foco usados ​​por usuários que usam um teclado devem atender a uma taxa de contraste mínima de 4,5:1 para a cor de fundo.

Você também deve garantir que seu design e cores funcionem bem em diferentes configurações do modo de alto contraste do Windows. Uma armadilha comum é que o texto se torna invisível em determinados fundos de modo de alto contraste.

Para usar o Lens of Color , faça a si mesmo estas perguntas:

• Se a cor fosse removida do desenho, que significado seria perdido?
• Como eu poderia fornecer significado sem usar cores?
• Alguma cor está supersaturada ou tem alto contraste que pode fazer com que os usuários fiquem superestimulados ou desconfortáveis?
• A cor do primeiro plano e do plano de fundo de todos os textos, ícones e indicadores de foco atendem às diretrizes de taxa de contraste de 4,5:1?

Lente de controles

Os controles, também chamados de 'conteúdo interativo', são quaisquer elementos de interface do usuário com os quais o usuário possa interagir, sejam eles botões, links, entradas ou qualquer elemento HTML com um ouvinte de eventos. Controles muito pequenos ou muito próximos podem causar muitos problemas para os usuários.

Controles pequenos são difíceis de clicar para usuários que não conseguem ser precisos com um ponteiro, como aqueles com tremores ou aqueles que sofrem de destreza reduzida devido à idade. O tamanho padrão das caixas de seleção e botões de opção, por exemplo, pode causar problemas para usuários mais antigos. Mesmo quando é fornecido um rótulo que pode ser clicado, nem todos os usuários sabem que podem fazê-lo.

Controles muito próximos podem causar problemas para usuários de telas sensíveis ao toque. Os dedos são grandes e difíceis de serem precisos. Tocar acidentalmente no controle errado pode causar frustração, especialmente se esse controle o afastar ou fizer você perder seu contexto.

Os controles aninhados em outro controle também podem contribuir para erros de toque. Não só não é permitido na especificação HTML, como também facilita a seleção acidental do controle pai em vez do que você queria.

Para dar aos usuários espaço suficiente para selecionar um controle com precisão, o tamanho mínimo recomendado para um controle é de 34 por 34 pixels independentes de dispositivo, mas o Google recomenda pelo menos 48 por 48 pixels, enquanto a especificação WCAG recomenda pelo menos 44 por 44 pixels. Esse tamanho também inclui qualquer preenchimento que o controle tenha. Portanto, um controle pode ter visualmente 24 por 24 pixels, mas com 10 pixels adicionais de preenchimento em todos os lados o levaria a 44 por 44 pixels.

Também é recomendado que os controles sejam separados o suficiente para reduzir os erros de toque. A Microsoft recomenda pelo menos 8 pixels de espaçamento, enquanto o Google recomenda que os controles sejam espaçados com pelo menos 32 pixels de distância.

Os controles também devem ter um rótulo de texto visível. Os leitores de tela não apenas exigem o rótulo de texto para saber o que o controle faz, mas também foi demonstrado que os rótulos de texto ajudam todos os usuários a entender melhor a finalidade de um controle. Isso é especialmente importante para entradas de formulário e ícones.

Para usar o Lens of Controls , faça a si mesmo estas perguntas:

• Algum controle não é grande o suficiente para alguém tocar?
• Existem controles muito próximos que facilitariam o toque no errado?
• Existem controles dentro de outro controle ou região clicável?
• Todos os controles têm um rótulo de texto visível?

Lente de fonte

Nos primeiros dias da web, criamos páginas da web com um tamanho de fonte entre 9 e 14 pixels. Isso funcionou muito bem na época, pois os monitores tinham um tamanho de tela relativamente conhecido. Projetamos pensando que a janela do navegador era uma constante, algo que não podia ser alterado.

A tecnologia hoje é muito diferente do que era há 20 anos. Hoje, os navegadores podem ser usados ​​em qualquer dispositivo de qualquer tamanho, desde um pequeno relógio até uma enorme tela 4K. Não podemos mais usar tamanhos de fonte fixos para projetar nossos sites. Os tamanhos de fonte devem ser tão responsivos quanto o próprio design.

Não apenas os tamanhos de fonte devem ser responsivos, mas o design deve ser flexível o suficiente para permitir que os usuários personalizem o tamanho da fonte, a altura da linha ou o espaçamento entre letras para um nível de leitura confortável. Muitos usuários fazem uso de CSS personalizado que os ajuda a ter uma melhor experiência de leitura.

A fonte em si deve ser fácil de ler. Você pode estar se perguntando se uma fonte é mais legível do que outra. A verdade é que a fonte não faz diferença na legibilidade. Em vez disso, é o estilo da fonte que desempenha um papel importante na legibilidade das fontes.

Estilos de fonte decorativos ou cursivos são mais difíceis de ler para muitos usuários, mas especialmente problemáticos para usuários com dislexia. Tamanhos de fonte pequenos, texto em itálico e todo o texto em maiúsculas também são difíceis para os usuários. No geral, texto maior, comprimentos de linha mais curtos, alturas de linha mais altas e maior espaçamento entre letras podem ajudar todos os usuários a ter uma melhor experiência de leitura.

Para usar o Lens of Font , faça a si mesmo estas perguntas:

• O design é flexível o suficiente para que a fonte possa ser modificada para um nível de leitura confortável pelo usuário?
• O estilo da fonte é fácil de ler?

Lente de imagens e ícones

Dizem que “uma imagem vale mais que mil palavras”. Ainda assim, uma imagem que você não pode ver é sem palavras, certo?

As imagens podem ser usadas em um design para transmitir um significado ou sentimento específico. Outras vezes, eles podem ser usados ​​para simplificar ideias complexas. Qualquer que seja o caso da imagem, um usuário que usa um leitor de tela precisa saber qual é o significado da imagem.

Como designer, você entende melhor o significado ou a informação que a imagem transmite. Como tal, você deve anotar o design com essas informações para que não seja deixado de fora ou mal interpretado posteriormente. Isso será usado para criar o texto alternativo para a imagem.

A forma como você descreve uma imagem depende inteiramente do contexto, ou quanta informação textual já está disponível que descreve a informação. Também depende se a imagem é apenas para decoração, transmite significado ou contém texto.

“Você quase nunca descreve a aparência da imagem, em vez disso, explica as informações que a imagem contém.”

— Cinco regras de ouro para texto alternativo compatível

Como saber descrever uma imagem pode ser difícil, há uma árvore de decisão útil para ajudar na hora de decidir. De um modo geral, se a imagem for decorativa ou houver um texto ao redor que já descreva as informações da imagem, nenhuma informação adicional será necessária. Caso contrário, você deve descrever as informações da imagem. Se a imagem contiver texto, repita o texto na descrição também.

As descrições devem ser sucintas. Recomenda-se não usar mais do que duas frases, mas procure uma frase concisa quando possível. Isso permite que os usuários entendam rapidamente a imagem sem ter que ouvir uma descrição longa.

Por exemplo, se você fosse descrever esta imagem para um leitor de tela, o que você diria?

Como descrevemos a informação da imagem e não a imagem em si, a descrição poderia ser A Noite Estrelada de Vincent van Gogh, pois não há outro contexto circundante que a descreva. O que você não deve colocar é uma descrição do estilo da pintura ou como é a imagem.

Se as informações da imagem exigirem uma descrição longa, como um gráfico complexo, você não deve colocar essa descrição no texto alternativo. Em vez disso, você ainda deve usar uma descrição curta para o texto alternativo e fornecer a descrição longa como uma legenda ou link para uma página diferente.

Dessa forma, os usuários ainda podem obter as informações mais importantes rapidamente, mas têm a capacidade de se aprofundar mais, se desejarem. Se a imagem for de um gráfico, você deve repetir os dados do gráfico como faria para o texto na imagem.

Se a plataforma para a qual você está projetando permite que os usuários façam upload de imagens, você deve fornecer uma maneira para o usuário inserir o texto alternativo junto com a imagem. Por exemplo, o Twitter permite que seus usuários escrevam texto alternativo quando carregam uma imagem em um tweet.

Para usar o Lens of Images and Icons , faça a si mesmo estas perguntas:

• Alguma imagem contém informações que seriam perdidas se não pudessem ser visualizadas?
• Como eu poderia fornecer as informações de forma não visual?
• Se a imagem for controlada pelo usuário, é possível fornecer uma maneira de inserir a descrição do texto alternativo?

Lente do teclado

A acessibilidade do teclado está entre os aspectos mais importantes de um design acessível, mas também está entre os mais negligenciados.

Há muitas razões pelas quais um usuário usaria um teclado em vez de um mouse. Os usuários que usam um leitor de tela usam o teclado para ler a página. Um usuário com tremores pode usar um teclado porque oferece melhor precisão do que um mouse. Mesmo usuários avançados usarão um teclado porque é mais rápido e eficiente.

Um usuário que usa um teclado normalmente usa a tecla tab para navegar para cada controle em sequência. Uma ordem lógica para a ordem de tabulação ajuda muito os usuários a saber onde o próximo pressionamento de tecla os levará. Nas culturas ocidentais, isso geralmente significa da esquerda para a direita, de cima para baixo. Ordens de guias inesperadas fazem com que os usuários se percam e precisem verificar freneticamente para onde foi o foco.

A ordem de tabulação sequencial também significa que eles devem percorrer todos os controles que estão antes do que desejam. Se esse controle estiver a dezenas ou centenas de pressionamentos de tecla, pode ser um verdadeiro ponto de dor para o usuário.

Ao tornar os fluxos de usuários mais importantes mais próximos do topo da ordem de guias, podemos ajudar a permitir que nossos usuários sejam mais eficientes e eficazes. No entanto, isso nem sempre é possível nem prático de fazer. Nesses casos, fornecer uma maneira de pular rapidamente para um fluxo ou conteúdo específico ainda pode permitir que eles sejam eficientes. É por isso que os links “pular para o conteúdo” são úteis.

Um bom exemplo disso é o Facebook, que fornece um menu de navegação por teclado que permite aos usuários pular para seções específicas do site. Isso acelera muito a capacidade de um usuário interagir com a página e o conteúdo que deseja.

Ao navegar por um design, os estilos de foco devem estar sempre visíveis ou um usuário pode se perder facilmente. Assim como uma ordem de tabulação inesperada, não ter bons indicadores de foco faz com que os usuários não saibam o que está em foco no momento e tenham que escanear a página.

Alterar a aparência do indicador de foco padrão às vezes pode melhorar a experiência dos usuários. Um bom indicador de foco não depende apenas da cor para indicar o foco (Lens of Color) e deve ser distinto o suficiente para permitir que o usuário o encontre facilmente. Por exemplo, um anel de foco azul ao redor de um botão azul de cor semelhante pode não ser visualmente distinto para discernir que está focado.

Embora essa lente se concentre na acessibilidade do teclado, é importante observar que ela se aplica a qualquer maneira que um usuário possa interagir com um site sem um mouse. Dispositivos como bastões de boca, botões de acesso a interruptores, botões de gole e sopro e software de rastreamento ocular exigem que a página seja acessível pelo teclado.

Ao melhorar a acessibilidade do teclado, você permite que uma ampla variedade de usuários tenha um melhor acesso ao seu site.

Para usar a lente do teclado , faça a si mesmo estas perguntas:

• Qual ordem de navegação do teclado faz mais sentido para o design?
• Como um usuário de teclado pode obter o que deseja da maneira mais rápida possível?
• O indicador de foco está sempre visível e visualmente distinto?

Lente de layout

O layout contribui muito para a usabilidade de um site. Ter um layout fácil de seguir com conteúdo fácil de encontrar faz toda a diferença para seus usuários. Um layout deve ter uma sequência lógica e significativa para o usuário.

Com o advento do CSS Grid, ser capaz de alterar o layout para ser mais significativo com base no espaço disponível é mais fácil do que nunca. No entanto, alterar o layout visual cria problemas para usuários que dependem do layout estrutural da página.

O layout estrutural é o que é usado por leitores de tela e usuários usando um teclado. Quando o layout visual muda, mas não o layout estrutural subjacente, esses usuários podem ficar confusos, pois sua ordem de tabulação não é mais lógica. Se você precisar alterar o layout visual, deve fazê-lo alterando o layout estrutural para que os usuários que usam um teclado mantenham uma ordem de tabulação sequencial e lógica.

O layout deve ser redimensionável e flexível para um mínimo de 320 pixels sem barras de rolagem horizontais para que possa ser visualizado confortavelmente em um telefone. O layout também deve ser flexível o suficiente para ser ampliado em 400% (também sem barras de rolagem horizontais) para usuários que precisam aumentar o tamanho da fonte para uma melhor experiência de leitura.

Os usuários que usam uma lupa se beneficiam quando o conteúdo relacionado está próximo um do outro. Uma lupa de tela fornece ao usuário apenas uma pequena visão de todo o layout, portanto, o conteúdo relacionado, mas distante, ou alterações distantes de onde ocorreu a interação, é difícil de encontrar e pode passar despercebido.

Para usar o Lens of Layout , faça a si mesmo estas perguntas:

• O layout tem uma sequência significativa e lógica?
• O que deve acontecer com o layout quando ele é visualizado em uma tela pequena ou ampliado em 400%?
• O conteúdo relacionado ou alterado devido à interação do usuário está próximo um do outro?

Lente da honestidade material

A honestidade material é um valor de projeto arquitetônico que afirma que um material deve ser honesto consigo mesmo e não ser usado como substituto de outro material. Isso significa que o concreto deve se parecer com concreto e não ser pintado ou esculpido para se parecer com tijolos.

A honestidade material valoriza e celebra as propriedades e características únicas de cada material. Um arquiteto que segue a honestidade material sabe quando cada material deve ser usado e como usá-lo sem se manchar.

A honestidade material não é uma regra rígida e rápida. Encontra-se em um continuum. Como todos os valores, você pode quebrá-los quando os entender. Como diz o ditado, eles são “mais o que você chamaria de “diretrizes” do que regras reais”.

Quando aplicada ao web design, a honestidade material significa que um elemento ou componente não deve parecer, se comportar ou funcionar como se fosse outro elemento ou componente. Fazer isso enganaria o usuário e poderia causar confusão. Um exemplo comum disso são botões que parecem links ou links que parecem botões.

Links e botões têm comportamentos e possibilidades diferentes. Um link é ativado com a tecla Enter, normalmente leva você a uma página diferente e possui um menu de contexto especial ao clicar com o botão direito. Os botões são ativados com a tecla de espaço, usada principalmente para acionar interações na página atual, e não possuem esse menu de contexto.

Quando um link é estilizado para se parecer com um botão ou vice-versa, um usuário pode ficar confuso, pois ele não se comporta e funciona como parece. Se o “botão” afastar o usuário inesperadamente, ele poderá ficar frustrado se perder dados no processo.

“À primeira vista, tudo parece bem, mas não resistirá ao escrutínio. Assim que um site desse tipo é testado pelo uso real em vários navegadores, a fachada desmorona.”

— Web design resiliente

Onde isso se torna o mais problemático é quando um link e um botão têm o mesmo estilo e são colocados um ao lado do outro. Como não há nada para diferenciar entre os dois, um usuário pode navegar acidentalmente quando achava que não o faria.

Quando um componente se comporta de maneira diferente do esperado, pode facilmente causar problemas para os usuários que usam um teclado ou leitor de tela. Um menu de preenchimento automático que é mais do que um menu de preenchimento automático é um exemplo.

O preenchimento automático é usado para sugerir ou prever o restante de uma palavra que um usuário está digitando. Um menu de preenchimento automático permite que um usuário selecione em uma grande lista de opções quando nem todas as opções podem ser exibidas.

Um menu de preenchimento automático normalmente é anexado a um campo de entrada e é navegado com as teclas de seta para cima e para baixo, mantendo o foco dentro do campo de entrada. Quando um usuário seleciona uma opção da lista, essa opção substituirá o texto no campo de entrada. Os menus de preenchimento automático devem ser listas de apenas texto.

O problema surge quando um menu de preenchimento automático começa a ganhar mais comportamentos. Além de selecionar uma opção da lista, você pode editá-la, excluí-la ou até mesmo expandir ou recolher seções. O menu de preenchimento automático não é mais apenas uma simples lista de texto selecionável.

Os comportamentos adicionados não significam mais que você pode usar as setas para cima e para baixo para selecionar uma opção. Cada opção agora tem mais de uma ação, portanto, um usuário precisa percorrer duas dimensões em vez de apenas uma. Isso significa que um usuário usando um teclado pode ficar confuso sobre como operar o componente.

Os leitores de tela sofrem mais com essa mudança de comportamento, pois não há uma maneira fácil de ajudá-los a entendê-la. Muito trabalho será necessário para garantir que o menu seja acessível a um leitor de tela usando meios não padronizados. Como tal, pode resultar em uma experiência abaixo da média ou inacessível para eles.

Para evitar esses problemas, é melhor ser honesto com o usuário e o design. Em vez de combinar dois comportamentos distintos (um menu de preenchimento automático e funcionalidade de edição e exclusão), deixe-os como dois comportamentos separados. Use um menu de preenchimento automático apenas para preencher automaticamente o nome de um usuário e tenha um componente ou página diferente para editar e excluir usuários.

Para usar a Lente da Honestidade Material , faça a si mesmo estas perguntas:

• O design está sendo honesto com o usuário?
• Existem elementos que se comportam, parecem ou funcionam como outro elemento?
• Existem componentes que combinam comportamentos distintos em um único componente? Isso torna o componente materialmente desonesto?

Lente de legibilidade

Você já pegou um livro apenas para obter alguns parágrafos ou páginas e quis desistir porque o texto era muito difícil de ler? Conteúdo difícil de ler é mentalmente desgastante e cansativo.

O comprimento da frase, o comprimento do parágrafo e a complexidade da linguagem contribuem para a legibilidade do texto. A linguagem complexa pode causar problemas para os usuários, especialmente aqueles com deficiências cognitivas ou que não são fluentes no idioma.

Além de usar uma linguagem clara e simples, você deve garantir que cada parágrafo se concentre em uma única ideia. Um parágrafo com uma única ideia é mais fácil de lembrar e digerir. O mesmo acontece com uma frase com menos palavras.

Outro contribuinte para a legibilidade do conteúdo é o comprimento de uma linha. O comprimento de linha ideal é frequentemente citado entre 45 e 75 caracteres. Uma linha muito longa faz com que os usuários percam o foco e dificulta o movimento correto para a próxima linha, enquanto uma linha muito curta faz com que os usuários pulem com muita frequência, causando fadiga nos olhos.

“A mente subconsciente é energizada ao pular para a próxima linha. No início de cada nova linha, o leitor está focado, mas esse foco desaparece gradualmente ao longo da linha”

— Tipografia: Um Manual de Design

Você também deve dividir o conteúdo com títulos, listas ou imagens para dar pausas mentais ao leitor e apoiar diferentes estilos de aprendizagem. Use títulos para agrupar e resumir logicamente as informações. Títulos, links, controles e rótulos devem ser claros e descritivos para aumentar a capacidade de compreensão dos usuários.

Para usar o Lens of Readability , faça a si mesmo estas perguntas:

• A linguagem é clara e simples?
• Cada parágrafo se concentra em uma única ideia?
• Existem parágrafos longos ou blocos longos de texto ininterrupto?
• Todos os títulos, links, controles e rótulos são claros e descritivos?

Lente de estrutura

Conforme mencionado no Lens of Layout, o layout estrutural é o que é usado por leitores de tela e usuários que usam um teclado. Enquanto o Lens of Layout se concentra no layout visual, o Lens of Structure se concentra no layout estrutural ou no HTML subjacente e na semântica do design.

Como designer, você não pode escrever o layout estrutural de seus projetos. Isso não deve impedi-lo de pensar em como seu design será estruturado. Caso contrário, seu design pode resultar em uma experiência inacessível para um leitor de tela.

Tomemos, por exemplo, um projeto para uma chave de torneio de eliminação única.

Como você saberia se esse design era acessível a um usuário usando um leitor de tela? Sem entender a estrutura e a semântica, você não pode. Do jeito que está, o design provavelmente resultaria em uma experiência inacessível para um usuário usando um leitor de tela.

Para entender por que isso acontece, primeiro devemos entender que um leitor de tela lê uma página e seu conteúdo em ordem sequencial. Isso significa que todos os nomes na primeira coluna do torneio seriam lidos, seguidos por todos os nomes na segunda coluna, depois na terceira e depois na última.

“George, Fred, Linus, Lucy, Jack, Jill, Fred, Ginger, George, Lucy, Jack, Ginger, George, Ginger, Ginger.”

Se tudo que você tivesse fosse uma lista de nomes aparentemente aleatórios, como você interpretaria os resultados do torneio? Você poderia dizer quem ganhou o torneio? Ou quem ganhou o jogo 6?

Sem mais nada para trabalhar, um usuário usando um leitor de tela provavelmente ficaria um pouco confuso com os resultados. Para poder entender o projeto visual, devemos fornecer ao usuário mais informações no projeto estrutural.

Isso significa que, como designer, você precisa saber como um leitor de tela interage com os elementos HTML em uma página para saber como aprimorar sua experiência.

• Elementos de referência (cabeçalho, navegação, principal e rodapé)
  Allow a screen reader to jump to important sections in the design.
• Headings ( h1 → h6 )
  Allow a screen reader to scan the page and get a high level overview. Screen readers can also jump to any heading.
• Lists ( ul and ol )
  Group related items together, and allow a screen reader to easily jump from one item to another.
• Buttons
  Trigger interactions on the current page.
• Links
  Navigate or retrieve information.
• Form labels
  Tell screen readers what each form input is.

Knowing this, how might we provide more meaning to a user using a screen reader?

To start, we could group each column of the tournament into rounds and use headings to label each round. This way, a screen reader would understand when a new round takes place.

Next, we could help the user understand which players are playing against each other each game. We can again use headings to label each game, allowing them to find any game they might be interested in.

By just adding headings, the content would read as follows:

“__Round 1, Game 1__, George, Fred, __Game 2__, Linus, Lucy, __Game 3__, Jack, Jill, __Game 4__, Fred, Ginger, __Round 2, Game 5__, George, Lucy, __Game 6__, Jack, Ginger, __Round 3__, __Game 7__, George, Ginger, __Winner__, Ginger.”

This is already a lot more understandable than before.

The information still doesn't answer who won a game though. To know that, you'd have to understand which game a winner plays next to see who won the previous game. For example, you'd have to know that the winner of game four plays in game six to know who advanced from game four.

We can further enhance the experience by informing the user who won each game so they don't have to go hunting for it. Putting the text “(winner)” after the person who won the round would suffice.

We should also further group the games and rounds together using lists. Lists provide the structural semantics of the design, essentially informing the user of the connected nodes from the visual design.

If we translate this back into a visual design, the result could look as follows:

Since the headings and winner text are redundant in the visual design, you could hide them just from visual users so the end visual result looks just like the first design.

“If the end result is visually the same as where we started, why did we go through all this?” You may ask.

The reason is that you should always annotate your design with all the necessary structural design requirements needed for a better screen reader experience. This way, the person who implements the design knows to add them. If you had just handed the first design to the implementer, it would more than likely end up inaccessible.

To use the Lens of Structure , ask yourself these questions:

• Can I outline a rough HTML structure of my design?
• How can I structure the design to better help a screen reader understand the content or find the content they want?
• How can I help the person who will implement the design understand the intended structure?

Lens Of Time

Periodically in a design you may need to limit the amount of time a user can spend on a task. Sometimes it may be for security reasons, such as a session timeout. Other times it could be due to a non-functional requirement, such as a time constrained test.

Whatever the reason, you should understand that some users may need more time in order finish the task. Some users might need more time to understand the content, others might not be able to perform the task quickly, and a lot of the time they could just have been interrupted.

“The designer should assume that people will be interrupted during their activities”

— The Design of Everyday Things

Users who need more time to perform an action should be able to adjust or remove a time limit when possible. For example, with a session timeout you could alert the user when their session is about to expire and allow them to extend it.

To use the Lens of Time , ask yourself this question:

• Is it possible to provide controls to adjust or remove time limits?

Bringing It All Together

So now that you've learned about the different lenses of accessibility through which you can view your design, what do you do with them?

The lenses can be used at any point in the design process, even after the design has been shipped to your users. Just start with a few of them at hand, and one at a time carefully analyze the design through a lens.

Ask yourself the questions and see if anything should be adjusted to better meet the needs of a user. As you slowly make changes, bring in other lenses and repeat the process.

By looking through your design one lens at a time, you'll be able to refine the experience to better meet users' needs. As you are more inclusive to the needs of your users, you will create a more accessible design for all your users.

Using lenses and insightful questions to examine principles of accessibility was heavily influenced by Jesse Schell and his book “The Art of Game Design: A Book of Lenses.”