Estilizar elementos nativos de HTML

O HTML é uma tecnologia que suporta nativamente a acessibilidade, desde, pelo menos 1997, altura em que o W3C criou no seu seio a WAI. Por isso, antes de um elemento ou atributo de HTML ser lançado pelo W3C, ele passa também por um processo de "acessibilização" - incorpora a possibilidade de responder aos 4 princípios de acessibilidade conhecidos por POUR.

Apesar deste trabalho, que leva, não raras as vezes, anos a apurar e "milhares de horas de pestanas queimadas" a muita gente, o mais vulgar... sim, o mais vulgar é os designers e programadores esquecerem que eles existem e mimicarem o mesmo, mas recorrendo a elementos genéricos - sem semântica, sem comportamento definido - e voltarem a inventar a roda.

Mas porquê que isto acontece? Está tudo louco!? :-) A razão é "simples", ou parece. Estilizar elementos nativos, ao gosto do designer, é uma arte difícil e, por vezes, mesmo impossível. É por isso que, quem tem de dar "vida" aos componentes na prática - tarefa geralmente do programador - refugia-se em elementos sem semântica, com os quais é muito mais fácil chegar ao desenho final. O problema dele vem a seguir :-). O comportamento do que desenhou é uma "trabalheira" e... pois, o comportamento tem de responder à diversidade contemplada nos princípios de acessibilidade POUR. É aqui que a vida do programador e do designer se complica. Não partiram dos elementos nativos, porque aqueles eram difíceis de estilizar. Pensaram que tinham encontrado a solução a colar elementos que mais não são do que retângulos, tendo chegado a um resultado visual impecável e agora não conseguem dotar esse conjunto do comportamento adequado de forma a responder aos vários tipos de interação.

Se há componentes a que o HTML ainda não deu resposta nativa produzindo um elemento para o construir, como é o caso de um carrossel, há outros, como o parágrafo, que está presente desde a sua criação. Porque será que ainda hoje se fazem parágrafos recorrendo a duas quebras de linha?

Neste artigo encontram-se referências para estilizar (CSS) elementos de HTML nativos.

Referências:

• https://www.shopify.com/partners/blog/new-html .