Acessibilidade
Esta plataforma adota práticas contínuas de acessibilidade digital. As adaptações aqui descritas refletem o estado atual do sistema e serão aprimoradas à medida que novos ciclos de avaliação forem realizados, incluindo testes com pessoas usuárias do sistema.
Acessibilidade como processo, não produto
A acessibilidade digital não se esgota em uma lista de correções técnicas. Ela é construída por ciclos iterativos que combinam análise automatizada, revisão manual de código, testes com tecnologias assistivas e, fundamentalmente, avaliação com pessoas que dependem dessas tecnologias no cotidiano.
Esta plataforma passou por doze ciclos de auditoria técnica conduzidos durante seu desenvolvimento, nos quais foram identificadas e corrigidas barreiras de acesso com base nas normas listadas abaixo. No entanto, reconhecemos que testes com leitores de tela reais (como NVDA, JAWS ou VoiceOver), com usuários com deficiência visual, motora ou cognitiva, ainda são necessários para mensurar a efetividade das adaptações realizadas.
Contribuições, relatos de barreira e sugestões de melhoria são bem-vindos e podem ser encaminhados ao responsável pelo projeto.
Padrões adotados
Referência internacional para acessibilidade de conteúdo web. Organizada em quatro princípios: Perceptível, Operável, Compreensível e Robusto.
www.w3.org/WAI/WCAG22/quickref/ (abre em nova aba)Adaptação brasileira das WCAG para portais e sistemas de governo. Inclui recomendações específicas para o contexto nacional, como suporte ao leitor de tela NVDA com Firefox.
emag.governoeletronico.gov.br/ (abre em nova aba)Norma técnica brasileira que estabelece requisitos de acessibilidade para interfaces digitais, alinhada ao contexto jurídico da Lei Brasileira de Inclusão (Lei nº 13.146/2015).
www.abntcatalogo.com.br/ (abre em nova aba)Determina que serviços de informação e comunicação, incluindo sítios eletrônicos, sejam acessíveis às pessoas com deficiência.
www.planalto.gov.br/ccivil_03/_ato2015-2018/2015/lei/l13146.htm (abre em nova aba)O que foi feito
- →Contraste de cores revisado: cor primária (lilás) ajustada para razão ≥ 4,5:1 tanto no tema escuro quanto no claro, atendendo WCAG 1.4.3.
- →Cada gráfico é pareado a uma tabela de dados acessível sob demanda: um controle "ver dados" (elemento <details>/<summary>, operável por teclado) revela uma <table> semântica com <caption>, <th scope="col"> e <th scope="row">, expondo o rótulo e o valor exatos de cada ponto. Implementa a etapa "detalhes sob demanda" de Kim et al. (2021) e independe do tipo ou layout do gráfico.
- →Gráficos cartesianos (barras, linhas, área) habilitam o accessibilityLayer do Recharts, tornando os pontos navegáveis por teclado (setas) com o valor correspondente anunciado.
- →Gráficos Recharts envolvidos com o componente ChartWrapper recebem um nome acessível via aria-label; o papel foi ajustado de role="img" para role="group", preservando a exploração ponto a ponto pelos leitores de tela em vez de tratar a visualização como imagem atômica.
- →Mapa coroplético do Brasil com aria-label no elemento SVG e tabIndex em cada unidade federativa para navegação por teclado.
- →Todas as tabelas de dados com <caption> invisível ao visual mas lido por leitores de tela, descrevendo o conteúdo tabular.
- →Ícones Lucide decorativos marcados com aria-hidden="true"; ícones funcionais com aria-label explícito.
- →Tamanho mínimo de todos os textos de interface revisado: labels, metadados e badges elevados de 9–10 px para 11–12 px, atendendo a recomendação de legibilidade do eMAG (ciclo 5).
- →Textos de ticks e labels em gráficos SVG elevados de 8–10 px para 10–12 px em todas as visualizações (cruzamentos, linhas de pesquisa, visão geral), assegurando legibilidade em telas de baixa densidade (ciclo 6).
- →Colunas de barra visual nas tabelas de Cruzamentos e Avaliação CAPES marcadas com aria-hidden="true", impedindo que leitores de tela descrevam elementos gráficos decorativos sem conteúdo textual (ciclo 7).
- →Contraste do texto secundário (muted-foreground) no tema escuro recalibrado de ~3,2:1 para ≥5:1 sobre superfícies e ~6:1 sobre o fundo; disclaimers e legendas em texto pequeno agora atendem WCAG 1.4.3 para texto normal (ciclo 8).
- →Varredura em toda a plataforma: nuvens de termos, grafos e mapas de calor passaram a expor seus valores por texto alternativo (sr-only/aria-label); categorias e tendências (perfil docente, trajetória de conceito, coortes) deixaram de depender exclusivamente de cor, ganhando rótulo textual (ciclo 8).
- →Além da tabela de dados ("ver dados"), cada gráfico passou a oferecer uma leitura interpretativa sob demanda ("ler análise"), pareada na mesma linha e com abertura mutuamente exclusiva: um resumo curto e factual do que a visualização mostra (item de maior peso, participação, concentração ou tendência), útil para quem depende de leitor de tela ou prefere texto ao gráfico. No topo de cada página, uma "Leitura da página" recolhível sintetiza o conjunto (ciclo 10).
- →Na Anatomia de um programa, a leitura de cada gráfico e a síntese da página são geradas para o programa selecionado, refletindo seus números em texto (ciclo 10).
- →A tabela de dados sob demanda ("ver dados") foi estendida aos últimos gráficos customizados que ainda não a tinham (evolução das equipes em Projetos e trajetória de conceitos), completando a alternativa tabular acessível em todas as visualizações (ciclo 11).
- →Os quatorze painéis novos de veículo, estrato e evento nasceram com tabela de dados e leitura interpretativa, e nenhum deles depende só de cor: o estrato vai escrito na ponta da barra no ranking de periódicos, e a escala de A1 a C ganhou degrau de luminosidade porque quatro tons vizinhos não se distinguiam a olho (ciclo 12).
- →Nos painéis que recortam uma fatia do dado, o cabeçalho passa a declarar o que ficou de fora e por quê: artigos sem estrato, trabalhos sem natureza de evento declarada, programas sem quadro permanente. Quem lê por texto recebe a mesma ressalva que o gráfico carrega (ciclo 12).
- →Cada página de dados passou a trazer, no cabeçalho, os atalhos para as suas seções, com rótulo de navegação próprio; onde a numeração precisa de leitura, o nome inteiro da seção vai no rótulo acessível do atalho (ciclo 12).
- →A numeração das seções deixou o algarismo em círculo, que não existe no tipo carregado pela plataforma e caía no tipo do sistema, com desenho variável entre navegadores; passou a dois dígitos, idênticos em qualquer ambiente (ciclo 12).
- →Skip link 'Ir para o conteúdo principal' visível ao receber foco por teclado, permitindo pular o menu de navegação.
- →Indicador de foco visível global implementado via :focus-visible com contorno de 2 px na cor do anel de foco.
- →Navegação sequencial entre páginas com botões Anterior / Próximo ao final de cada seção.
- →Botão ⓘ nos cartões de estatísticas com aria-expanded e acionamento por teclado (Enter/Espaço), além de comportamento hover para mouse.
- →Alvo tátil mínimo de 24 × 24 px (WCAG 2.5.8 Nível AA) respeitado em controles pequenos.
- →Animação do ticker decorativo suspensa automaticamente quando prefers-reduced-motion está ativo (WCAG 2.2.2).
- →Links 'texto completo' em publicações de linhas de pesquisa elevados para tamanho de texto legível com altura mínima de 24 px, melhorando o alvo de toque em dispositivos móveis (ciclo 5).
- →Ícones identificadores (Lattes, ORCID) na página de contato ampliados para área mínima de 24 × 24 px (ciclo 5).
- →Cabeçalhos sortáveis em tabelas de docentes e financiadores receberam tabIndex={0}, onKeyDown (Enter/Espaço) e aria-sort dinâmico, tornando a ordenação acessível por teclado (ciclo 6).
- →Lista de top 100 orientadores por linha de pesquisa convertida para elemento semântico <ol>/<li>, tornando a estrutura de ranking interpretável por tecnologias assistivas; número de posição marcado com aria-hidden="true" e contagem de orientações com aria-label explícito (ciclo 7).
- →Contêiner de rolagem da lista de orientadores recebeu tabIndex={0} e aria-label explícito, tornando a região navegável e anunciável por teclado sem depender exclusivamente do ponteiro (ciclo 7).
- →Assistente de IA: a área de conversa (role="log") recebeu tabIndex={0}, tornando-se navegável por teclado; o foco retorna ao campo de entrada após cada envio; campo de mensagem e botões Enviar e Nova conversa elevados para alvo de toque de 44 × 44 px (ciclo 8).
- →Indicador de digitação do assistente passou a respeitar prefers-reduced-motion, suspendendo a animação quando o usuário sinaliza preferência por movimento reduzido (WCAG 2.2.2, ciclo 8).
- →Nós interativos de grafos e do mapa (redes de colaboração, coautoria, similaridade e drill-down territorial) tornaram-se acessíveis por teclado (role="button", tabIndex, Enter/Espaço, aria-pressed); blocos expansíveis (anatomia, cards de trajetória, listas) foram convertidos em button com aria-expanded/aria-controls; contêineres roláveis receberam foco por teclado; sliders e alvos de toque de controles menores foram rotulados e ampliados para ≥24 px (ciclo 8).
- →Nuvens de palavras tornaram-se interativas e operáveis por teclado: cada termo é um botão (aria-pressed/aria-expanded/aria-controls) que, ao ser acionado, revela abaixo a lista de teses e dissertações relacionadas, com um botão de acesso ao texto completo de cada trabalho (ciclo 9).
- →Corrigido um contêiner de rolagem na lista de docentes que, por não estabelecer contexto de posicionamento, inflava a altura do documento e permitia rolar a página muito além do conteúdo, até uma área vazia; a altura volta a corresponder ao conteúdo real, evitando a desorientação na navegação por teclado e por ponteiro (ciclo 10).
- →Acesso ao texto completo de teses e dissertações em Linhas & temas padronizado no mesmo botão das demais páginas, com altura mínima de 24 px, uniformizando o alvo de toque (ciclo 10).
- →Nuvens com 24 termos ou mais ganharam controle de ordem (ocorrência ou alfabética) e busca com sugestão, implementada como combobox (role="combobox", aria-expanded, aria-controls, aria-autocomplete="list", aria-activedescendant) sobre uma lista role="listbox" com opções role="option" e aria-selected, operável por setas, Enter e Esc; o contador de termos filtrados é uma região aria-live="polite" (ciclo 13).
- →Os gráficos passaram a oferecer um destino por clique (a gaveta de obras, defesas ou pessoas do recorte, e a lâmina do programa em Anatomia). Como clique de ponteiro não serve ao teclado, cada rótulo da tabela de dados pareada ao gráfico virou botão com o mesmo destino, com aria-pressed indicando o recorte aberto; a gaveta é uma região rolável com nome acessível (ciclo 13).
- →A nuvem passou a abrir acomodada, com as palavras encaixadas umas nas outras; a posição na tela é visual, e a ordem do documento continua sendo a de ocorrência, que é a que o leitor de tela e a tecla Tab percorrem. Quem prefere a leitura em linha tem os arranjos por ocorrência e alfabético no mesmo controle, e em coluna estreita ou quando algum termo não cabe a nuvem volta sozinha ao arranjo em linha (ciclo 13).
- →Atributo lang do elemento <html> atualizado dinamicamente ao trocar o idioma da interface (PT-BR, EN, ES), garantindo que leitores de tela utilizem a pronúncia correta.
- →Todos os campos de busca com aria-label derivado automaticamente do placeholder via componente SearchInput.
- →Todos os elementos <select> de filtro com aria-label explícito descrevendo a dimensão filtrada.
- →Seletor de cor do grafo em Cruzamentos atualizado para aria-label="Cor dos nós do grafo", tornando a finalidade do controle inequívoca para leitores de tela (ciclo 5).
- →Todos os elementos <th> de tabelas de dados receberam scope="col" explícito, permitindo que leitores de tela associem corretamente células de dados aos seus cabeçalhos de coluna (ciclo 6).
- →Input range do grafo de similaridade TF-IDF recebeu aria-label descritivo com unidade e intervalo (ciclo 6).
- →Elementos <section> sem nome acessível nas rotas Visão Geral e Sobre receberam aria-label, melhorando a navegação por landmarks (ciclo 6).
- →Botão de menu móvel recebeu aria-label correto em espanhol; regressão multilíngue corrigida (ciclo 6).
- →Links externos com target="_blank" incluem aviso <span class="sr-only"> (abre em nova aba)</span> para usuários de leitor de tela.
- →Hierarquia de cabeçalhos (h1 → h2 → h3) mantida consistente em todas as páginas.
- →Componente PanelHeader com prop level para controle semântico do nível de cabeçalho (h2/h3/h4).
- →Grades que simulavam tabelas passaram a usar <table> semântica; a coluna identificadora (programa, docente ou ano) recebeu <th scope="row"> nas tabelas largas; alternadores de dimensão e de ordenação passaram a expor o estado ativo via aria-pressed/aria-sort (ciclo 8).
- →Landmark de navegação <nav> com aria-label em PT, EN e ES no menu lateral.
- →Grupos de links no menu marcados com role="group" e aria-label.
- →Link ativo no menu com aria-current="page".
- →Elemento principal da página com id="main-content" e tabIndex={-1} para receber foco do skip link.
- →Breadcrumb semântico com <nav>, <ol> e aria-current="page" no item corrente.
- →Botões de tema e idioma com aria-label explícito; dimensão visual compacta (26 × 26 px) com área de toque estendida para 44 × 44 px via pseudo-elemento invisível, atendendo ao alvo de 44 px recomendado (ciclo 8).
- →Divergência de hidratação SSR na classe de tema do <html> eliminada: default do tema unificado entre servidor e cliente e suppressHydrationWarning aplicado ao elemento raiz, removendo o único aviso de hidratação do console (WCAG 4.1.1, ciclo 8).
- →Saneamento técnico transversal: frações de opacidade que rebaixavam o contraste de textos informativos foram removidas, e erros latentes de tipagem e um aviso de renderização (chaves de lista) foram corrigidos, reduzindo ruído que pode afetar a estabilidade percebida por tecnologias assistivas (ciclo 8).
- →Meta descriptions em todas as 30 rotas para melhoria do contexto em ferramentas de navegação e leitores de tela.
- ·Testes com usuários reais utilizando tecnologias assistivas (NVDA, JAWS, VoiceOver, TalkBack) ainda não foram realizados; são necessários para validar a experiência de uso.
- ·Visualizações complexas como grafos de rede e matrizes de similaridade oferecem alternativa textual parcial (via aria-label no container), mas não expõem todos os dados programaticamente.
- ·As respostas do assistente de IA são geradas automaticamente e podem conter imprecisões; embora a interface seja acessível, o conteúdo gerado deve ser confirmado nas abas e fontes originais.
- ·Modo de alto contraste do sistema operacional não foi testado formalmente.
Se você encontrar uma barreira de acessibilidade nesta plataforma, entre em contato com o responsável pelo projeto. Seu relato contribui diretamente para os próximos ciclos de melhoria.
Ir para a página de contato