book

Livro de receitas de acessibilidade da Web

by Manuel Matuzovic

March 2025

Intermediate to advanced

382 pages

8h 30m

Portuguese (Portugal, Brazil)

O'Reilly Media, Inc.

Read now

Unlock full access

A quem se destina este livroO que há neste livro/organizaçãoConvenções utilizadas neste livroUtilizar exemplos de código e software suportadoAprendizagem em linha da O'ReillyComo contactar-nosAgradecimentos
1.1. Define a linguagem natural1.2. Descreve o documento1.3. Define a largura da janela de visualização1.4. Optimiza a ordem de renderização1.5. Estrutura o documento
2.1. Criar marcos de navegação2.2. Cria marcos de forma2.3. Rotular pontos de referência2.4. Estrutura o conteúdo principal2.5. Criar um esboço de documento sonoro2.6. Apresenta o conteúdo por ordem
3.1. Escolhe o elemento certo3.2. Ligações de estilo3.3. Cria ligações de transferência3.4. Criar ligações de e-mail3.5. Liga as imagens3.6. Informar os utilizadores da mudança de contexto3.7. Corrige a renderização do lado do cliente3.8. Adiciona ligações a grupos de elementos
4.1. Escolhe o elemento certo4.2. Rotula os botões de forma clara4.3. Remove os estilos de botão predefinidos4.4. Adiciona estados e propriedades4.5. Não desactives os botões
5.1. Trabalhar com cores5.2. Respeita as preferências do utilizador5.3. Trabalha com unidades e tamanhos5.4. Preserva a informação semântica e a operacionalidade5.5. Adiciona movimento e animação
6.1. Fornecer estilos de focagem6.2. Torna os elementos focalizáveis6.3. Deslocar o foco6.4. Mantém o foco contido6.5. Preserva a ordem6.6. Permite que os utilizadores saltem elementos
7.1. Cria uma navegação principal7.2. Destaca a página ativa7.3. Anuncia o número de itens7.4. Proporciona um acesso rápido7.5. Esconde a navegação em janelas estreitas7.6. Adiciona uma animação de deslizamento7.7. Adiciona submenus7.8. Evita a confusão com os menus
8.1. Ocultar conteúdo8.2. Criar um widget de divulgação nativo8.3. Criar um widget de divulgação personalizado8.4. Criar grupos de widgets de divulgação

9.1. Cria formulários9.2. Identifica os elementos do formulário9.3. Descreve os campos do formulário9.4. Destacar campos errados9.5. Agrupa campos num formulário9.6. Divide os formulários em etapas
10.1. Cria um formulário10.2. Filtra os dados10.3. Paginar resultados10.4. Ordenar e apresentar resultados10.5. Filtros de grupo
11.1. Escolhe os elementos certos11.2. Tabelas de estrutura11.3. Adiciona elementos interactivos11.4. Ordenar colunas
12.1. Trabalhar com IDs12.2. Criar referências ARIA12.3. Elementos de foco no DOM de sombra12.4. Depuração e testes12.5. Aplicar as melhores práticas
13.1. Encontra problemas de acessibilidade automaticamente13.2. Explora a árvore de acessibilidade13.3. Funções de depuração, nomes, propriedades e estados13.4. Visualiza a ordem dos separadores13.5. Emula deficiências de cor, movimento reduzido e muito mais13.6. Escreve regras de depuração personalizadas

Content preview from Livro de receitas de acessibilidade da Web

Capítulo 12. Criando elementos personalizados

Este trabalho foi traduzido com recurso a IA. Agradecemos o teu feedback e comentários: translation-feedback@oreilly.com

Os componentes Web são um conjunto de APIs da plataforma Web que te permitem criar os teus próprios elementos DOM com todas as funcionalidades.

A possibilidade de criar elementos personalizados para construir sítios Web interactivos de forma nativa é empolgante, mas também introduz novos problemas de acessibilidade. Tens de estar ciente das limitações e oportunidades dos elementos personalizados e das respectivas APIs. Com a arquitetura certa e planeamento suficiente, os componentes Web podem incentivar uma mentalidade de desenvolvimento que privilegia a acessibilidade e criar experiências fantásticas. Também podem quebrar a acessibilidade de forma inerente, se forem utilizados sem precaução.

12.1 Trabalhar com IDs

Problema

É impossível referenciar um elemento do Light DOM no Shadow DOM, ou vice-versa, utilizando o atributo id. Se não tiveres conhecimento desta limitação e tentares criar estas referências na mesma, a relação quebrada pode afetar os utilizadores:

As ligações para saltar podem não funcionar, dificultando a navegação.
Os elementos do formulário podem não ter etiquetas adequadas, o que dificulta a sua distinção pelos utilizadores de leitores de ecrã.
As referências ARIA podem ser quebradas, resultando na falta de informação ou de feedback para os utilizadores de leitores de ecrã.