28 de abril de 2026
Acessibilidade em Apps React Native: Práticas para Inclusão Digital
Jackeline Rocha Brito; Elaine Barbosa de Figueiredo
Resumo elaborado pela ferramenta ResumeAI, solução de inteligência artificial desenvolvida pelo Instituto Pecege voltada à síntese e redação.
A tecnologia integra-se de maneira profunda ao cotidiano contemporâneo, assumindo um papel que ultrapassa o mero entretenimento para se tornar um pilar essencial na execução de atividades básicas e fundamentais. O uso de dispositivos móveis para a realização de transações bancárias, compras de mantimentos, comunicação instantânea e acesso a serviços públicos reflete uma transformação digital sem precedentes na sociedade brasileira. Dados coletados pelo Instituto Brasileiro de Geografia e Estatística indicam que, no ano de 2023, aproximadamente 87,6% da população nacional possuía ao menos um aparelho celular, evidenciando a onipresença desses dispositivos na vida do cidadão comum (IBGE, 2023). No entanto, a onipresença da tecnologia não garante, por si só, a democratização do acesso. À medida que os serviços migram para o ambiente digital, surge o questionamento crítico sobre a capacidade dessas interfaces em atender a todos os perfis de usuários, especialmente aqueles que possuem algum tipo de limitação sensorial ou motora. Conforme o Censo de 2010, cerca de 24% da população brasileira apresentava algum tipo de deficiência, número que tende a ser significativamente maior nas atualizações demográficas subsequentes (IBGE, 2010). Nesse contexto, a acessibilidade digital deixa de ser um diferencial técnico para se tornar uma obrigação legal e social, fundamentada pela Lei Brasileira de Inclusão, que estabelece o direito de acesso à informação e à tecnologia para pessoas com deficiência (Brasil, 2015).
A fundamentação teórica que sustenta o desenvolvimento de interfaces inclusivas baseia-se em diretrizes internacionais consolidadas, sendo as Diretrizes de Acessibilidade para Conteúdo Web as mais proeminentes. Criadas pelo World Wide Web Consortium, essas normas evoluíram desde sua primeira versão em 1999 para abranger a complexidade dos ecossistemas móveis atuais (Chisholm, 1999). Com o lançamento da versão 2.0 em 2008, estabeleceu-se um padrão global que define critérios de sucesso para tornar o conteúdo digital perceptível, operável, compreensível e robusto (Caldwell, 2008). A aplicação dessas diretrizes em smartphones e tablets exige uma adaptação cuidadosa, uma vez que as interações em telas sensíveis ao toque diferem substancialmente da navegação tradicional via teclado e mouse. A introdução de tecnologias assistivas, como os leitores de tela, marcou o início de uma nova era para a inclusão digital. O lançamento do software Talks em 2003 permitiu que usuários com deficiência visual tivessem autonomia para gerenciar chamadas e mensagens (Burton, 2011). Posteriormente, a consolidação de ferramentas nativas como o VoiceOver para sistemas iOS e o TalkBack para Android proporcionou uma integração mais fluida entre o hardware e o software, embora a eficácia dessas ferramentas dependa diretamente da correta implementação técnica por parte dos desenvolvedores de aplicativos (Leporini, 2012).
A construção de um ambiente digital inclusivo requer que os desenvolvedores de software compreendam não apenas as ferramentas técnicas, mas também as necessidades específicas dos usuários finais. Muitas aplicações disponíveis no mercado ainda falham em fornecer rótulos adequados para componentes interativos, resultando em uma experiência de navegação confusa e frustrante para quem depende de leitores de tela (Carvalho, 2015). Elementos como barras de progresso, menus suspensos e botões sem etiquetas descritivas tornam-se barreiras intransponíveis, impedindo que o usuário complete tarefas simples. A revisão das diretrizes de acessibilidade para o contexto móvel destaca a importância de criar interfaces que suportem diferentes modos de interação, garantindo que a base tecnológica seja abrangente o suficiente para apoiar o desenvolvimento de soluções eficazes em diversos dispositivos (Patch, 2015). O objetivo central reside na análise detalhada de como as diretrizes internacionais podem ser aplicadas de forma prática no desenvolvimento de aplicativos utilizando o framework React Native, buscando desmistificar o processo de implementação e fornecer um caminho claro para a criação de produtos digitais acessíveis.
A metodologia adotada para a condução deste estudo fundamenta-se em uma abordagem qualitativa e aplicada, estruturada para compreender as dificuldades reais enfrentadas por pessoas com deficiência visual e propor soluções técnicas viáveis. O processo de investigação foi organizado em quatro etapas operacionais distintas, utilizando a metodologia ágil SCRUM para garantir a eficiência e a iteratividade do desenvolvimento. A primeira etapa consistiu em uma pesquisa de campo realizada por meio de um formulário eletrônico disponibilizado na plataforma Microsoft Forms, escolhida por suas funcionalidades nativas de acessibilidade. O público-alvo foi composto exclusivamente por indivíduos com diferentes graus de deficiência visual, incluindo cegueira total, cegueira parcial e daltonismo. O questionário foi estruturado para coletar dados sobre a frequência de uso de aplicativos móveis, os tipos de serviços mais acessados e, principalmente, os obstáculos que levam à desistência do uso de determinadas ferramentas. Os participantes foram convidados a descrever experiências negativas relacionadas à falta de contraste, dificuldade de reconhecimento de botões e ausência de suporte para tecnologias assistivas.
A segunda etapa do processo metodológico envolveu a criação de uma prova de conceito, materializada em uma tela de login desenvolvida em React Native. Este protótipo foi propositalmente construído sem a aplicação inicial de práticas de acessibilidade, contendo elementos comuns como campos de entrada de texto, botões, imagens e caixas de seleção. A intenção foi criar um cenário base que refletisse as falhas comuns encontradas no mercado de software. Para a análise técnica deste protótipo, utilizou-se a ferramenta Accessibility Scanner, desenvolvida pelo Google para o sistema operacional Android. O procedimento de teste foi executado em um dispositivo físico Xiaomi Poco X3, permitindo uma avaliação precisa da conformidade da interface com as diretrizes da WCAG. A ferramenta realizou uma varredura completa na tela, identificando problemas críticos relacionados ao tamanho das áreas de toque, contraste de cores e rotulagem de componentes.
A terceira etapa concentrou-se na análise dos dados obtidos tanto na pesquisa com usuários quanto nos testes automatizados. A partir dos problemas identificados, como áreas de clique inferiores a 48dp por 48dp e contrastes de cores que não atingiam os níveis mínimos exigidos, iniciou-se o processo de correção e refinamento do código. Nesta fase, foram aplicadas bibliotecas específicas, como a react-native-responsive-fontsize, para garantir que o escalonamento de fontes ocorresse de maneira harmoniosa em diferentes resoluções de tela, atendendo às necessidades de usuários com baixa visão que necessitam de ampliações consideráveis no texto. A quarta e última etapa consistiu na elaboração de um guia prático de acessibilidade, consolidando as lições aprendidas e as melhores práticas observadas durante o desenvolvimento. Este guia foi estruturado para servir como um manual de referência para desenvolvedores, detalhando a implementação de atributos nativos do React Native, como rótulos de acessibilidade, dicas de navegação e estados de componentes, garantindo que as futuras aplicações sejam concebidas sob a ótica do design inclusivo.
Os resultados obtidos por meio do questionário aplicado revelaram um cenário de exclusão digital persistente, onde a falta de suporte adequado para leitores de tela é apontada como a principal barreira de acesso. Participantes com daltonismo relataram dificuldades severas na interação com aplicativos que utilizam paletas de cores com baixo contraste, tornando textos e elementos visuais praticamente imperceptíveis. A literatura médica e técnica identifica três tipos principais de deficiência visual de cores: a protanopia, caracterizada pela dificuldade em perceber tons vermelhos; a deuteranopia, que afeta a diferenciação entre verde e vermelho; e a tritanopia, relacionada à percepção de azul e amarelo (Ramos, 2010). A ausência de mecanismos que permitam a alteração da paleta de cores dentro das aplicações obriga o usuário a depender exclusivamente de filtros do sistema operacional, que nem sempre são suficientes para garantir uma usabilidade plena. A sugestão recorrente entre os respondentes foi a implementação de temas customizáveis que considerem essas variações cromáticas desde a concepção da interface.
Outro ponto crítico identificado na pesquisa diz respeito à responsividade visual. Usuários com baixa visão frequentemente utilizam o recurso de ampliação de fonte em seus dispositivos, mas muitos aplicativos não possuem layouts preparados para suportar esse aumento, resultando em textos cortados, sobreposição de elementos ou botões que se tornam inacessíveis. A análise técnica realizada com o Accessibility Scanner na prova de conceito corroborou essas percepções, identificando cinco categorias principais de não conformidade. A primeira delas foi a área de toque insuficiente, onde componentes interativos apresentavam dimensões inferiores ao mínimo recomendado de 48dp por 48dp. Essa limitação prejudica não apenas pessoas com deficiência visual, que podem ter dificuldade em localizar o centro exato do componente, mas também indivíduos com limitações motoras. A segunda falha grave foi a ausência de rótulos acessíveis, o que impede que o leitor de tela comunique ao usuário a função de um botão ou o conteúdo de uma imagem.
O problema do contraste entre texto e fundo também foi evidenciado como um fator de exclusão. Na versão inicial do protótipo, a cor do botão principal utilizava o código hexadecimal #FF7585, que apresentava um contraste insuficiente com o plano de fundo. Após a análise, a cor foi modificada para #FC8342, garantindo uma legibilidade superior e atendendo aos critérios de sucesso da WCAG. Da mesma forma, o título da tela passou de #939BC2 para #606BA5, e o texto do botão foi ajustado de #585F7E para #1A1A1A. Essas mudanças, embora pareçam sutis do ponto de vista estético, representam uma melhoria drástica na percepção visual para usuários com sensibilidade reduzida ao contraste. Além das cores, a ferramenta de teste apontou a sobreposição de áreas clicáveis, um erro comum de layout onde múltiplos elementos interativos ocupam o mesmo espaço físico na tela, causando seleções errôneas e frustração durante a navegação.
A implementação das soluções no framework React Native demonstrou a viabilidade técnica de criar interfaces inclusivas sem comprometer o desempenho ou a estética da aplicação. Para resolver a questão das áreas de toque reduzidas, os componentes foram redimensionados e os espaçamentos ajustados. Um exemplo prático foi a modificação do componente de checkbox, que originalmente permitia a interação apenas ao clicar na pequena caixa de seleção. Após a intervenção, o rótulo associado ao checkbox também se tornou clicável, ampliando significativamente a área de interação. No que tange à comunicação com tecnologias assistivas, foram empregados atributos como Accessibility Label, para descrever a função do elemento; Accessibility Hint, para fornecer orientações adicionais sobre a ação associada; e Accessibility Role, para definir a natureza semântica do componente, como botão, link ou cabeçalho.
Entretanto, a aplicação dessas funcionalidades revelou nuances importantes. Durante os testes com o leitor de tela, observou-se que o uso do atributo Accessibility Label em campos de entrada de texto editáveis poderia gerar conflitos de interpretação. Quando o usuário inicia a digitação, o leitor de tela tende a priorizar o conteúdo inserido em vez do rótulo descritivo, o que pode desorientar o usuário sobre qual informação está sendo solicitada. Como solução, optou-se pela remoção desse atributo específico nos campos de input, mantendo o uso de elementos nativos como o placeholder e outros atributos de acessibilidade que fornecem a descrição necessária sem interferir na leitura do texto digitado. Após essas modificações, uma nova varredura com o Accessibility Scanner foi realizada, resultando em zero sugestões de melhoria, o que validou a eficácia das intervenções realizadas.
A discussão dos resultados reforça a ideia de que a acessibilidade não deve ser tratada como uma etapa final de desenvolvimento, mas como um requisito funcional presente desde o início do ciclo de vida do software. A comparação entre os dados da pesquisa inicial e as soluções implementadas demonstra que pequenos ajustes técnicos possuem um impacto social desproporcionalmente positivo. A utilização de bibliotecas para responsividade de fontes e o ajuste rigoroso de contrastes cromáticos são práticas que beneficiam não apenas o público com deficiência, mas também usuários em condições ambientais adversas, como sob luz solar intensa. A conformidade com as normas internacionais, como a WCAG, fornece um roteiro seguro para que as empresas de tecnologia cumpram seu papel social e legal, evitando a exclusão de uma parcela significativa da população do mercado de consumo digital.
As limitações deste estudo residem no foco exclusivo na deficiência visual, embora as diretrizes aplicadas também beneficiem outros perfis de usuários. A complexidade de certas interações móveis, como gestos multitoque, ainda representa um desafio para a padronização da acessibilidade, sugerindo a necessidade de pesquisas futuras que explorem soluções para deficiências motoras e auditivas de forma mais aprofundada. A eficácia do reconhecimento facial para usuários com próteses oculares ou cegueira total também emergiu como uma dificuldade secundária na pesquisa, indicando que a biometria é uma área que demanda maior atenção dos desenvolvedores de sistemas operacionais e aplicativos de segurança. A disseminação do conhecimento técnico por meio de guias práticos é uma estratégia fundamental para reduzir a lacuna de competências entre os profissionais da área de Engenharia de Software, incentivando uma cultura de desenvolvimento mais empática e inclusiva.
A análise detalhada das práticas de acessibilidade em React Native permite concluir que o framework oferece ferramentas robustas e nativas para a criação de interfaces acessíveis. O desafio principal não reside na limitação tecnológica, mas na falta de conscientização e treinamento dos desenvolvedores sobre a importância de aplicar esses recursos de maneira correta. A integração de testes automatizados, como o Accessibility Scanner, no fluxo de trabalho diário pode prevenir a maioria dos erros comuns de usabilidade antes mesmo que o produto chegue ao usuário final. A responsabilidade por um mundo digital mais justo é compartilhada entre designers, desenvolvedores e gestores de produto, que devem priorizar a inclusão como um valor central da engenharia de software moderna.
Conclui-se que o objetivo foi atingido, uma vez que a análise das diretrizes da WCAG e sua aplicação prática em um protótipo desenvolvido em React Native demonstraram ser plenamente viáveis para a promoção da inclusão digital. A identificação de falhas críticas, como o baixo contraste e áreas de toque insuficientes, permitiu a implementação de correções eficazes que elevaram a conformidade da interface aos padrões internacionais. A criação do guia prático consolidou o conhecimento gerado, oferecendo um recurso valioso para que desenvolvedores possam replicar essas práticas em projetos reais, garantindo que a tecnologia atue como uma ferramenta de autonomia e não como uma barreira para pessoas com deficiência visual.
Referências Bibliográficas:
Brasil. Ministério da Gestão e da Inovação em Serviços Públicos. 2023. Guia de boas práticas para acessibilidade digital. Brasília, DF: Governo do Brasil. Disponível em: https://www.gov.br/governodigital/pt-br/acessibilidade-e-usuario/acessibilidade-digital/guiaboaspraaticasparaacessibilidadedigital.pdf. Acesso em: 7 set. 2025.
Burton, D. 2011. The current state of cell phone accessibility. American Foundation for the Blind, jun. 2011.
Caldwell, B.; Cooper, M.; Reid, L.; Vanderheiden, G. 2008. Mobile accessibility: How WCAG 2.0 and other W3C/WAI guidelines apply to mobile. W3C, dez. 2008.
Carvalho, L. P.; Ferreira, L. P.; Freire, A. P. 2015. Accessibility evaluation of rich Internet applications interface components for mobile screen readers. Anais da Universidade Federal de Lavras, p. 181–186.
Chisholm, W.; Vanderheiden, G.; Jacobs, I. 1999. Web content accessibility guidelines 1.0. W3C, maio 1999.
Instituto Brasileiro de Geografia e Estatística (IBGE). 2010. Censo demográfico 2010: características gerais da população. Rio de Janeiro: IBGE. Disponível em: https://educa.ibge.gov.br/jovens/conheca-o-brasil/populacao/20551-pessoas-com-deficiencia.html. Acesso em: 29 out. 2024.
Instituto Brasileiro de Geografia e Estatística (IBGE). 2023. Em 2023, 87,2% das pessoas com 10 anos ou mais utilizaram internet. Agência de Notícias IBGE. Rio de Janeiro, 2023. Disponível em: https://agenciadenoticias.ibge.gov.br/agencia-noticias/2012-agencia-de-noticias/noticias/41026-em-2023-87-2-das-pessoas-com-10-anos-ou-mais-utilizaram-internet. Acesso em: 7 set. 2025.
Leporini, B.; Buzzi, M. C.; Buzzi, M. 2012. Interacting with mobile devices via VoiceOver: usability and accessibility issues. In: Proceedings of the 24th Australian Computer-Human Interaction Conference, p. 339–348.
Patch, K.; Spellman, J.; Wahlbin, K. 2015. Mobile accessibility: How WCAG 2.0 and other W3C/WAI guidelines apply to mobile. W3C, fev. 2015.
Ramos, C. R. C.; Mendonça, R. J. 2010. Uma revisão sobre os defeitos de visão de cores. Physis: Revista de Saúde Coletiva, Rio de Janeiro, v. 20, n. 1. Disponível em: https://www.scielo.br/j/physis/a/5hWpcHND39fq6BWtB3ZTsbM/?lang=pt. Acesso em: 7 set. 2025.
Resumo executivo oriundo de Trabalho de Conclusão de Curso da Especialização em Engenharia de Software do MBA USP/Esalq
Para saber mais sobre o curso, clique aqui e acesse a plataforma MBX Academy




























