Sabemos que é uma boa ideia projetar de forma responsiva para fornecer a melhor experiência em vários dispositivos, mas o design responsivo também gera uma vitória para a acessibilidade.
Considere um site como o Udacity:
Um usuário de baixa visão que tem dificuldade para ler letras pequenas pode aumentar o zoom da página, talvez até 400%. Como o site foi projetado de forma responsiva, a interface será reorganizada para a "janela de visualização menor" (na verdade, para a página maior), o que é ótimo para usuários de computadores que exigem ampliação e para usuários de leitores de tela em dispositivos móveis. Todos são beneficiados. Esta é a mesma página ampliada para 400%:
Na verdade, ao projetar de maneira responsiva, estamos atendendo à regra 1.4.4 da lista de verificação do WebAIM, que afirma que uma página "... deve ser legível e funcional quando o tamanho do texto é dobrado".
Analisar todo o design responsivo está fora do escopo deste guia, mas aqui estão alguns pontos importantes que beneficiarão sua experiência responsiva e fornecerão aos seus usuários um melhor acesso ao seu conteúdo.
Usar a metatag da janela de visualização
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Definir width=device-width corresponderá à largura da tela em pixels independentes de dispositivo,
e definir initial-scale=1 estabelece uma relação de 1:1 entre pixels CSS e pixels independentes de dispositivo.
Isso instrui o navegador a ajustar o conteúdo ao tamanho da tela,
para que os usuários não vejam apenas um monte de texto sobreposto.
Consulte Dimensionar o conteúdo para se ajustar à janela de visualização para saber mais.
Permitir que os usuários aumentem o zoom
É possível usar a metatag da janela de visualização para impedir o zoom definindo maximum-scale=1 ou user-scaleable=no.
Evite fazer isso e permita que os usuários aumentem o zoom se precisarem.
Crie com flexibilidade
Evite segmentar tamanhos de tela específicos. Em vez disso, use uma grade flexível, fazendo alterações no layout conforme o conteúdo. Como vimos no exemplo da Udacity acima, essa abordagem garante que o design responda seja o espaço reduzido devido a uma tela menor ou um nível de zoom maior.
Leia mais sobre essas técnicas no artigo Conceitos básicos de Web design responsivo.
Usar unidades relativas para texto
Para aproveitar ao máximo sua grade flexível, use unidades relativas como em ou rem para itens como tamanho do texto, em vez de valores de pixel. Alguns navegadores oferecem suporte ao redimensionamento de texto apenas nas preferências do usuário e, se você estiver usando um valor de pixel para o texto, essa configuração não vai afetar a cópia. No entanto, se você tiver usado unidades relativas, a cópia do site será atualizada para refletir a preferência do usuário.
Isso permitirá que todo o site mude de modo conforme o usuário aumenta o zoom, criando a experiência de leitura necessária para usar o site.
Evite desconectar a visualização visual da ordem de origem
Um visitante que estiver navegando pelo site com o teclado vai seguir a ordem do conteúdo no documento HTML. Ao usar métodos de layout modernos, como Flexbox e Grid, é fácil fazer com que a renderização visual não corresponda à ordem de origem. Isso pode levar a saltos desconfortáveis pela página para alguém que usa o teclado para se mover.
Teste seu design em cada ponto de interrupção navegando pelo conteúdo. O fluxo pela página ainda faz sentido?
Leia mais sobre a desconexão da fonte e da tela visual.
Use dicas espaciais
Ao escrever a microcópia, evite usar uma linguagem que indique a localização de um elemento na página. Por exemplo, fazer referência à navegação "à esquerda" não faz sentido em uma versão para dispositivos móveis quando a navegação está na parte de cima da tela.
Verifique se as áreas de toque são grandes o suficiente em dispositivos com tela touch
Em dispositivos com tela touchscreen, verifique se os pontos de toque são grandes o suficiente para facilitar a ativação sem tocar em outros links. Um bom tamanho para qualquer elemento tocável é 48 px. Leia mais orientações sobre áreas de toque.