Compreender design, UX e acessibilidade

Um percurso de leitura

1. Orientar a leitura

• Hierarquia visual

  Organização gráfica indicando o que deve ser visto e entendido primeiro por meio de tamanho, contraste, espaço e posição.

• Arquitetura da informação

  Organização de conteúdo, categorias, rótulos e caminhos de navegação para que as informações sejam fáceis de encontrar e entender.

• ordem de leitura

  Sequência em que o conteúdo da página ou do documento é encontrado, inclusive por teclado ou tecnologia assistiva.

2. Descrever interações

• Nome acessível

  Nome exposto a tecnologias assistivas para identificar um botão, campo, link ou outro componente interativo.

• Estado do componente

  Condição visível de um controle, como foco, erro, carregamento ou indisponibilidade.

• Mensagem de erro do campo

  Mensagem associada a um campo de formulário explicando o problema e a correção esperada.

3. Observar utilização

• usabilidade

  Facilidade com que os usuários podem entender uma interface, concluir tarefas e evitar ou se recuperar de erros.

• Design responsivo

  Projete o layout, a mídia e as interações de adaptação para diferentes tamanhos e condições de tela.

• Cumulative Layout Shift (CLS)

  Métrica de estabilidade visual baseada na maior sequência de deslocações inesperadas da apresentação.

Distinções úteis

Texto alternativo / Nome acessível

O texto alternativo transmite a função da imagem; o nome acessível identifica um elemento. Uma imagem usada como comando deve explicar a ação.

wireframe / maquete

Um wireframe explora estrutura; uma maquete detalha apresentação. Nenhum demonstra funcionamento do percurso no navegador.

Usar os conceitos para decidir

Situação

Um erro é visível, mas o campo é difícil de encontrar com teclado.

Antes de decidir

Verifique nome, associação da mensagem e ordem. Mudar apenas a cor não explica a correção.

Uma verificação concreta

Repita com valor inválido sem ajuda da pessoa que desenhou o ecrã.

Documentos de referência primários

Estes documentos explicam conceitos técnicos. Percursos e exemplos são métodos editoriais a adaptar ao projeto.

• W3C WAI — Forms
• W3C WAI — Images
• Web.dev — Web vitais

Temas relacionados

• Compreender desenvolvimento e código
• Compreender conteúdos e ciclo de vida