Projeto de 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 diretrizes do WCAG. Assim 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 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 de idade avançada. A combinação desses fatores torna difícil para eles manobrar através de várias dimensões de interfaces digitais. Como a telemedicina é usada para receber serviços médicos remotamente, tornar essas plataformas inclusivas se torna necessário (Cynthi, et al., (2021)).

Principais problemas enfrentados por adultos mais velhos incluem:

• Deficiências visuais: Dificuldades para ler textos e números pouco claros, diferenciar cores e discernir detalhes finos dos itens de interface.
• Dificuldades auditivas: Ouvir sons ou fala durante videochamadas 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 ao lidar com displays complicados ou ao ter dificuldade em alternar de uma interface para outra.

Introduzir diretrizes de acessibilidade em plataformas de telemedicina requer dos desenvolvedores o design de soluções em que 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 através 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 implementado com a ajuda do React para desenvolver plataformas de telemedicina acessíveis para idosos.

Perceptível: HTML semântico e ARIA

O HTML semântico e os 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
  

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

Operável: Navegação por Teclado

Algumas pessoas mais velhas podem ter problemas com o uso do mouse e preferem acessar os links apenas com o teclado. Isso é importante para acessibilidade, pois exige que todos os elementos sejam clicáveis usando apenas o teclado.

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

export function App(props) {

  return (
    

      // Exemplo: Modal acessível por 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 entra em foco, tornando-o sensível a usuários que usam teclado. O botão de fechar usa 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 de instruções e pela garantia de que cada elemento de formulário tenha um rótulo para referência 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



  );

}
// Registrar no console

console.log('Hello console');

Em outras palavras, o elemento label está associado à entrada de formulário apropriada 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 precisam ser preenchidos; isso permite que os idosos preencham o formulário adequadamente.

Robusto: Acessibilidade às Tecnologias Assistivas

Componentes comuns do edifício que são utilizáveis em todas as tecnologias de aplicação incluem leitores de tela, comandos de voz ou quaisquer outros dispositivos de entrada que tornam 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, este recurso deve ser intuitivo, com botões grandes com rótulos claramente impressos e controle de áudio simples.

Botões Grandes e de Fácil Uso

Para usuários com habilidades de controle motor deficientes, 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 no console
console.log('Hello console');

Esses botões são grandes e claros, acessíveis pelo teclado ou leitor de tela, 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á mudo ou não, facilitando para um usuário com deficiência visual.

Controles de Áudio Claros

A diferenciação clara das configurações de controle é crucial, particularmente para idosos e pessoas com dificuldades auditivas. Isso pode reduzir sua experiência geral de teleatendimento, pois o microfone ajuda as pessoas a ajustar 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 porque o volume agora é definido como aria-value min, aria-value max e aria-value. Dessa forma, você pode controlar facilmente o áudio sem precisar passar o tempo todo fazendo alterações com base na indicação visual.

Exemplo: Interface de videoconferência

Assim, integrando os controles disponíveis, é possível construir uma interface de VC em escala completa especificamente para usuários idosos.

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 finalizar 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 de áudio e 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

Assegurar que o acesso à teleatendimento alternativo e confiável seja desenvolvido para a população adulta mais velha permite que qualquer pessoa, independentemente de deficiência, se beneficie totalmente das capacidades do atendimento remoto. Os padrões WCAG, incluindo o uso adequado de HTML, ARIA, navegação por teclado e reprodutor 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 abrangem, engajam e empoderam 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 usado 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). Keyboard navigation mechanisms in tab widgets: an investigation on ARIA’s conformance. Proceedings of the 29th Annual ACM Symposium on Applied Computing, 721-726. doi:https://doi.org/10.1145/2554850.2554947