acessibilidade · declaração de conformidade

Acessibilidade

Esta página informa o que foi feito para tornar a plataforma acessível e o que ainda falta fazer. As medidas descritas aqui mostram o estado atual da plataforma. Elas serão melhoradas a cada nova rodada de avaliação, que deve incluir testes com pessoas que usam a plataforma.

▸ processo contínuo

Acessibilidade como processo contínuo

A acessibilidade digital não se resume a uma lista de correções técnicas. Ela é construída em ciclos repetidos de revisão. Um ciclo completo combina análise automática, revisão do código, testes com tecnologias assistivas e, principalmente, avaliação com pessoas que usam essas tecnologias no dia a dia. Tecnologias assistivas são os recursos que ajudam pessoas com deficiência a usar o computador, como o leitor de tela, o programa que lê a página em voz alta.

Durante o desenvolvimento, a pedido dos pesquisadores responsáveis, um modelo de IA (Claude) fez 13 ciclos de auditoria técnica. Em cada ciclo, o modelo encontrou barreiras de acesso e as corrigiu com base nas normas listadas abaixo. Ainda faltam testes com leitores de tela reais (como NVDA, JAWS ou VoiceOver) e com pessoas com deficiência visual, motora ou cognitiva. Esses testes são necessários para saber se as adaptações funcionam na prática.

O responsável pelo projeto recebe relatos de barreiras, contribuições e sugestões de melhoria.

▸ normas de referência

Padrões adotados

WCAG 2.1 / 2.2Nível AA

Web Content Accessibility Guidelines

W3C / WAI

Referência internacional de acessibilidade para conteúdo da web. Ela se organiza em quatro princípios: Perceptível, Operável, Compreensível e Robusto.

www.w3.org/WAI/WCAG22/quickref/

eMAG 3.1Obrigatório (gov.br)

Modelo de Acessibilidade em Governo Eletrônico

Governo Federal do Brasil

Versão brasileira da WCAG para portais e sistemas do governo. Traz recomendações próprias para o contexto do país, como o uso do leitor de tela NVDA com o navegador Firefox.

emag.governoeletronico.gov.br/

ABNT NBR 17060Norma brasileira; 2022

Acessibilidade em Interfaces Digitais

ABNT

Norma técnica brasileira com os requisitos de acessibilidade para interfaces digitais. Ela segue a Lei Brasileira de Inclusão (Lei nº 13.146/2015).

www.abntcatalogo.com.br/

LBILei nº 13.146/2015

Lei Brasileira de Inclusão da Pessoa com Deficiência

Presidência da República

Determina que os serviços de informação e comunicação, incluindo os sites, sejam acessíveis às pessoas com deficiência.

www.planalto.gov.br/ccivil_03/_ato2015-2018/2015/lei/l13146.htm

▸ adaptações implementadas

O que foi feito

Percepção

WCAG 1.x · eMAG 2

→O contraste das cores foi revisado. O contraste é a diferença de luminosidade entre a cor e o fundo; quanto maior o número, mais fácil é ler. A cor principal (lilás) foi ajustada e agora tem contraste de pelo menos 4,5:1 nos temas escuro e claro, como pede a WCAG 1.4.3.
→Todo gráfico tem uma tabela com os mesmos dados, que abre no controle "ver dados" e funciona pelo teclado (elemento <details>/<summary>). A tabela traz o rótulo e o valor exato de cada ponto. O título e os cabeçalhos de linha e de coluna são marcados no código (<table>, <caption>, <th scope="col"> e <th scope="row">), para que o leitor de tela os anuncie. Essa solução segue a etapa de "detalhes sob demanda" descrita por Kim et al. (2021) e funciona com qualquer tipo de gráfico.
→Nos gráficos de barras, de linhas e de área, os pontos podem ser percorridos com as setas do teclado, e o valor de cada ponto é anunciado. Isso usa o recurso accessibilityLayer da biblioteca Recharts.
→Os gráficos feitos com a biblioteca Recharts (dentro do componente ChartWrapper) têm um nome que o leitor de tela anuncia (aria-label). O código deixou de tratar esses gráficos como uma imagem única (role="img") e passou a tratá-los como um grupo (role="group"). Assim, o leitor de tela pode percorrer o gráfico ponto a ponto.
→O mapa do Brasil em que cada estado é colorido conforme o valor (mapa coroplético) tem um nome para o leitor de tela (aria-label), e cada unidade federativa pode ser alcançada pelo teclado (tabIndex).
→Todas as tabelas de dados têm um título que não aparece na tela, mas é lido pelo leitor de tela e descreve o conteúdo da tabela (<caption>).
→Os ícones apenas decorativos ficam ocultos para o leitor de tela (aria-hidden="true"). Os ícones que têm uma função trazem um nome explícito (aria-label).
→O tamanho mínimo dos textos da interface foi revisado para deixar a leitura confortável. Rótulos, metadados e etiquetas passaram de 9 a 10 px para 11 a 12 px, como recomenda o eMAG (ciclo 5).
→Os textos dos eixos e os rótulos de todos os gráficos passaram de 8 a 10 px para 10 a 12 px (cruzamentos, linhas de pesquisa, visão geral). Assim, eles ficam legíveis também em telas de baixa resolução (ciclo 6).
→Nas tabelas de Cruzamentos e de Avaliação CAPES, as colunas com barras desenhadas ficam ocultas para o leitor de tela (aria-hidden="true"). Assim, ele não descreve desenhos que não têm conteúdo em texto (ciclo 7).
→No tema escuro, o contraste do texto secundário passou de cerca de 3,2:1 para pelo menos 5:1 sobre os painéis e cerca de 6:1 sobre o fundo. Com isso, avisos e legendas em letra pequena passaram a atender à WCAG 1.4.3 para texto normal (ciclo 8).
→Uma revisão de toda a plataforma fez as nuvens de termos, as redes e os mapas de calor mostrarem seus valores também em texto para o leitor de tela (sr-only e aria-label). Categorias e tendências (perfil docente, trajetória de conceito, coortes) deixaram de depender só da cor e ganharam rótulos escritos (ciclo 8).
→Além da tabela ("ver dados"), cada gráfico passou a ter uma análise em texto ("ler análise"), no mesmo lugar; abrir uma fecha a outra. A análise é um resumo curto do que o gráfico mostra, como o item de maior peso, a participação, a concentração ou a tendência. Ela ajuda quem usa leitor de tela ou prefere texto a gráfico. No alto de cada página, a "Análise da página", que pode ser recolhida, resume o conjunto (ciclo 10).
→Em Perfil de um programa, a análise de cada gráfico e o resumo da página são escritos para o programa escolhido, com os números dele (ciclo 10).
→A tabela de dados ("ver dados") chegou aos últimos gráficos que ainda não a tinham: a evolução das equipes, em Projetos, e a trajetória de conceitos. Com isso, todos os gráficos passaram a ter a tabela (ciclo 11).
→Os catorze painéis novos sobre veículo de publicação, estrato e evento já foram criados com tabela de dados e análise em texto, e nenhum depende só da cor. No ranking de periódicos, o estrato aparece escrito na ponta da barra. Na escala de A1 a C, as cores ganharam diferenças maiores entre claro e escuro, porque quatro tons vizinhos não se distinguiam a olho nu (ciclo 12).
→Nos painéis que mostram só uma parte dos dados, o cabeçalho passou a dizer o que ficou de fora e por quê: artigos sem estrato, trabalhos sem tipo de evento informado, programas sem quadro permanente. Quem usa o texto recebe o mesmo aviso que acompanha o gráfico (ciclo 12).
→Cada página de dados passou a ter, no cabeçalho, atalhos para as suas seções, com um rótulo de navegação próprio. Quando o número da seção não basta, o nome inteiro da seção entra no rótulo lido pelo leitor de tela (ciclo 12).
→A numeração das seções deixou de usar algarismos dentro de círculo. Esses caracteres não existem na fonte da plataforma, e cada navegador os desenhava de um jeito, com a fonte do sistema. A numeração passou a usar dois dígitos comuns, iguais em qualquer navegador (ciclo 12).

Operabilidade

WCAG 2.x · eMAG 4

→Um link 'Ir para o conteúdo principal' aparece quando recebe o foco do teclado e permite pular o menu de navegação.
→Em toda a plataforma, o elemento selecionado pelo teclado ganha um contorno visível de 2 px (:focus-visible).
→No fim de cada seção, os botões Anterior e Próximo levam à página vizinha.
→O botão ⓘ dos cartões de estatísticas abre a explicação pelo teclado (Enter ou Espaço) e informa ao leitor de tela se está aberto (aria-expanded). Com o mouse, a explicação aparece ao passar o ponteiro.
→Os controles pequenos têm área de toque de pelo menos 24 × 24 px (WCAG 2.5.8, nível AA).
→A animação da faixa decorativa para sozinha quando o sistema do aparelho pede menos movimento na tela (prefers-reduced-motion, WCAG 2.2.2).
→Os links 'texto completo' nas publicações das linhas de pesquisa ganharam letra maior e altura mínima de 24 px, o que facilita o toque no celular (ciclo 5).
→Os ícones do Lattes e do ORCID na página de contato passaram a ter área mínima de 24 × 24 px (ciclo 5).
→Nas tabelas de docentes e de financiadores, os cabeçalhos que ordenam a tabela passaram a funcionar pelo teclado (Enter ou Espaço) e a informar a ordem atual ao leitor de tela, com tabIndex={0}, onKeyDown e aria-sort (ciclo 6).
→A lista dos 100 primeiros orientadores por linha de pesquisa passou a ser marcada no código como lista numerada (<ol>/<li>). Assim, as tecnologias assistivas reconhecem que se trata de um ranking. O número da posição fica oculto para o leitor de tela (aria-hidden="true"), e a contagem de orientações traz um nome explícito em aria-label (ciclo 7).
→A área com rolagem da lista de orientadores passou a receber o foco do teclado e ganhou um nome explícito, com tabIndex={0} e aria-label. Assim, ela pode ser percorrida e anunciada sem o mouse (ciclo 7).
→No Assistente de IA, a área da conversa (role="log") passou a receber o foco do teclado (tabIndex={0}). Depois de cada envio, o foco volta ao campo de mensagem. O campo de mensagem e os botões Enviar e Nova conversa passaram a ter área de toque de 44 × 44 px (ciclo 8).
→O indicador de que o Assistente está escrevendo passou a parar a animação quando o sistema do aparelho pede menos movimento na tela (prefers-reduced-motion, WCAG 2.2.2, ciclo 8).
→Os pontos clicáveis das redes e do mapa (redes de colaboração, coautoria e similaridade, e o detalhamento por território) passaram a funcionar pelo teclado, com Enter ou Espaço (role="button", tabIndex, aria-pressed). Os blocos que abrem e fecham (perfil do programa, cartões de trajetória, listas) viraram botões que informam se estão abertos (aria-expanded e aria-controls). As áreas com rolagem passaram a receber o foco do teclado. Os controles deslizantes e os controles menores ganharam nome e área de toque de pelo menos 24 px (ciclo 8).
→As nuvens de palavras passaram a funcionar pelo teclado. Cada termo é um botão (aria-pressed, aria-expanded e aria-controls). Ao ser acionado, ele mostra abaixo a lista de teses e dissertações relacionadas, com um botão de acesso ao texto completo de cada trabalho (ciclo 9).
→Foi corrigida uma área com rolagem na lista de docentes que aumentava a altura da página. Com o erro, era possível rolar muito além do conteúdo, até uma área vazia, o que desorientava quem navegava pelo teclado ou pelo ponteiro. Agora a altura da página corresponde ao conteúdo (ciclo 10).
→Em Linhas & temas, o acesso ao texto completo das teses e dissertações passou a usar o mesmo botão das outras páginas, com altura mínima de 24 px (ciclo 10).
→As nuvens com 24 termos ou mais ganharam um controle de ordem (por frequência ou alfabética) e uma busca com sugestões. A busca funciona pelas setas, Enter e Esc, e o leitor de tela anuncia as sugestões e a opção escolhida (combobox com role="combobox", aria-expanded, aria-controls, aria-autocomplete="list" e aria-activedescendant, sobre uma lista role="listbox" com opções role="option" e aria-selected). O contador de termos filtrados é anunciado a cada mudança, por ser uma região aria-live="polite" (ciclo 13).
→Os gráficos passaram a levar a um destino quando clicados: a lista de obras, defesas ou pessoas do filtro, ou a ficha do programa em Perfil de um programa. Como o clique do ponteiro não serve para quem usa o teclado, cada rótulo da tabela de dados do gráfico virou um botão com o mesmo destino, e aria-pressed indica o filtro aberto. A lista que se abre é uma área com rolagem e com nome para o leitor de tela (ciclo 13).
→A nuvem passou a abrir em formato compacto, com as palavras encaixadas umas nas outras. Essa posição é só visual. No código, as palavras continuam na ordem de ocorrência, que é a ordem seguida pelo leitor de tela e pela tecla Tab. Quem prefere as palavras em linha encontra a disposição por ocorrência e a alfabética no mesmo controle. Em telas estreitas, ou quando algum termo não cabe, a nuvem volta sozinha à disposição em linha (ciclo 13).
→O menu passou a abrir um bloco de cada vez: o bloco da página em uso fica aberto e os outros ficam fechados. O nome de cada bloco virou um botão que informa se está aberto (aria-expanded e aria-controls). A lista fechada fica oculta (hidden) e sai também da ordem do teclado e do que o leitor de tela percorre. No celular, a tecla Tab passa a percorrer só os itens do bloco em uso, e não mais os trinta e oito itens do menu (ciclo 13).
→A barra do alto passou a mostrar, no fim do caminho de navegação, o painel que está na tela, marcado com aria-current="location". Esse nome é um botão que abre a lista das seções da página, com o nome inteiro de cada uma na dica. A lista fecha quando você escolhe uma seção, clica fora dela ou aperta Escape (ciclo 13).
→Em telas estreitas, a barra do alto passou a ter duas linhas: a marca em cima e o caminho de navegação inteiro embaixo. Numa linha só, o nome da plataforma encolhia para duas letras e o caminho aparecia cortado. O primeiro passo do caminho continua disponível para quem usa leitor de tela. A distância entre a barra e o início de cada seção passou a ser calculada pela altura real da barra, e não por um número fixo (ciclo 13).

Compreensão

WCAG 3.x · eMAG 6

→Quando você troca a língua da interface (PT-BR, EN, ES), o código da página informa a nova língua (atributo lang do elemento <html>). Assim, o leitor de tela usa a pronúncia certa.
→Todos os campos de busca têm um nome para o leitor de tela, tirado do texto de exemplo do campo (aria-label gerado a partir do placeholder pelo componente SearchInput).
→Todos os seletores de filtro (<select>) têm um nome explícito que diz o que eles filtram (aria-label).
→O seletor de cor da rede em Cruzamentos passou a se chamar "Cor dos nós do grafo" para o leitor de tela (aria-label). Assim, a função do controle fica clara (ciclo 5).
→Todos os cabeçalhos das tabelas de dados (<th>) passaram a indicar que valem para a coluna (scope="col"). Assim, o leitor de tela liga cada célula ao cabeçalho certo (ciclo 6).
→O controle deslizante da rede de similaridade TF-IDF, uma medida de semelhança entre textos, ganhou um nome em aria-label que informa a unidade e o intervalo de valores (ciclo 6).
→As seções sem nome (<section>) nas páginas Visão Geral e Sobre ganharam um nome em aria-label, o que facilita a navegação pelas regiões da página (ciclo 6).
→O botão do menu no celular voltou a ter o nome correto em espanhol; o erro tinha reaparecido numa atualização (ciclo 6).
→Os links que abrem em nova aba (target="_blank") avisam isso a quem usa leitor de tela, com um texto que não aparece na tela: "(abre em nova aba)".
→Os títulos seguem a mesma hierarquia em todas as páginas (h1 → h2 → h3).
→O componente de título dos painéis (PanelHeader) permite escolher o nível do título no código (h2, h3 ou h4).
→As grades que imitavam tabelas passaram a ser tabelas de verdade no código (<table>). Nas tabelas largas, a coluna que identifica cada linha (programa, docente ou ano) é marcada como cabeçalho de linha (<th scope="row">). Os botões que trocam a medida ou a ordem informam ao leitor de tela qual opção está ativa, com aria-pressed e aria-sort (ciclo 8).

Robustez

WCAG 4.x · eMAG 6

→O menu lateral é marcado como região de navegação (<nav>), com nome em aria-label nas três línguas.
→Os grupos de links do menu são marcados como grupos (role="group") e têm nome em aria-label.
→No menu, o link da página atual é marcado com aria-current="page".
→A área principal da página (id="main-content", tabIndex={-1}) recebe o foco quando você usa o link para pular até o conteúdo.
→O caminho de navegação no alto (breadcrumb) é marcado no código como navegação e lista (<nav> e <ol>), e o item atual é indicado por aria-current="page".
→Os botões de tema e de língua têm nome explícito (aria-label). O desenho deles é pequeno (26 × 26 px), mas a área que responde ao toque tem 44 × 44 px, por meio de uma camada invisível, como recomenda a norma (ciclo 8).
→Foi eliminada uma diferença entre a página montada no servidor e a página no navegador, na escolha do tema (classe de tema do <html>). O tema padrão passou a ser o mesmo nos dois lados, e o atributo suppressHydrationWarning foi aplicado ao elemento raiz. Com isso, sumiu o único aviso desse tipo no console (WCAG 4.1.1, ciclo 8).
→Uma limpeza técnica em toda a plataforma retirou transparências que reduziam o contraste de textos informativos. Também foram corrigidos erros de tipagem no código e um aviso de renderização (chaves de lista). Isso reduz falhas que podem atrapalhar o funcionamento das tecnologias assistivas (ciclo 8).
→Todas as 35 páginas têm uma descrição própria (meta description), que ajuda as ferramentas de navegação e os leitores de tela a informar do que trata cada página.

▸ limitações conhecidas e próximos passos

·Ainda não foram feitos testes com pessoas que usam tecnologias assistivas (NVDA, JAWS, VoiceOver, TalkBack). Esses testes são necessários para confirmar que a plataforma funciona bem para elas.
·Os gráficos mais complexos, como as redes e as matrizes de similaridade, têm só uma descrição parcial em texto, no nome do gráfico (aria-label). Eles não oferecem todos os dados ao leitor de tela.
·As respostas do Assistente de IA são geradas automaticamente e podem ter erros. A interface do Assistente é acessível, mas o que ele responde deve ser conferido nas páginas da plataforma e nas fontes originais.
·O modo de alto contraste do sistema operacional ainda não foi testado formalmente.

▸ reporte uma barreira

Se você encontrar uma barreira de acessibilidade nesta plataforma, escreva ao responsável pelo projeto. O seu relato entra diretamente nos próximos ciclos de melhoria.

Ir para a página de contato

Proteção de dados (LGPD)

Outras iniciativas