DESENVOLVIMENTO WEB ACESSÍVEL – BÁSICO
- Acessibilidade Digital, New, PRO
- 0 (Registered)
Formação avançada em acessibilidade web para programadores Front‑End que desejam desenvolver websites totalmente acessíveis e conformes com RGAA 4, WCAG e boas práticas WAI‑ARIA. Ao longo da formação os participantes aprendem a implementar HTML e CSS acessíveis, otimizar imagens, tabelas, scripts e formulários, e realizar auditorias de acessibilidade utilizando ferramentas profissionais integradas nos navegadores. Com foco em testes reais: teclado, leitor de ecrã, contrastes, estrutura de documentos e interações. Esta formação capacita equipas para corrigir e melhorar a acessibilidade de interfaces web, garantindo inclusão, conformidade legal e melhor experiência para todos os utilizadores.
- Reconhecer os princípios fundamentais da acessibilidade digital
- Conceber e desenvolver sites Web acessíveis em conformidade com o RGAA 4
- Autoavaliar a acessibilidade dos seus desenvolvimentos Web.
REVISÃO DA ACESSIBILIDADE DIGITAL
• Definição e conceito de “situação de deficiência”
• Números-chave relacionados com a deficiência
• Tipologias de deficiência:
• visuais
• auditivas
• motoras
• cognitivas
• Tecnologias de assistência
Exemplos de exercícios práticos:
• Exemplos de utilizadores confrontados com sites não acessíveis
REFERENCIAIS DE ACESSIBILIDADE EM VIGOR AUDITORIA RGAA
• Definições, utilizações e limitações
• WCAG (Diretrizes de Acessibilidade para Conteúdo Web)
• RGAA (Quadro Geral de Melhoria da Acessibilidade)
• RAAM (Estrutura de Acessibilidade para Aplicativos Móveis)
• Limitações dos referenciais: diferença entre conformidade técnica e acessibilidade real
• Revisão do enquadramento legal
AUDITORIA RGAA
• Metodologia
• Definição de uma amostra de auditoria
• Compreender e utilizar a grelha de auditoria RGAA
• Priorização
• Declaração de acessibilidade
FERRAMENTAS DE TESTE CONCEITO WAI-ARIA
• Princípios dos testes de acessibilidade, limitações das ferramentas automáticas
• Ferramentas integradas nos navegadores
• Ferramentas automáticas
• Ferramentas manuais
• Teste de navegação por teclado:
• Assistant RGAA: para identificar alternativas de imagens e redefinir as propriedades de espaçamento do texto
• ANDI: para identificar alternativas de imagens, nomes acessíveis, contrastes de cor e visibilidade do foco
• HeadingsMap: para definir a estrutura do documento (níveis de títulos)
• Colour Contrast Analyzer: para testar contrastes de cor
Exemplos de exercícios práticos:
• Apresentação e utilização de algumas ferramentas integradas nos navegadores (pesquisa de problemas de contraste, ordem de tabulação, etc.)
• Apresentação e utilização de algumas ferramentas automáticas (como o Tanaguru Webext RGAA 4)
• Aprender a utilizar ferramentas manuais com casos práticos em websites
• Exercício prático: testar a navegação com leitor de ecrã
CONCEITO WAI-ARIA
• Revisão de HTML
• WAI-ARIA: papel, estado e propriedade
• Exemplos de utilização
TEMÁTICAS DO RGAA 4
• Imagens
• Os diferentes tipos de imagens e as respetivas boas práticas: imagens decorativas, imagens informativas simples, imagens complexas, imagens de texto e imagens legendadas
• Técnicas de implementação em função do tipo de imagem
Exemplos de exercícios práticos:
• Identificação dos diferentes tipos de imagens e determinação de alternativas pertinentes
TEMÁTICAS DO RGAA 4 – CONTINUAÇÃO
• Frames online: presença e pertinência do título
• Cores:
• Informação transmitida pela cor
• Avaliação dos contrastes de cor
• Contraste dos textos
• Contraste de elementos não textuais
• Multimédia:
• Transcrição textual
• Audiodescrição
• Legendas
• Controlável por teclado e leitor de ecrã
• Tabelas:
• Tabelas de dados (boas práticas associadas, técnicas de implementação)
• Tabelas de apresentação (boas práticas associadas, técnicas de implementação)
Exemplos de exercícios práticos
• Identificar frames numa página Web e verificar a pertinência do atributo title
• Identificação de erros de acessibilidade em vídeos presentes numa página Web
• Análise de tabelas presentes em páginas Web; propostas de correção
• Tornar uma tabela acessível através do código
TEMÁTICAS DO RGAA 4 – CONTINUAÇÃO
• Links
• Os diferentes tipos de links
• Noção de link explícito; noção de contexto do link
• Links vazios
• Scripts
• Compatibilidade com tecnologias de assistência (pistas de conceção, nome, papel, valor, parametrização e alterações de estado, padrões de conceção)
• Alternativas aos scripts
• Gestão das interações por teclado / rato / ecrã tátil
• Alterações de contexto
• Mensagens de alerta e de estado
• Elementos obrigatórios
• Validade do código
• Gestão das alterações de idioma e da direção de leitura
• Títulos das páginas
• Utilização de elementos de apresentação
Exemplos de exercícios práticos:
• Análise de páginas Web e verificação do caráter explícito dos links nelas contidos
• Análise de páginas Web e deteção dos links vazios nelas contidos
• Com base na documentação fornecida, desenvolver um sistema de abas acessível
• Análise dos scripts presentes em páginas Web e determinação de alternativas possíveis
• Implementar mensagens de alerta acessíveis e compatíveis com tecnologias de assistência
• Análise de páginas Web e verificação da pertinência do título; propostas de correção
TEMÁTICAS DO RGAA 4 – CONTINUAÇÃO
• Estruturação da informação
• Títulos de secção
• Estruturas de documento
• Os diferentes tipos de listas
• Citações
• Apresentação da informação
• Utilização de estilos
• Texto ampliado
• Gestão de cores
• Conteúdo oculto
• Reorganização de conteúdo
• Propriedades de espaçamento do texto
• Gestão de conteúdos adicionais
Exemplos de exercícios práticos:
• Análise de diferentes páginas Web e determinação dos títulos de secção pertinentes
• Análise de diferentes páginas Web e determinação das estruturas de documento pertinentes
• Análise de diferentes páginas Web e determinação dos tipos de listas pertinentes
• Determinação das técnicas de ocultação adequadas para diferentes situações
TEMÁTICAS DO RGAA 4 – CONTINUAÇÃO
• Formulários:
• Etiquetas de campos: presença, pertinência, coerência
• Posição das etiquetas
• Agrupamento de campos
• Agrupamento de opções de lista
• Botões de formulário
• Validação de entrada, campos obrigatórios, campos com erro
• Recuperação de dados
• Atributos para preenchimento automático
• Navegação:
• Mecanismos de navegação interna
• Links de evasão
• Ordem de tabulação
• Armadilhas de teclado
• Atalhos de teclado
• Gestão do teclado para conteúdos adicionais
• Consulta:
• Limites de tempo
• Orientação
• Gestos complexos
• Cancelamento de interações
• Interações através do movimento
Exemplos de exercícios práticos:
• Análise de diversos formulários Web e verificação da pertinência das etiquetas dos campos
• Análise de diversos formulários Web e verificação da pertinência dos atributos para preenchimento automático
• Implementação de links de evasão num website
• Gestão da ordem de tabulação com HTML e CSS
Facilitador que combina know-how com experiência empresarial e competências pedagógicas, para dar resposta a necessidades operacionais e potenciar a aprendizagem.
Objetivos da formação
- Reconhecer os princípios fundamentais da acessibilidade digital
- Conceber e desenvolver sites Web acessíveis em conformidade com o RGAA 4
- Autoavaliar a acessibilidade dos seus desenvolvimentos Web.
Duração da formação
Programa da formação
REVISÃO DA ACESSIBILIDADE DIGITAL
• Definição e conceito de “situação de deficiência”
• Números-chave relacionados com a deficiência
• Tipologias de deficiência:
• visuais
• auditivas
• motoras
• cognitivas
• Tecnologias de assistência
Exemplos de exercícios práticos:
• Exemplos de utilizadores confrontados com sites não acessíveis
REFERENCIAIS DE ACESSIBILIDADE EM VIGOR AUDITORIA RGAA
• Definições, utilizações e limitações
• WCAG (Diretrizes de Acessibilidade para Conteúdo Web)
• RGAA (Quadro Geral de Melhoria da Acessibilidade)
• RAAM (Estrutura de Acessibilidade para Aplicativos Móveis)
• Limitações dos referenciais: diferença entre conformidade técnica e acessibilidade real
• Revisão do enquadramento legal
AUDITORIA RGAA
• Metodologia
• Definição de uma amostra de auditoria
• Compreender e utilizar a grelha de auditoria RGAA
• Priorização
• Declaração de acessibilidade
FERRAMENTAS DE TESTE CONCEITO WAI-ARIA
• Princípios dos testes de acessibilidade, limitações das ferramentas automáticas
• Ferramentas integradas nos navegadores
• Ferramentas automáticas
• Ferramentas manuais
• Teste de navegação por teclado:
• Assistant RGAA: para identificar alternativas de imagens e redefinir as propriedades de espaçamento do texto
• ANDI: para identificar alternativas de imagens, nomes acessíveis, contrastes de cor e visibilidade do foco
• HeadingsMap: para definir a estrutura do documento (níveis de títulos)
• Colour Contrast Analyzer: para testar contrastes de cor
Exemplos de exercícios práticos:
• Apresentação e utilização de algumas ferramentas integradas nos navegadores (pesquisa de problemas de contraste, ordem de tabulação, etc.)
• Apresentação e utilização de algumas ferramentas automáticas (como o Tanaguru Webext RGAA 4)
• Aprender a utilizar ferramentas manuais com casos práticos em websites
• Exercício prático: testar a navegação com leitor de ecrã
CONCEITO WAI-ARIA
• Revisão de HTML
• WAI-ARIA: papel, estado e propriedade
• Exemplos de utilização
TEMÁTICAS DO RGAA 4
• Imagens
• Os diferentes tipos de imagens e as respetivas boas práticas: imagens decorativas, imagens informativas simples, imagens complexas, imagens de texto e imagens legendadas
• Técnicas de implementação em função do tipo de imagem
Exemplos de exercícios práticos:
• Identificação dos diferentes tipos de imagens e determinação de alternativas pertinentes
TEMÁTICAS DO RGAA 4 – CONTINUAÇÃO
• Frames online: presença e pertinência do título
• Cores:
• Informação transmitida pela cor
• Avaliação dos contrastes de cor
• Contraste dos textos
• Contraste de elementos não textuais
• Multimédia:
• Transcrição textual
• Audiodescrição
• Legendas
• Controlável por teclado e leitor de ecrã
• Tabelas:
• Tabelas de dados (boas práticas associadas, técnicas de implementação)
• Tabelas de apresentação (boas práticas associadas, técnicas de implementação)
Exemplos de exercícios práticos
• Identificar frames numa página Web e verificar a pertinência do atributo title
• Identificação de erros de acessibilidade em vídeos presentes numa página Web
• Análise de tabelas presentes em páginas Web; propostas de correção
• Tornar uma tabela acessível através do código
TEMÁTICAS DO RGAA 4 – CONTINUAÇÃO
• Links
• Os diferentes tipos de links
• Noção de link explícito; noção de contexto do link
• Links vazios
• Scripts
• Compatibilidade com tecnologias de assistência (pistas de conceção, nome, papel, valor, parametrização e alterações de estado, padrões de conceção)
• Alternativas aos scripts
• Gestão das interações por teclado / rato / ecrã tátil
• Alterações de contexto
• Mensagens de alerta e de estado
• Elementos obrigatórios
• Validade do código
• Gestão das alterações de idioma e da direção de leitura
• Títulos das páginas
• Utilização de elementos de apresentação
Exemplos de exercícios práticos:
• Análise de páginas Web e verificação do caráter explícito dos links nelas contidos
• Análise de páginas Web e deteção dos links vazios nelas contidos
• Com base na documentação fornecida, desenvolver um sistema de abas acessível
• Análise dos scripts presentes em páginas Web e determinação de alternativas possíveis
• Implementar mensagens de alerta acessíveis e compatíveis com tecnologias de assistência
• Análise de páginas Web e verificação da pertinência do título; propostas de correção
TEMÁTICAS DO RGAA 4 – CONTINUAÇÃO
• Estruturação da informação
• Títulos de secção
• Estruturas de documento
• Os diferentes tipos de listas
• Citações
• Apresentação da informação
• Utilização de estilos
• Texto ampliado
• Gestão de cores
• Conteúdo oculto
• Reorganização de conteúdo
• Propriedades de espaçamento do texto
• Gestão de conteúdos adicionais
Exemplos de exercícios práticos:
• Análise de diferentes páginas Web e determinação dos títulos de secção pertinentes
• Análise de diferentes páginas Web e determinação das estruturas de documento pertinentes
• Análise de diferentes páginas Web e determinação dos tipos de listas pertinentes
• Determinação das técnicas de ocultação adequadas para diferentes situações
TEMÁTICAS DO RGAA 4 – CONTINUAÇÃO
• Formulários:
• Etiquetas de campos: presença, pertinência, coerência
• Posição das etiquetas
• Agrupamento de campos
• Agrupamento de opções de lista
• Botões de formulário
• Validação de entrada, campos obrigatórios, campos com erro
• Recuperação de dados
• Atributos para preenchimento automático
• Navegação:
• Mecanismos de navegação interna
• Links de evasão
• Ordem de tabulação
• Armadilhas de teclado
• Atalhos de teclado
• Gestão do teclado para conteúdos adicionais
• Consulta:
• Limites de tempo
• Orientação
• Gestos complexos
• Cancelamento de interações
• Interações através do movimento
Exemplos de exercícios práticos:
• Análise de diversos formulários Web e verificação da pertinência das etiquetas dos campos
• Análise de diversos formulários Web e verificação da pertinência dos atributos para preenchimento automático
• Implementação de links de evasão num website
• Gestão da ordem de tabulação com HTML e CSS
Formador
Facilitador que combina know-how com experiência empresarial e competências pedagógicas, para dar resposta a necessidades operacionais e potenciar a aprendizagem.
Clique na imagem para expandir
Os nossos espaços de formação oferecem todas as condições para continuar o seu desenvolvimento pessoal e profissional em absoluta segurança
Não se esqueça de subscrever o blog RhBizz e de nos seguir no LindekIn, Facebook, Instagram e Youtube.















