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 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 maneira 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 precisam de ampliação e também para usuários de leitores de tela em dispositivos móveis. Todos são beneficiados. Confira a mesma página ampliada em 400%:
Na verdade, apenas com o design responsivo, estamos cumprindo a 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 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.
Isso instrui o navegador a ajustar o 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 apliquem zoom
É possível usar a meta tag 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 da Udacity acima, essa abordagem garante que o design responda se o espaço reduzido é devido a uma tela menor ou a um nível de zoom maior.
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ê usou unidades relativas em todo o app, 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.
Cuide-se com pistas 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.