Projetando Plataformas de Telemedicina Acessíveis para Idosos: Um Guia para Desenvolvedores React

À medida que os serviços de telemedicina se tornam cada vez mais relevantes no mundo de hoje, especialmente após a pandemia de COVID-19, todas as populações de usuários, incluindo os idosos, devem se beneficiar dos programas que levam à importância das recomendações acima.

O React é adotado neste artigo para examinar as abordagens técnicas-chave para a criação de aplicativos de telemedicina acessíveis que devem seguir as WCAG. Como em muitas coisas, muitas vezes é possível construir interfaces acessíveis a todos, incluindo os idosos, considerando as seguintes áreas-chave de design ou desenvolvimento.

Por que a Acessibilidade é Importante para Idosos na Telemedicina

Os desafios incluem problemas de visão, problemas de audição, agilidade e problemas de carga cognitiva, que são evidentes em adultos idosos. A combinação desses fatores torna difícil para eles manobrar em várias dimensões das interfaces digitais. Uma vez que a telemedicina é usada para receber serviços médicos remotamente, tornar essas plataformas inclusivas se torna necessário (Cynthi, et al., (2021)).

As questões-chave enfrentadas por idosos incluem:

• Deficiências visuais: Dificuldades para ler textos e números sutis, diferenciar cores e discernir detalhes finos dos itens de interface.
• Dificuldades auditivas: Ouvir sons ou fala durante chamadas de vídeo ou ter problemas para compreender o que é dito durante tais chamadas.
• Limitações de habilidades motoras: Quase impossibilidades ao tentar operar botões pequenos ou quando é necessário ser preciso com os controles.
• Carga cognitiva: Problema em lidar com displays complicados ou ter dificuldade em mudar de uma interface para outra.

Introduzir diretrizes de acessibilidade em plataformas de telemedicina requer que os desenvolvedores projetem soluções onde os idosos possam encontrar a utilização mais confortável do que em sistemas convencionais.

Adesão às Diretrizes WCAG no React

WCAG refere-se às Web Content Accessibility Guidelines por meio das quais existem padrões que tornam o conteúdo da web mais receptivo. Essas diretrizes se concentram em quatro princípios principais: POUR, que significa Perceptível, Operável, Compreensível e Robusto é o processo (Nguyen, 2024). Agora, vamos discutir como cada um desses princípios pode ser aplicado com a ajuda do React para desenvolver plataformas de telemedicina acessíveis para idosos.

Perceptível: HTML semântico e ARIA

HTML semântico e atributos ARIA usados em elementos de mídia permitem que o leitor de tela informe corretamente a um usuário com um dispositivo assistivo.

  // Exemplo: Barra de navegação semântica
  

Aqui, a palavra ‘barra de navegação’ recebe aria-label, o que aumenta as chances de que um leitor de tela entenda o conteúdo da seção. O uso de tags HTML semânticas como <nav> e <ul> torna-as compreensíveis para participantes que utilizam leitores de tela ou quaisquer outras ferramentas que possam ter (Puzis, Borodin, Soviak, & Melnyk, 2015).

Operável: Navegação pelo Teclado

Algumas pessoas mais velhas podem ter problemas ao usar um mouse e preferem acessar os links apenas com o teclado. Isso é importante para a acessibilidade porque requer que todos os elementos sejam clicáveis ao usar apenas o teclado.

import React, { useEffect, useRef } from 'react';

export function App(props) {

  return (
    

      // Exemplo: Modal acessível pelo teclado
    
  );
}

const Modal = ({ isOpen, onClose }) => {
  const modalRef = useRef();
  useEffect(() => {

    if (isOpen) {
      modalRef.current.focus();
    }

  }, [isOpen]);
  
  if (!isOpen) return null;
  
  return (
    

Close
Modal Content


  );
};

Neste exemplo, no momento em que o modal é aberto, ele automaticamente fica em foco, tornando-se sensível para usuários que utilizam um teclado. O botão de fechar utiliza um aria-label para fácil identificação, e o modal é descrito como um diálogo; ele usa um atributo aria-modal (Watanabe, Geraldo, & Mattos, 2014).

Compreensível: Rótulos e Instruções Claras

A baixa carga cognitiva é apoiada pela apresentação inequívoca das instruções e pela garantia de que cada elemento do formulário tenha um rótulo a que se referir ou um nome para descrevê-lo.

import React from 'react';
export function App(props) {

  return (

    

      // Exemplo: Formulário com rótulos acessíveis
      

Name

Appointment Date

Submit



  );

}
// Log para console

console.log('Hello console');

Em outras palavras, o elemento label está associado ao campo de entrada do formulário apropriado através do atributo htmlFor, o que é mais compreensível para usuários de leitores de tela. O atributo aria-required informa aos idosos que os campos devem ser preenchidos; isso permite que os idosos completem o formulário adequadamente.

Robusto: Acessibilidade às Tecnologias Assistivas

Partes comuns do edifício que são utilizáveis em todas as tecnologias de aplicação incluem leitores de tela, controles de voz ou qualquer outro dispositivo de entrada que torne a plataforma adaptável no futuro e acessível a todos.

Implementando Recursos de Videoconferência Acessíveis

Talvez um dos elementos mais cruciais do sistema de telemedicina seja o serviço de videoconferência. Para os idosos, esse recurso deve ser intuitivo, com botões grandes, com rótulos claramente impressos e controle de áudio simples.

Botões Grandes e Fáceis de Usar

Para usuários com habilidades motoras limitadas, os botões devem ser grandes, clicáveis e facilmente rotulados.

import React from 'react';

export function App(props) {
  return (
    

      // Exemplo: Botões de controle de vídeo acessíveis
      import AccessibleButton from './AccessibleButton';
      const VideoControls = (
        ({ onMute, onToggleVideo, onEndCall, isMuted, isVideoOn }) => (
          


              {isMuted ? 'Unmute' : 'Mute'}
            

              {isVideoOn ? 'Stop Video' : 'Start Video'}
            

              End Call
            

        )
      ); 
      export default VideoControls;
    
  );
}

// Log para o console
console.log('Hello console');

Esses botões são grandes e claros, e o teclado ou leitor de tela é acessível, e são identificados por texto significativo. O atributo aria-pressed fornece mais informações sobre o estado atual do botão, se o usuário está silenciado ou não, facilitando para um usuário com deficiência visual.

Controles de Áudio Claros

A clara diferenciação das configurações de controle é crucial, especialmente para pessoas idosas e aquelas com dificuldades auditivas. Isso pode reduzir a experiência geral de telessaúde, uma vez que o microfone ajuda as pessoas a ajustarem o volume.

import React from 'react';

export function App(props) {
  return (
    

      // Exemplo: Controles de áudio acessíveis
      const AudioControls = (
        ({ volume, onVolumeChange }) => (
          

Volume


        )
      ); 
      export default AudioControls;
    
  );
}

O controle deslizante também é utilizável para leitores de tela, pois o volume agora é definido como aria-value min, aria-value max e aria-value. Dessa forma, você pode controlar o áudio facilmente sem precisar passar o tempo todo fazendo mudanças com base no sinal visual.

Exemplo: Interface de Videoconferência

Assim, ao integrar controles disponíveis, é possível construir uma interface de VC em grande escala especificamente para usuários seniores.

const VideoConference = () => {
  const [isMuted, setIsMuted] = useState(false);
  const [isVideoOn, setIsVideoOn] = useState(true);
  const [volume, setVolume] = useState(50);

  const handleMute = () => setIsMuted(!isMuted);
  const handleToggleVideo = () => setIsVideoOn(!isVideoOn);
  const handleEndCall = () => {
    // lógica para encerrar a chamada
  };
  const handleVolumeChange = (e) => setVolume(e.target.value);

  return (
    


        {/* Video stream component */}
      



  );
};

Este exemplo oferece uma solução simples de videoconferência onde os clientes podem gerenciar a qualidade do áudio e do vídeo, garantindo também que a estrutura principal da interface possa ser gerenciada usando um teclado e seja compatível com um dispositivo assistivo.

Conclusão

Garantir que um acesso alternativo e credível à telessaúde seja desenvolvido para a população idosa permite que qualquer pessoa, independentemente de deficiência, possa se beneficiar plenamente das capacidades do cuidado remoto. Os padrões WCAG, incluindo o uso adequado de HTML, ARIA, navegação por teclado e player de vídeo acessível, quando empregados, produzirão plataformas lógicas. A flexibilidade reside nos componentes do React: soluções e designs transversais que abraçam, envolvem e capacitam os idosos, além de coordenar as divisões entre tecnologia e saúde.

Este guia oferece apenas alguns exemplos de como o React pode ser utilizado ao projetar plataformas de telemedicina acessíveis. Defender a questão da acessibilidade das soluções desenvolvidas é a melhor maneira de garantir que as soluções de Saúde Digital que estão sendo desenvolvidas beneficiarão aqueles que mais precisam delas.

Referências

• Cynthi, J., Sieck., Mark, R., Ann, Scheck, & McAlearney. ((2021)). Could Telehealth Improve Equity During the COVID-19 Pandemic? Journal of the American Board of Family Medicine,. doi:10.3122/JABFM.2021.S1.200229
• Nguyen, H. (2024). Enhancing Accessibility in Web Applications: A Comprehensive Study on Common Accessibility Issues and Implementing Solutions in React Application. Enhancing Accessibility in Web Applications, 61. Retrieved from https://urn.fi/URN:NBN:fi:aalto-202408255819
• Puzis, Y., Borodin, Y., Soviak, A., & Melnyk, V. (2015). Affordable web accessibility: a case for cheaper ARIA. Proceedings of the 12th International Web for All Conference, 1-4. doi:https://doi.org/10.1145/2745555.2746657
• Watanabe, W. M., Geraldo, R. J., & Mattos, R. P. (2014). Mecanismos de navegação por teclado em widgets de tabulação: uma investigação sobre a conformidade do ARIA. Proceedings of the 29th Annual ACM Symposium on Applied Computing, 721-726. doi:https://doi.org/10.1145/2554850.2554947