DESENVOLVIMENTO WEB ACESSÍVEL – BÁSICO

DESENVOLVIMENTO WEB ACESSÍVEL – BÁSICO

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.
3 dias

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

3 dias

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.

Indisponível

Quer uma formação à medida para a sua empresa?

Peça-nos uma proposta!
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.

Formações ajustadas ao seu negócio

FORMAÇÕES À MEDIDA

Provocamos e aceleramos processos de mudança com a implementação e desenvolvimento de soluções pragmáticas orientadas para os resultados

SABER MAIS