O grande problema são os gerentes de design que tratam uma página da Web como papel , com um tamanho fixo, e desejam que os componentes dessa página da Web também tenham um tamanho fixo . Essa é uma decisão de design muito, muito ruim, porque quebra a capacidade de resposta integrada dos navegadores da web. Ele deliberadamente torna as páginas da web que eles criaram menos acessíveis .

E então eles estão orgulhosos disso .

O design responsivo é uma solução ruim para esse problema, porque não deveria existir em primeiro lugar. A solução real, é claro, é remover o estilo - o CSS - que quebra a capacidade de resposta. Mas como os gerentes de design insistem em forçar os designers e desenvolvedores da web a colocar esse estilo na página da web, para quebrar a capacidade de resposta, para destruir a acessibilidade, o design responsivo oferece uma saída - e embora seja terrivelmente ruim, pode passar na inspeção por garantia de conformidade de acessibilidade. (Você tem isso , não é?)

Vejamos o que o design responsivo faz.

Suponha que você tenha uma tela estreita. Você abre uma página da web. Ele mostra alguma imagem, algum texto, alguma imagem, algum texto, um embaixo do outro, assim:

Agora você abre a mesma página da web em uma tela ampla. Ele mostra linhas de imagem e texto, assim:

Isso é o que o design responsivo pode fazer: ele pode mover e redimensionar componentes na tela, com base na largura e na densidade de pixels da viewport. (Ele pode mudar completamente todos os estilos, mas isso raramente acontece.)

Mas espere! Tem mais!

Mudanças comuns incluem:

• Recolher ou mostrar barras laterais,
• Mostrando imagens menores ou maiores,
• Usando um tamanho de fonte maior ou menor,
• Causando quebra de linha através de palavras que são muito largas para caber na tela,
• Tornar os botões maiores (supondo que dispositivos menores sejam operados com os dedos) ou menores (supondo que dispositivos maiores sejam operados por mouse),
• Mover rótulos de campo de campos de formulário próximos a campos de formulário acima,
• Mudando de um estilo de hiperlink que força a pessoa a procurar por hiperlinks, para um que os destaca (supondo que dispositivos menores sejam operados com os dedos e não possam passar o ponteiro do mouse),
• e mais!

Em vez de perguntar ao navegador da Web quem é seu fornecedor, o CSS pergunta qual é a largura da janela de visualização, quantas cores a tela pode exibir e quantos pixels por polegada ela exibe. A Mozilla Developer Network tem um excelente artigo sobre consultas de mídia , que este artigo não repetirá. Dirija-se ao MDN.

Essa técnica é anunciada como a melhor maneira de lidar com problemas de acessibilidade causados ​​pelas mesmas pessoas. Que ironia.

A maneira correta de evitar esses problemas é não causá-los, para começar.

Por exemplo: por que você impediria que uma imagem fosse exibida em toda a largura da viewport? O que você pode querer fazer é trocar uma imagem de alta definição adequada para uma tela de alta resolução por uma de baixa definição adequada para uma tela de baixa resolução... resolução do que telas mais largas, dadas as telas de alta densidade exibidas por alguns smartphones . Portanto, embora você possa empregar uma consulta de mídia para fornecer a melhor qualidade de imagem , isso não tem nada a ver com a solução de problemas de acessibilidade.

Da mesma forma, você não deve definir o tamanho da fonte para unidades dependentes da tela, como pixels. Você deve configurá-lo para unidades absolutas como pontos. (Definir em relação à largura da tela é o erro mais estúpido de todos: faz com que as letras se tornem ilegíveis em telas estreitas de baixa densidade.)

Você também não deve definir as margens e preenchimentos usando pixels. Em vez disso, você deve defini-los usando n-widths e m-widths: em relação à largura das letras.

Também não há uma boa razão para tornar os botões minúsculos para usuários de telas grandes. A suposição inerente de que todos são capazes de usar um mouse é terrivelmente habilidosa. Se você tornar os botões grandes o suficiente para serem tocados com os dedos, um usuário de uma tela grande ainda poderá usar esses mesmos botões.

Oh, você diz, mas então como você faz uma barra de ferramentas cheia de pequenos botões?

Bem, talvez você não devesse fazer isso. Os fabricantes de barras de ferramentas encontraram maneiras de lidar com a falta de espaço: menus flutuantes e quebra de linha . Pequenos botões são feitos para pessoas que podem usar ponteiros de mouse precisos. Eles mostram uma total e absoluta falta de respeito por pessoas que não podem, por qualquer motivo.

Outras mudanças incluem recolher uma barra lateral. Se essa barra é de tão pouca importância que pode ser recolhida, certamente você pode criar uma exibição melhor. Talvez omiti-lo completamente .

Então… nunca há um bom motivo para usar consultas de mídia?

Não. Na verdade, há um bom motivo: quebras de palavras.

O inglês é uma língua com poucas palavras longas comuns. As palavras longas que ele conhece são emprestadas do latim e usadas em ciências como a química, para denotar compostos químicos. Mas outras línguas geralmente usam palavras longas . E muitos designers gostam que sua página da web exiba essas palavras sem forçar o usuário a rolar horizontalmente.

Para esse propósito, o CSS tem a capacidade de permitir que os navegadores da Web quebrem uma palavra em lugares aleatórios , em vez de espaços e outros símbolos que não sejam letras. Mas não esperaríamos que isso acontecesse em uma tela ampla, onde há muitas oportunidades de encontrar uma quebra de palavra natural. (Existem exceções, é claro, para palavras extremamente longas.)

E, portanto, é perfeitamente normal aplicar as regras não naturais de quebra de linha apenas em situações limitadas: um ótimo motivo para usar consultas de mídia.

Se você encontrar outras boas razões para consultas de mídia, que não sejam empregadas apenas para impedir a quebra de acessibilidade, sinta-se à vontade para entrar em contato e enriquecer este artigo com seus comentários.

Sobre o autor

Veltstra tem 40 anos de experiência no uso de ferramentas e softwares mal projetados e transformou isso em uma defesa firme da usabilidade e acessibilidade . A Veltstra cria software há mais de 30 anos, 25 dos quais profissionalmente, sempre tentando tornar os produtos utilizáveis ​​e acessíveis.

Não existe deficiência que não seja desconsiderada e marginalizada por uma pessoa fisicamente apta, em algum lugar.