Sabemos que é uma boa ideia projetar de forma responsiva para fornecer a melhor experiência multidispositivo, mas o design responsivo também é uma vitória para a acessibilidade.
Considere um site como o Udacity:
Um usuário com baixa visão que tem dificuldade de ler letras pequenas pode ampliar a página, talvez até 400%. Como o site foi projetado de forma responsiva, 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 computador que precisam de ampliação da tela e também para usuários de leitores de tela em dispositivos móveis. Todos são beneficiados. Veja a mesma página ampliada para 400%:
Na verdade, 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 "... deve ser legível e funcional quando o tamanho do texto for duplicado".
Analisar todo o design responsivo está fora do escopo deste guia, mas aqui estão alguns tópicos importantes que beneficiarão sua experiência responsiva e dar aos 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.
Definir initial-scale=1 estabelece uma relação 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 cortado.
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 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.
Projete com flexibilidade
Evite segmentar tamanhos de tela específicos e, em vez disso, use uma grade flexível, fazer alterações no layout quando o conteúdo determina. Como vimos no exemplo do Udacity acima, essa abordagem garante que o design responda se o espaço reduzido se deve a uma tela menor ou a um nível de zoom mais alto.
Leia mais sobre essas técnicas no artigo Princípios básicos do 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 coisas como tamanho de texto, em vez de valores de pixel. Alguns navegadores permitem redimensionar texto somente nas preferências do usuário. Se você estiver usando um valor de pixel para o texto, essa configuração não afetará sua cópia. No entanto, se você usou unidades relativas em todo o processo, a cópia do site será atualizada para refletir a preferência do usuário.
Isso permite o reflow de todo o site à medida que o usuário aumenta o zoom, criando a experiência de leitura de que precisam para usar seu site.
Evite desconectar a visualização visual da ordem de origem
Um visitante que navega pelo seu site usando o teclado estará seguindo 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 origem. Isso pode causar saltos desconcertantes pela página para usuários que usam o teclado.
Certifique-se de testar seu design em cada ponto de interrupção percorrendo o 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 a localização de um elemento na página. Por exemplo, consultar a navegação "à esquerda" não faz sentido em uma versão para dispositivos móveis quando a navegação está na parte superior da tela.
Verifique se os pontos de toque são grandes o suficiente em dispositivos com tela touch
Em dispositivos com tela touchscreen, verifique se as áreas de toque são grandes o suficiente para facilitar a ativação sem clicar em outros links. Um bom tamanho para qualquer elemento tocável é 48px, leia mais orientações sobre áreas de toque.