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 LindekInFacebookInstagram 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