Sabemos que é uma boa ideia fazer design de modo responsivo a fim de proporcionar a melhor experiência para vários dispositivos, mas o design responsivo também produz uma conquista em termos de acessibilidade.
Considere um site como a Udacity:
Um usuário com baixa visão que tem dificuldade para ler letras pequenas pode aumentar o zoom da página, talvez até 400%. Como o site foi feito com design responsivo, a interface vai se reorganizar para a "janela de visualização menor" (na verdade, para a página maior), o que é ótimo para usuários de desktop que necessitam de ampliação da tela e também para usuários de leitor de tela em dispositivos móveis. Todos são beneficiados. Veja a mesma página ampliada para 400%:
Na verdade, apenas ao projetar de forma responsiva, estamos cumprindo a regra 1.4.4 da lista de verificação do WebAIM, que afirma que uma página "... precisa ser legível e funcional quando o tamanho do texto for dobrado".
Analisar o design responsivo como um todo está fora do escopo deste guia, mas aqui estão alguns tópicos importantes que beneficiarão sua experiência responsiva e fornecerão aos usuários um melhor acesso ao seu conteúdo.
Usar a metatag viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">
A configuração width=device-width
vai corresponder à largura da tela em pixels independentes de dispositivo,
e a configuração initial-scale=1
estabelece uma relação 1:1 entre pixels CSS e independentes de dispositivo.
Fazê-lo instrui o navegador a ajustar seu conteúdo ao tamanho da tela,
de modo que os usuários não vejam apenas um monte de texto sobreposto.
Consulte Dimensionar o conteúdo de acordo com a janela de visualização para saber mais.
Permitir que os usuários façam zoom
É possível usar a metatag da janela de visualização para evitar o zoom
definindo maximum-scale=1
ou user-scaleable=no
.
Evite fazer isso e permita que os usuários aumentem o zoom se precisarem.
Projetar com flexibilidade
Evite segmentar tamanhos de tela específicos e use uma grade flexível, fazendo mudanças no layout quando o conteúdo exigir. Como vimos no exemplo do Udacity acima, essa abordagem garante que o design responda independentemente de o espaço reduzido ser devido a uma tela menor ou a um nível de zoom mais alto.
Leia mais sobre essas técnicas no artigo Fundamentos do design responsivo para Web.
Usar unidades relativas para texto
Para aproveitar ao máximo a grade flexível, use unidades relativas como em ou rem para coisas como tamanho de texto, em vez de valores de pixel. Alguns navegadores suportam redimensionamento de texto somente nas preferências do usuário, e se você estiver usando um valor de pixel para o texto, esta configuração não afetará a sua 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 vai permitir que todo o site seja realimentado à medida que o usuário faz zoom, criando a experiência de leitura necessária para usar seu site.
Evite desconectar a visualização visual da ordem da fonte
Um visitante que navega pelo seu site usando o teclado segue 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 da fonte. Isso pode causar saltos perturbadores na página para alguém que usa o teclado para se mover.
Teste seu design em cada ponto de interrupção usando as teclas de tabulação no conteúdo. O fluxo pela página ainda faz sentido?
Leia mais sobre a desconexão da fonte e da tela visual.
Cuidado com as dicas espaciais
Ao escrever microcópias, evite usar linguagem que indique o local de um elemento na página. Por exemplo, não faz sentido se referir à navegação "à esquerda" em uma versão para dispositivos móveis quando a navegação está na parte de cima da tela.
As áreas de toque são grandes o suficiente em dispositivos com tela touch?
Em dispositivos touchscreen, verifique se os alvos de toque são grandes o suficiente para serem ativados facilmente sem tocar em outros links. Um bom tamanho para qualquer elemento acionável é 48 px. Leia mais orientações sobre áreas de toque.