Design System acessível como estratégia de inclusão digital: uma abordagem baseada em UX para usuários com baixa visão

ARTIGO ORIGINAL

Design System acessível como estratégia de inclusão digital: uma abordagem baseada em UX para usuários com baixa visão

Ana Beatriz Marques Moreira¹; Tayse Virgulino Ribeiro²

Accessible Design System and High-Fidelity Prototype for Users with Low Vision: A UX-Based Proposal for Digital Inclusion

Abstract

Digital transformation has expanded access to services, content, and interactions in digital environments, yet it still imposes significant barriers for users with low vision, especially regarding contrast, legibility, navigation, and interface comprehension. Although accessibility guidelines and evaluation methods are available, proposals that translate these requirements into systematic and replicable design solutions remain limited. In response to this gap, this article presents an accessible Design System and a high-fidelity prototype aimed at users with low vision, focusing on digital inclusion through UX principles. The study was developed from the systematization of recurring barriers identified in the literature and in case studies, followed by a comparative heuristic evaluation of navigation patterns, the definition of the information architecture, and the development of a style guide including an accessible color palette, typographic system, reusable components, and interaction patterns. As a result, a solution centered on a persistent side menu, low cognitive load flows, and visual adaptation features was structured and then materialized into a navigable prototype. The findings indicate that the articulation between an accessible Design System and a high-fidelity prototype strengthens interface consistency, reduces usability barriers, and provides a practical artifact to support design and development teams in creating more inclusive digital experiences, in line with SDGs 4, 9, and 10.

Keywords: Digital Accessibility; Low Vision; Design System; UX Design; WCAG.

1. Introdução

A acessibilidade digital tem se consolidado como tema central na Interação Humano-Computador (IHC) e na Engenharia de Software, especialmente em um contexto no qual serviços públicos, educacionais e informacionais são progressivamente mediados por ambientes digitais. Nesse cenário, as tecnologias podem tanto ampliar a autonomia e a participação social quanto reforçar processos de exclusão, quando interfaces são projetadas sem considerar a diversidade de condições de uso [14,3].

Essa problemática torna-se particularmente relevante no campo da deficiência visual. No caso da baixa visão, o indivíduo preserva algum resíduo visual funcional, mas sua interação com sistemas digitais depende diretamente das condições de apresentação da informação, como contraste adequado, tipografia legível, possibilidade de ampliação sem perda de conteúdo, foco visível e previsibilidade de navegação. A literatura da área indica, inclusive, que a conformidade com diretrizes de acessibilidade é necessária, mas nem sempre suficiente para assegurar eficiência e satisfação em contexto real de uso, o que reforça a importância da adaptação visual e da personalização da interface [5,10].

No contexto brasileiro, a relevância do tema é evidenciada não apenas pela expressiva quantidade de pessoas com dificuldades visuais, mas também pela baixa conformidade dos websites nacionais com critérios de acessibilidade. Em 2024, levantamento da BigDataCorp em parceria com o Movimento Web para Todos mostrou que apenas 2,9% dos sites brasileiros foram aprovados em todos os testes de acessibilidade aplicados, o que evidencia a persistência de barreiras no acesso à informação e à execução de tarefas em ambientes digitais [2].

Embora a literatura já apresente diagnósticos consistentes sobre essas barreiras, como contraste insuficiente, navegação confusa, ausência de texto alternativo e limitação de mecanismos de adaptação, ainda são reduzidas as propostas que traduzem esses achados em soluções sistematizadas, reutilizáveis e diretamente aplicáveis por equipes de design e desenvolvimento. Os materiais consolidados na pesquisa mostram, justamente, que essas barreiras permanecem recorrentes e apontam para a necessidade de abordagens que ultrapassem a conformidade básica com as diretrizes, incorporando personalização, previsibilidade e estruturação de componentes [6,1].

Assim, observa-se uma lacuna entre a identificação dos problemas e sua incorporação efetiva ao processo de design e desenvolvimento. Tal lacuna é particularmente sensível no recorte da baixa visão, uma vez que boa parte dos estudos ainda aborda a acessibilidade de modo amplo, sem aprofundar as especificidades de cada condição e sem avançar para a proposição de artefatos técnicos voltados à sua promoção [1,16].

Diante desse contexto, este estudo parte da seguinte questão de pesquisa: como transformar barreiras recorrentes de acessibilidade para usuários com baixa visão em uma solução sistematizada, baseada em um Design System acessível e em um protótipo de alta fidelidade?

Como resposta, o objetivo geral consiste em desenvolver e apresentar um Design System acessível, acompanhado de um protótipo navegável, orientados à promoção da inclusão digital de usuários com baixa visão, com base em princípios de User Experience. Especificamente, busca-se: (i) sistematizar barreiras recorrentes identificadas na literatura; (ii) avaliar comparativamente padrões de navegação; e (iii) traduzir esses achados em componentes, tokens e fluxos de interação documentados.

A principal contribuição do estudo reside na transformação de diagnósticos de acessibilidade em um artefato estruturado e replicável, deslocando a acessibilidade de uma abordagem corretiva para uma perspectiva integrada ao processo de design. Nesse sentido, a proposta contribui para o desenvolvimento de interfaces mais consistentes, escaláveis e inclusivas, alinhadas aos Objetivos de Desenvolvimento Sustentável 4, 9 e 10.

2. Referencial teórico

A construção de interfaces digitais acessíveis para usuários com baixa visão exige mais do que a aplicação isolada de critérios normativos. Ela demanda uma articulação entre estrutura de projeto, adaptação visual e comunicação clara da interação. Nesse sentido, o presente estudo apoia-se em três eixos teóricos: os Design Systems como infraestrutura de acessibilidade, a personalização visual como requisito funcional para baixa visão e a semântica de estados dinâmicos em interfaces interativas.

2.1 Design Systems como infraestrutura de acessibilidade

Os Design Systems podem ser compreendidos como sistemas estruturados de componentes reutilizáveis, tokens, padrões visuais e diretrizes documentadas que orientam o desenvolvimento de produtos digitais com consistência. Seu papel não se limita à padronização estética, pois também organiza decisões recorrentes de projeto em uma base replicável, capaz de reduzir variações indevidas entre telas, fluxos e equipes [6].

No campo da acessibilidade, essa lógica é especialmente relevante. Quando contraste, tipografia, foco visível, espaçamento e estados interativos são incorporados à estrutura do sistema, deixam de ser tratados como correções tardias e passam a compor a base do produto. Estudos recentes mostram que a conversão de avaliações de acessibilidade em ações implementáveis favorece sua incorporação efetiva por equipes de design e desenvolvimento, reduzindo a distância entre diagnóstico e correção [16].

Essa perspectiva também é reforçada por trabalhos aplicados que articulam diretrizes de acessibilidade e princípios de Interação Humano-Computador no redesenho de interfaces. No caso do site da rede ELLAS, por exemplo, a combinação entre WCAG, usabilidade e reestruturação informacional contribuiu para ganhos de inclusão e melhoria da experiência de uso, especialmente para usuários com deficiência visual [3].

Assim, os Design Systems podem ser entendidos como infraestrutura de acessibilidade porque permitem transformar exigências inclusivas em propriedades permanentes do sistema. Nessa lógica, recursos como escalas tipográficas, contraste reforçado, estados de foco e dimensões mínimas de alvos interativos passam a ser atributos da arquitetura da interface, e não adaptações isoladas adicionadas apenas ao final do processo [6].

2.2 Personalização visual como requisito funcional para baixa visão

No caso da baixa visão, a personalização visual não constitui uma funcionalidade acessória, mas uma condição de uso. Diferentemente da cegueira, a baixa visão preserva algum resíduo visual funcional, cuja efetividade depende das condições de apresentação da interface. Isso envolve contraste suficiente, tipografia legível, ampliação sem perda de estrutura, controle de densidade informacional e manutenção da navegabilidade em diferentes níveis de zoom [10].

A literatura da área mostra que a conformidade com as diretrizes técnicas é necessária, mas nem sempre suficiente para garantir eficiência, conforto e satisfação em contexto real. Ferati et al. [5] argumentam que o modelo de solução única para todos é inadequado para pessoas com deficiência visual, pois esse público apresenta necessidades perceptivas heterogêneas. Por essa razão, mecanismos de adaptação e personalização devem ser considerados parte constitutiva da interface, e não apenas complementos opcionais.

Essa compreensão é reforçada por estudos empíricos que identificam barreiras recorrentes diretamente relacionadas à baixa visão. Entre elas, destacam-se contraste insuficiente, fonte não ajustável, ausência de rótulos, controles pequenos e navegação confusa, problemas que afetam leitura, orientação e execução de tarefas em ambientes digitais [6,10].

Desse modo, a acessibilidade para baixa visão exige uma abordagem centrada na variabilidade funcional do usuário. Interfaces projetadas para esse público devem admitir ajustes de escala, contraste, espaçamento e organização visual sem comprometer a estrutura do sistema. A qualidade acessível de uma interface, portanto, depende não apenas do cumprimento de critérios mínimos, mas também da sua capacidade de acomodar diferentes formas de percepção visual [5].

2.3 Comunicação dinâmica de estado e acessibilidade em interfaces interativas

Outro aspecto decisivo para a acessibilidade em ambientes digitais contemporâneos é a comunicação de alterações dinâmicas de estado. Em interfaces interativas, resultados de busca, mensagens de erro, confirmações de ação e validações de formulário frequentemente ocorrem sem recarregamento completo da página. Quando essas mudanças não são comunicadas de modo inteligível, surgem barreiras que afetam orientação, previsibilidade e compreensão da interação [17].

Nesse contexto, os recursos da Web Accessibility Initiative – Accessible Rich Internet Applications (WAI-ARIA) [19] assumem papel relevante. A adoção de atributos semânticos, estados e propriedades programáticas permite tornar atualizações dinâmicas perceptíveis às tecnologias assistivas, reduzindo pontos cegos em interações mediadas por scripts e componentes assíncronos [17].

Essa discussão é particularmente importante para usuários com baixa visão, que podem combinar resíduo visual, ampliação de tela e tecnologias assistivas no uso de uma mesma interface. Nesses casos, a informação de estado não pode depender apenas de mudanças cromáticas ou deslocamentos discretos de layout. Ela precisa ser visível, semanticamente estruturada e programaticamente comunicável, de modo que a interação permaneça compreensível e previsível [7].

Portanto, a acessibilidade em interfaces interativas depende tanto da qualidade visual quanto da clareza com que o sistema informa transições, feedbacks e resultados de ação. Essa camada semântica é especialmente relevante em formulários, buscas e componentes dinâmicos, nos quais a ausência de retorno claro pode comprometer a continuidade da tarefa e a autonomia do usuário [17].

2.4 Síntese teórica do estudo

Os três eixos apresentados convergem para uma compreensão ampliada da acessibilidade digital no contexto da baixa visão. Em primeiro lugar, os Design Systems oferecem a base estrutural para incorporar acessibilidade de forma escalável e consistente. Em segundo, a personalização visual evidencia que a adaptação da interface às necessidades perceptivas do usuário constitui requisito funcional do sistema. Em terceiro, a comunicação dinâmica de estado demonstra que a acessibilidade também depende da forma como o sistema informa mudanças, valida ações e organiza o fluxo interativo.

Com base nessa articulação, sustenta-se que a produção de artefatos reutilizáveis, como tokens, componentes e padrões documentados, representa um caminho promissor para reduzir a distância entre diretrizes abstratas e implementação efetiva. É a partir dessa fundamentação que se estrutura o percurso metodológico do presente estudo.

3. Metodologia

A presente pesquisa caracteriza-se como aplicada, por buscar desenvolver e avaliar um artefato voltado à resolução de um problema concreto de acessibilidade digital para usuários com baixa visão. Do ponto de vista da abordagem, trata-se de uma investigação mista, na medida em que articula procedimentos qualitativos, relacionados à interpretação de diretrizes, às decisões projetuais e à análise heurística, com procedimentos quantitativos, empregados na mensuração da conformidade do artefato aos requisitos definidos.

O percurso metodológico fundamenta-se no Design Science Research (DSR), abordagem apropriada à criação e avaliação de artefatos em Sistemas de Informação, por permitir a transformação de conhecimento diagnóstico em soluções projetuais estruturadas e avaliáveis [9]. De acordo com essa abordagem, a pesquisa deve produzir um artefato capaz de resolver um problema relevante e, simultaneamente, gerar conhecimento prescritivo a partir de seu desenvolvimento e avaliação [4]. No presente estudo, essa orientação mostra-se adequada porque o objetivo não é apenas analisar barreiras de acessibilidade para baixa visão, mas traduzir tais achados em um Design System acessível e em um protótipo de alta fidelidade.

Em consonância com o plano metodológico estabelecido na pesquisa, o DSR foi organizado em três fases sequenciais: Análise e Fundamentação, Avaliação Comparativa e Construção e Desenvolvimento do Artefato. A primeira fase concentrou-se na identificação e sistematização das barreiras recorrentes de acessibilidade para baixa visão, a partir de revisão de literatura e análise de interfaces digitais brasileiras. A segunda dedicou-se à comparação de padrões de navegação, com o objetivo de selecionar a alternativa mais adequada ao público-alvo. O presente artigo concentra-se na terceira fase, que toma os resultados anteriores como base diagnóstica e prescritiva para o desenvolvimento do Design System acessível e do protótipo de alta fidelidade. Esse encadeamento é coerente com abordagens que defendem a conversão de avaliações de acessibilidade em ações implementáveis e integradas ao fluxo de design e desenvolvimento [16].

Na Fase 1, correspondente à Análise e Fundamentação, foram mobilizados dois procedimentos complementares. O primeiro consistiu na revisão e sistematização da literatura sobre acessibilidade digital para usuários com baixa visão, com foco em barreiras recorrentes e requisitos de projeto. O segundo envolveu a análise de estudos de caso em websites brasileiros de grande circulação, buscando identificar a presença ou ausência de diretrizes de acessibilidade e princípios de experiência do usuário. Para esse diagnóstico, foram combinadas avaliações automáticas e verificações manuais, estratégia recomendada pela literatura por ampliar a capacidade de detecção de problemas estruturais e de uso [10,7,16]. Como produto dessa fase, foi elaborada uma Matriz de Barreiras e Diretrizes, consolidando os principais problemas a serem enfrentados pelo artefato.

Na Fase 2, denominada Avaliação Comparativa, o foco recaiu sobre a análise de diferentes padrões de navegação. Para isso, foram construídos três mockups de uma mesma estrutura de página, variando apenas o modelo de menu adotado: superior fixo, lateral esquerdo e hambúrguer. Esses modelos foram avaliados com base em um Framework de Heurísticas Inclusivas, derivado dos resultados da fase anterior, e em critérios clássicos de usabilidade e acessibilidade [15,18]. A avaliação foi registrada em matriz própria, com pontuação ordinal de 0 a 2 para cada heurística, permitindo comparar criticamente os padrões testados. Como resultado, o menu lateral persistente foi indicado como a alternativa mais adequada ao público com baixa visão, especialmente em aspectos de legibilidade, previsibilidade espacial e navegação por teclado.

A Fase 3, que constitui o foco deste artigo, concentrou-se na construção e no desenvolvimento do artefato. Essa etapa foi realizada no Figma, utilizado como ambiente de especificação visual, organização do sistema de design e prototipação navegável. O objeto desenvolvido consiste em um protótipo de portal informacional genérico orientado a usuários com baixa visão, concebido para materializar soluções replicáveis para os problemas diagnosticados nas fases anteriores. A condução dessa etapa foi orientada por princípios do Design Centrado no Usuário, com apoio de personas e cenários representativos, ainda que a validação final, neste recorte, não tenha incluído testes diretos com usuários reais.

O processo de construção do artefato ocorreu em três níveis articulados. No primeiro, foram definidos os tokens de design, abrangendo cor, tipografia, espaçamento e propriedades visuais voltadas à legibilidade, ao contraste e à consistência da interface. No segundo, foi estruturada uma biblioteca de componentes acessíveis, incluindo botões, campos de formulário, menu lateral persistente, skip link, barra de acessibilidade e regiões com atualização dinâmica. No terceiro, esses elementos foram integrados em telas e fluxos de tarefa documentados, compondo um protótipo navegável de alta fidelidade capaz de simular situações críticas de uso, como navegação informacional, preenchimento de formulários e personalização visual da interface. Esse percurso retoma os artefatos previstos no desenvolvimento da pesquisa, como mapa do site, fluxogramas de tarefa, guia de estilo, biblioteca de componentes e protótipo interativo.

A avaliação do artefato foi conduzida por meio de um Checklist de Conformidade Heurística com 110 itens, organizado em seis categorias derivadas do framework construído nas etapas anteriores: contraste e legibilidade; tamanho e espaçamento; navegação e interação; feedback e comunicação de estado; consistência e padrões; e flexibilidade e personalização. Cada componente e cada tela do protótipo foram examinados quanto à presença da solução correspondente à barreira diagnosticada e ao seu grau de implementação. Para isso, empregou-se uma escala ordinal de 0 a 2, em que 0 indica não atendimento, 1 indica atendimento parcial e 2 indica atendimento completo. Esse procedimento permitiu verificar, de forma sistemática, a aderência do Design System e do protótipo aos requisitos de acessibilidade previamente estabelecidos.

Como limitação metodológica, reconhece-se que a validação permanece heurística, baseada em diretrizes, análise especializada e exame do artefato em ambiente de prototipação. Esse tipo de avaliação é adequado ao estágio atual da pesquisa e suficiente para verificar coerência interna, conformidade e rastreabilidade entre barreiras e soluções. Contudo, não substitui a validação empírica com usuários reais com baixa visão. Assim, testes de uso em contexto real, voltados à análise de eficiência, compreensão, satisfação e adequação funcional, constituem a etapa subsequente da investigação, já prevista no delineamento geral do estudo.

4. Desenvolvimento e discussão

​​ Esta seção apresenta o artefato resultante da terceira fase do Design Science Research e discute de que modo suas decisões de projeto respondem às barreiras identificadas nas etapas anteriores. Mais do que atender a critérios técnicos de conformidade, o Design System acessível e o protótipo de alta fidelidade foram concebidos como estratégia de inclusão digital para usuários com baixa visão. A análise é organizada em cinco níveis: definição visual do sistema, biblioteca de componentes, telas do protótipo, fluxos críticos de interação e avaliação global do artefato.

4.1 Definição visual do sistema

A paleta cromática foi estruturada com prioridade para legibilidade, contraste e estabilidade perceptiva sob ampliação. O token de texto principal alcança razão de contraste de 18,1:1 sobre fundo branco, superando amplamente o nível AAA para texto corrido. O token primário, empregado em links, ações e indicadores de foco, apresenta razão de 7,8:1, também compatível com o nível AAA. Além disso, o sistema adota o princípio de redundância informacional, de modo que nenhuma informação é transmitida exclusivamente por cor, sendo sempre acompanhada por rótulos textuais ou ícones, em conformidade com boas práticas de acessibilidade visual [18,6].

Essa decisão não atende apenas a uma exigência normativa, mas responde a uma barreira recorrente para baixa visão. Estudos da área mostram que contraste insuficiente compromete leitura, orientação e distinção entre estados da interface, especialmente em contextos de ampliação, fadiga visual ou luminosidade variável [10,5]. Por isso, o modo de alto contraste foi implementado por substituição do conjunto de tokens visuais, sem necessidade de reescrever componentes, reforçando a escalabilidade do sistema [6].

A escala tipográfica foi definida em unidades relativas, com o objetivo de preservar o redimensionamento pelo navegador e manter a estrutura da página sob ampliação. A família tipográfica adotada foi selecionada pela diferenciação morfológica entre caracteres semelhantes, como “I”, “l” e “1”, aspecto relevante para usuários com baixa acuidade visual. A entrelinha mínima foi fixada em 1,5, buscando reduzir o efeito de crowding e melhorar o rastreamento visual do texto, problema recorrente em usuários com baixa visão [5]. Dessa forma, o sistema visual foi construído para sustentar não apenas conformidade, mas também conforto de leitura e previsibilidade.

4.2 Biblioteca de componentes acessíveis

A biblioteca é composta por seis componentes estruturais, cada um com estados visuais documentados, contemplando os estados normal, hover, foco, ativo e desabilitado, e anotações de acessibilidade que orientam a implementação em código. Os botões possuem dimensões mínimas de quarenta e quatro por quarenta e quatro pixels, em conformidade com o critério WCAG 2.5.8, que define o tamanho mínimo de alvos de toque. O rótulo textual é obrigatório, sendo proibido o uso de ícones isolados como única forma de identificação. O estado de foco é sinalizado por anel laranja com offset visível sobre qualquer fundo da paleta, e a remoção do indicador de foco por meio da propriedade outline none é regra estrutural do sistema, impedindo que desenvolvedores removam inadvertidamente o indicador.

Os campos de formulário implementam label permanentemente visível acima do campo, sendo proibido o uso de placeholders como substitutos de label, em conformidade com o critério WCAG 1.3.1. A validação ocorre em linha ao sair do campo, com mensagem de erro vinculada via aria-describedby, e campos afins são agrupados com fieldset e legend. Após submissão com erros, o foco é redirecionado programaticamente ao sumário de erros, padrão recomendado por Hakami e Al-Aama [8] como estratégia eficaz para formulários acessíveis a usuários com deficiência visual.

O menu lateral esquerdo, padrão validado na fase anterior como o de maior adequação para baixa visão, ocupa largura fixa, com itens de altura mínima de quarenta e oito pixels. O item ativo é sinalizado por borda esquerda destacada e por aria-current page, transmitindo identificação visual e semântica simultaneamente, e o componente persiste em todas as telas internas, garantindo previsibilidade da navegação conforme o critério WCAG 3.2.3. O skip link é o primeiro elemento focável de cada página, visível apenas ao receber foco do teclado, com destino ao conteúdo principal.

A barra de acessibilidade oferece escala de fonte de cem a duzentos por cento, modo alto contraste, leitura simplificada e espaçamento ampliado, atendendo à constatação de Ferati et al. [5] de que a personalização é requisito funcional, e não recurso opcional, para usuários com baixa visão. Por fim, regiões aria-live complementam o sistema: conforme demonstrado por Watanabe [17], atualizações dinâmicas via JavaScript não são percebidas sem sinalização explícita, razão pela qual o Design System define aria-live polite para resultados de busca e aria-live assertive para erros críticos de formulário.

4.3 Telas e arquitetura do protótipo

O protótipo materializa um portal informacional genérico, estruturado com Página Inicial, Conteúdo, Busca, Formulários e Menu de Acessibilidade. A Figura 1​​ apresenta o mapa do site, evidenciando a arquitetura da informação adotada e a relação hierárquica entre as áreas funcionais.

Figura 1: Mapa do site do protótipo genérico acessível

Fonte: elaborado pelas autoras (2026).

A Figura 2​​ ilustra a tela inicial do protótipo, na qual se observa a permanência do menu lateral esquerdo, a área de conteúdo com hierarquia tipográfica clara e a barra de acessibilidade fixa na parte inferior da página. A tela materializa as decisões tomadas no Design System quanto a contraste, espaçamento e indicação visual do item de navegação ativo.

Figura 2: Tela inicial do protótipo com menu lateral persistente

Fonte: elaborado pelas autoras (2026).

A Figura 3​​ apresenta o painel de configurações de acessibilidade, que concentra os controles de personalização visual disponibilizados ao usuário. O painel oferece ajustes independentes para alto contraste, tamanho da fonte, realce do indicador de foco do teclado e modo de leitura simplificada, de modo a respeitar a heterogeneidade das condições de baixa visão e atender aos requisitos funcionais identificados na literatura.

Figura 3: Painel de configurações de acessibilidade

Fonte: elaborado pelas autoras (2026).

4.4 Fluxos críticos de interação

Três fluxos críticos foram implementados e documentados por fluxogramas de tarefa, detalhando caminhos de interação, decisões do usuário e critérios WCAG verificados em cada etapa. Os fluxos foram selecionados por representarem situações críticas para a baixa visão: localizar informação por meio de busca, preencher formulários e ajustar preferências visuais. A Figura 4​​ reúne os três fluxogramas em uma representação unificada.

O Fluxo de Busca disponibiliza campo com label visível, atalho de teclado para foco rápido e resultados em região aria-live polite, garantindo que a atualização do conteúdo seja anunciada por tecnologias assistivas sem interromper a tarefa do usuário. O Fluxo de Formulário implementa validação em linha, sumário de erros com links âncora para os campos correspondentes e substituição do CAPTCHA visual por um desafio simples de baixa carga cognitiva, reduzindo a barreira recorrente identificada na fase diagnóstica. O Fluxo de Acessibilidade oferece controles aplicados imediatamente por substituição de tokens CSS, com persistência prevista das preferências entre sessões.

Figura 4: Fluxogramas dos três fluxos críticos do protótipo

Fonte: elaborado pelas autoras (2026).

A Figura 5​​ detalha o componente de formulário acessível, exemplificando o tratamento de label visível, mensagem de erro vinculada e indicação clara do estado de foco, considerados pela literatura como elementos críticos para a usabilidade por usuários com baixa visão.

Figura 5: Componente de formulário acessível com validação em linha

Fonte: elaborado pelas autoras (2026).

dhdhdgh

4.5 Avaliação global do artefato

O Checklist de Conformidade Heurística foi aplicado a todos os componentes e telas do protótipo, totalizando 110 itens distribuídos em seis categorias. O resultado global de 94,5% de conformidade indica elevada aderência do artefato aos requisitos estabelecidos nas fases anteriores. As categorias Navegação e Interação (97%) e Consistência e Padrões (98%) apresentaram os melhores resultados, o que reforça a eficácia do menu lateral persistente e da padronização dos estados visuais como estratégias robustas para baixa visão.

A menor pontuação foi observada em Flexibilidade e Personalização (90%). Esse resultado não decorre da ausência de recursos de adaptação, mas da limitação própria do ambiente de prototipação, que não permite demonstrar integralmente a persistência real de preferências entre sessões sem implementação em código. Ainda assim, o desempenho alcançado indica que a lógica de personalização foi adequadamente incorporada à arquitetura do sistema.

Em termos mais amplos, os resultados sugerem que a articulação entre Design System e protótipo de alta fidelidade constitui uma via promissora para transformar diagnósticos de acessibilidade em soluções projetuais consistentes. Em vez de concentrar esforços em correções pontuais e posteriores, o artefato organiza requisitos de acessibilidade em uma estrutura reutilizável, documentada e escalável. Essa passagem da conformidade isolada para a sistematização projetual constitui, precisamente, a principal contribuição do estudo.

5. Considerações finais

Os resultados deste estudo demonstram que a acessibilidade para usuários com baixa visão pode ser incorporada como estrutura de projeto, e não apenas como etapa posterior de verificação. A partir da aplicação do Design Science Research, foi possível transformar barreiras identificadas na literatura e nas etapas anteriores da pesquisa em um Design System acessível e em um protótipo de alta fidelidade, organizados em tokens, componentes e padrões de interação.

A elevada taxa de conformidade obtida na avaliação heurística indica que a sistematização projetual constitui uma estratégia eficaz para incorporar requisitos de acessibilidade de forma consistente e escalável. Mais do que atender a critérios normativos, o artefato proposto evidencia o potencial de integrar a acessibilidade ao processo de design desde suas etapas iniciais, favorecendo maior coerência entre diagnóstico, decisão e implementação.

Como principal contribuição, o estudo reduz a distância entre diagnóstico e implementação ao oferecer um modelo replicável que pode ser adotado por equipes de design e desenvolvimento em diferentes contextos digitais. Ao propor a acessibilidade como propriedade estrutural de sistemas de design, o trabalho amplia a discussão para além da conformidade técnica, incorporando aspectos de experiência do usuário e adaptação funcional da interface.

Em perspectiva mais ampla, a contribuição do estudo para os Objetivos de Desenvolvimento Sustentável não se limita a uma adesão genérica ao discurso da inclusão. No âmbito do ODS 9 [12], o artefato proposto opera como infraestrutura projetual reutilizável, ao sistematizar requisitos de acessibilidade em tokens, componentes e padrões documentados, favorecendo práticas de inovação mais consistentes e escaláveis em ambientes digitais. Em relação ao ODS 10 [13], sua contribuição é mais direta, pois busca reduzir barreiras que restringem o acesso de pessoas com baixa visão à informação, aos serviços e à participação social mediada por interfaces digitais. Já no que se refere ao ODS 4 [11], a articulação ocorre na medida em que o Design System e o protótipo oferecem um modelo transferível para contextos informacionais e educacionais, com potencial de ampliar o acesso qualificado a conteúdos digitais em condições mais equitativas. Nesse sentido, o estudo insere a acessibilidade não apenas como requisito técnico, mas como parte de uma agenda de transformação digital comprometida com inovação inclusiva e redução de desigualdades.

Apesar dos avanços, a pesquisa apresenta limitações relacionadas à ausência de validação empírica com usuários reais e à implementação restrita ao ambiente de prototipação. Embora a avaliação heurística seja adequada ao estágio atual da investigação, aspectos como eficiência, compreensão, satisfação e adequação funcional ainda precisam ser confirmados em situações reais de uso com pessoas com baixa visão. Além disso, a persistência efetiva das preferências de personalização entre sessões depende de implementação em código, o que extrapola as possibilidades do ambiente de prototipação utilizado.

Dessa forma, estudos futuros devem contemplar a implementação do sistema em código, a validação da persistência real das preferências de acessibilidade, a realização de testes de usabilidade com usuários com baixa visão e a ampliação do Design System para contemplar componentes adicionais, como tabelas e gráficos acessíveis. Também se mostra promissora a investigação de sua integração com tecnologias assistivas baseadas em inteligência artificial.

Em síntese, o estudo contribui para o avanço da acessibilidade digital ao propor uma abordagem integrada, estruturada e orientada à prática, capaz de apoiar a construção de interfaces mais consistentes, adaptáveis e inclusivas no contexto da transformação digital.

6. Declaração de direitos

As autoras declaram ser detentoras dos direitos autorais da presente obra, que o artigo não foi publicado anteriormente e que não está sendo considerado por outra(o) Revista/Journal. Declaram que as imagens e textos publicados são de responsabilidade das autoras, e não possuem direitos autorais reservados a terceiros. Textos e/ou imagens de terceiros são devidamente citados ou devidamente autorizados com concessão de direitos para publicação quando necessário. Declaram respeitar os direitos de terceiros e de Instituições públicas e privadas. Declaram não cometer plágio ou autoplágio e não ter considerado/gerado conteúdos falsos e que a obra é original e de responsabilidade das autoras.

7. Referências

• BASTOS, Luana Arrial; CORDEIRO, Daoana Carolaine Alka; ZAGHENI, Alessandro Ledra; KRUGER, Simone Infingardi; NOHAMA, Percy. As pessoas com deficiência e a acessibilidade digital nos dias de hoje no Brasil. Revista Tecnologia e Sociedade, Curitiba, v. 19, n. 58, p. 212-228, out./dez. 2023. Disponível em: https://periodicos.utfpr.edu.br/rts/article/view/16170. Acesso em: 17 abr. 2026.

• BIGDATACORP; MOVIMENTO WEB PARA TODOS. Apenas 2,9% dos sites brasileiros foram aprovados em todos os testes de acessibilidade. São Paulo, 22 jul. 2024. Disponível em: https://blog.bigdatacorp.com.br/acessibilidade-nos-sites-brasileiros-2024/. Acesso em: 17 abr. 2026.

• DARON, Isis; MACIEL, Cristiano; NUNES, Eunice. Acessibilidade digital como promotora da inclusão no site da rede de pesquisa ELLAS. In: ESCOLA REGIONAL DE SISTEMAS DE INFORMAÇÃO DE MATO GROSSO, 1., 2025. Anais [...]. Porto Alegre: Sociedade Brasileira de Computação, 2025. p. 165-169. DOI: 10.5753/ersimt.2025.8837. Disponível em: https://sol.sbc.org.br/index.php/ersimt/article/view/35799. Acesso em: 17 abr. 2026.

• DRESCH, Aline; LACERDA, Daniel Pacheco; ANTUNES JÚNIOR, José Antônio Valle. Design Science Research: método de pesquisa para avanço da ciência e tecnologia. Porto Alegre: Bookman, 2015.

• FERATI, Mexhid et al. Web accessibility for visually impaired people: requirements and design issues. In: REBELO, Francisco (ed.). Advances in ergonomics in design: proceedings of the AHFE 2017 International Conference on Ergonomics in Design. Cham: Springer, 2018. p. 803-814.

• GARCIA, Anderson Canale. AALT: um framework com soluções práticas para melhorar a acessibilidade em aplicativos Android. 2023. Dissertação (Mestrado em Ciências de Computação e Matemática Computacional) – Instituto de Ciências Matemáticas e de Computação, Universidade de São Paulo, São Carlos, 2023.

• GESSI, Nedisson Luis; CHAVES, Denise Felber; STORMOWSKI, Mônica; HECKLER, Lauri; OLIVEIRA, Natalie S. A inclusão digital como pilar democrático: acessibilidade web para pessoas com deficiência visual no portal gov.br. RCMOS - Revista Científica Multidisciplinar O Saber, Brasil, v. 1, n. 1, 2025. DOI: 10.51473/rcmos.v1i1.2025.969. Disponível em: https://submissoesrevistarcmos.com.br/index.php/rcmos/article/view/969. Acesso em: 17 abr. 2026.

• HAKAMI, W. A. S.; AL-AAMA, A. Y. A framework to improve web form accessibility for the visually impaired. IEEE Access, v. 11, p. 123989-124003, 2023. DOI: 10.1109/ACCESS.2023.3330370.

• HEVNER, Alan R.; MARCH, Salvatore T.; PARK, Jinsoo; RAM, Sudha. Design science in information systems research. MIS Quarterly, v. 28, n. 1, p. 75-105, 2004. DOI: 10.2307/25148625.

• MARIÑO, Sonia Itatí; PAGNONI, Verónica Karina. Accesibilidad web en dispositivos móviles. Evaluación de un portal educativo de alcance nacional. International Journal of Educational Research and Innovation, Sevilla, n. 13, p. 177-194, 2020. DOI: 10.46661/ijeri.4606.

• NAÇÕES UNIDAS NO BRASIL. Objetivo de Desenvolvimento Sustentável 4: educação de qualidade. Disponível em: https://brasil.un.org/pt-br/sdgs/04. Acesso em: 17 abr. 2026.

• NAÇÕES UNIDAS NO BRASIL. Objetivo de Desenvolvimento Sustentável 9: indústria, inovação e infraestrutura. Disponível em: https://brasil.un.org/pt-br/sdgs/9. Acesso em: 17 abr. 2026.

• NAÇÕES UNIDAS NO BRASIL. Objetivo de Desenvolvimento Sustentável 10: redução das desigualdades. Disponível em: https://brasil.un.org/pt-br/sdgs/10. Acesso em: 17 abr. 2026.

• NAKANO, Natália. Acessibilidade web no ensino a distância na Ciência da Informação: uma revisão sistemática da literatura brasileira na Brapci. 2022.

• NIELSEN, Jakob; MACK, Robert L. (ed.). Usability inspection methods. New York: John Wiley & Sons, 1994.

• PALOMINO, Paula; ARAÚJO, André; SILVA, Alenilton; ARAÚJO, Rafael; DERMEVAL, Diego; PORTO, Grace Lis; SIMANKE, Sofia; CORDEIRO, Thiago; LISBOA, Rodrigo. Beyond Detection: a framework for transforming accessibility evaluations into implementable fixes. Journal on Interactive Systems, Porto Alegre, RS, v. 16, n. 1, p. 461-472, 2025. DOI: 10.5753/jis.2025.5518. Disponível em: https://journals-sol.sbc.org.br/index.php/jis/article/view/5518. Acesso em: 17 abr. 2026.

• WATANABE, Willian Massami. Avaliação automática de acessibilidade em RIA. 2014. Tese (Doutorado em Ciências de Computação e Matemática Computacional) – Instituto de Ciências Matemáticas e de Computação, Universidade de São Paulo, São Carlos, 2014.

• WORLD WIDE WEB CONSORTIUM (W3C). Web Content Accessibility Guidelines (WCAG) 2.1. W3C Recommendation, 5 jun. 2018. Disponível em: https://www.w3.org/TR/WCAG21/. Acesso em: 17 abr. 2026.

• WORLD WIDE WEB CONSORTIUM (W3C). Accessible Rich Internet Applications (WAI-ARIA) 1.2. W3C Recommendation, 6 jun. 2023. Disponível em: https://www.w3.org/TR/wai-aria-1.2/. Acesso em: 17 abr. 2026.