Uso de texto especial
O que a norma pede
Marcações de ênfase, citação e abreviação são usadas só para esses propósitos, e não para obter efeitos visuais como recuo ou itálico.
- 1.3.1 (A)
Parecido na NBR 17060
A NBR 17060 trata de aplicativos. Se o seu serviço também tem app, veja o que a Bússola da NBR 17060 diz sobre o mesmo assunto:
Visões por perfil
Escolha um perfil para ver o que o requisito pede de quem ocupa esse papel:
Crie estilos neutros para recuos e destaques de leiaute e reserve os estilos de citação para citações. Revise o uso de negrito em elementos de interface.
Caixa de observação
Observação recuada em relação ao texto.
Errado: Citação para recuar
Na especificação
Observação com estilo de citação.
Parece que alguém disse aquilo.
Certo: Estilo próprio
Na especificação
Componente “Observação”, com recuo e ícone.
Visual certo, semântica certa.
Faça recuos e pesos visuais com CSS, e não com blockquote ou strong. Use strong só quando houver importância real.
Recuo com blockquote
Implementação da observação.
Errado: Semântica indevida
<blockquote>Observação: traga o original.</blockquote>Anunciado como citação.
Certo: CSS
<p class="observacao">Observação: traga o original.</p>Sem semântica falsa.
Inclua no sistema de design componentes de destaque sem semântica e revise os templates que usam citação como decoração. Semântica fora do propósito cria anúncios falsos para quem usa leitor de tela.
Template de destaque
O template usa blockquote para caixas coloridas.
Errado: Mantido
Situação
Toda caixa colorida vira “citação”.
Anúncios falsos em todo o site.
Certo: Corrigido
Situação
Caixas coloridas com div e classe.
Citações só onde há citações.
Confira se o que é anunciado como citação ou ênfase realmente é isso, listando os blockquote e observando os usos excessivos de strong. Registre a semântica usada só para efeito visual.
Caixas de aviso
Inspeção de avisos.
Errado: Citação falsa
Inspeção
Avisos em blockquote.
Não atende.
Certo: Sem semântica indevida
Inspeção
Avisos em div com role adequado.
Atende.
Use o bloco de citação só para citar e o componente de aviso para alertas. Não coloque parágrafos inteiros em negrito.
Destaque de prazo
Aviso sobre o fim das inscrições.
Errado: Citação
No editor
Bloco de citação: “Inscrições até sexta!”
Parece fala de alguém.
Certo: Aviso
No editor
Componente de aviso: “Inscrições até sexta.”
Destaque sem semântica falsa.