A medida que los servicios de telemedicina se vuelven cada vez más relevantes en el mundo actual, especialmente después de la pandemia de COVID-19, todas las poblaciones de usuarios, incluidos los ancianos, deben beneficiarse de los programas que conducen a la importancia de las recomendaciones anteriores.
React se adopta en este artículo para examinar los enfoques técnicos clave para crear aplicaciones de telemedicina accesibles que deben seguir las pautas de WCAG. Al igual que con muchas cosas, a menudo es posible construir interfaces accesibles para todos, incluidos los ancianos, considerando las siguientes áreas clave de diseño o desarrollo.
Por qué la accesibilidad es importante para adultos mayores en la telemedicina
Los desafíos incluyen problemas de visión, problemas de audición, agilidad y problemas de carga cognitiva, que son evidentes en adultos mayores. La combinación de estos factores hace que les resulte difícil maniobrar en múltiples dimensiones de las interfaces digitales. Dado que la telemedicina se utiliza para recibir servicios médicos de forma remota, hacer que estas plataformas sean inclusivas se vuelve necesario (Cynthi, et al., (2021)).
Los problemas clave a los que se enfrentan los adultos mayores incluyen:
- Problemas de visión: Dificultades para leer textos y números sutiles, diferenciar colores y discernir detalles finos de los elementos de la interfaz.
- Dificultades auditivas: Escuchar sonidos o voz durante las videollamadas o tener problemas para comprender lo que se dice durante dichas llamadas.
- Limitaciones en las habilidades motoras: Casi imposible operar botones pequeños o ser preciso con los controles.
- Carga cognitiva: Problema al manejar pantallas complicadas o al cambiar de una interfaz a otra.
La introducción de pautas de accesibilidad en plataformas de telemedicina requiere que los desarrolladores diseñen soluciones donde los adultos mayores puedan encontrar la utilización más cómoda que en sistemas convencionales.
Adherirse a las Directrices de Accesibilidad para el Contenido Web (WCAG) en React
WCAG se refiere a las Directrices de Accesibilidad para el Contenido Web a través de las cuales existen estándares que hacen que el contenido web sea más receptivo. Estas directrices se centran en cuatro principios principales: POUR, que significa Perceptible, Operable, Comprensible y Robusto es el proceso (Nguyen, 2024). Ahora, veamos cómo se pueden llevar a cabo cada uno de estos principios con la ayuda de React para desarrollar plataformas de telemedicina accesibles para adultos mayores.
Perceptible: HTML semántico y ARIA
El uso de HTML semántico y atributos ARIA en elementos multimedia permite que el lector de pantalla informe correctamente a un usuario con un dispositivo de asistencia.
// Ejemplo: Barra de navegación semántica
La barra de navegación tiene asignado un atributo `aria-label`, lo que aumenta las probabilidades de que un lector de pantalla comprenda el contenido de la sección. El uso de etiquetas HTML semánticas como `<nav>` y `<ul>` las hace comprensibles para los participantes que utilizan lectores de pantalla o cualquier otra herramienta que puedan tener (Puzis, Borodin, Soviak, & Melnyk, 2015).
Operable: Navegación por Teclado
Algunas personas mayores pueden tener problemas para usar un ratón y prefieren acceder a los enlaces solo con el teclado. Esto es importante para la accesibilidad, ya que requiere que todos los elementos sean clicables utilizando únicamente el teclado.
import React, { useEffect, useRef } from 'react';
export function App(props) {
return (
// Ejemplo: Modal accesible por teclado
);
}
const Modal = ({ isOpen, onClose }) => {
const modalRef = useRef();
useEffect(() => {
if (isOpen) {
modalRef.current.focus();
}
}, [isOpen]);
if (!isOpen) return null;
return (
Modal Content
);
};En este ejemplo, en el momento en que se abre el modal, automáticamente se enfoca, haciéndolo sensible para usuarios que utilizan un teclado. El botón de cierre utiliza un atributo `aria-label` para facilitar su identificación, y el modal se describe como un diálogo; utiliza un atributo aria-modal (Watanabe, Geraldo, & Mattos, 2014).
Comprensible: Etiquetas e Instrucciones Claras
La baja carga cognitiva se apoya en la presentación inequívoca de instrucciones y en asegurarse de que cada elemento de formulario tenga una etiqueta a la que referirse o un nombre que lo describa.
import React from 'react';
export function App(props) {
return (
// Ejemplo: Formulario con etiquetas accesibles
);
}
// Registrar en la consola
console.log('Hello console');En otras palabras, el elemento de etiqueta está asociado con la entrada de formulario adecuada a través del atributo htmlFor, lo que es más comprensible para los usuarios de lectores de pantalla. El atributo aria-required informa a los adultos mayores que los campos deben completarse; esto permite a los adultos mayores completar el formulario adecuadamente.
Robusto: Accesibilidad a las Tecnologías de Asistencia
Partes comunes del edificio que son utilizables en todas las tecnologías de aplicación incluyen lectores de pantalla, controles de voz u otros dispositivos de entrada que hacen que la plataforma sea adaptable en el futuro y accesible para todos.
Implementación de Funciones de Videoconferencia Accesibles
Quizás uno de los elementos más cruciales del sistema de telemedicina sea el servicio de videoconferencia. Para las personas mayores, esta función debe ser intuitiva, con botones grandes con etiquetas claramente impresas y controles de audio simples.
Botones Grandes y Fáciles de Usar
Para usuarios con habilidades motoras limitadas, los botones deben ser grandes, clicables y fácilmente etiquetados.
import React from 'react';
export function App(props) {
return (
// Ejemplo: Botones de control de video accesibles
import AccessibleButton from './AccessibleButton';
const VideoControls = (
({ onMute, onToggleVideo, onEndCall, isMuted, isVideoOn }) => (
{isMuted ? 'Unmute' : 'Mute'}
{isVideoOn ? 'Stop Video' : 'Start Video'}
End Call
)
);
export default VideoControls;
);
}
// Registrar en consola
console.log('Hello console');Estos botones son grandes y claros, y el teclado o lector de pantalla es accesible, y están identificados con texto significativo. El atributo aria-pressed proporciona más información sobre el estado actual del botón, si el usuario está silenciado o no, lo que facilita su uso para un usuario con discapacidad visual.
Controles de Audio Claros
La clara diferenciación de los ajustes de control es crucial, particularmente para las personas mayores y aquellas con dificultades auditivas. Esto podría reducir su experiencia general de telemedicina, ya que el micrófono ayuda a las personas a ajustar el volumen.
import React from 'react';
export function App(props) {
return (
// Ejemplo: Controles de audio accesibles
const AudioControls = (
({ volume, onVolumeChange }) => (
)
);
export default AudioControls;
);
}El control deslizante también es usable para lectores de pantalla porque el volumen ahora está definido como aria-value min, aria-value max y aria-value. De esa manera, puedes controlar fácilmente el audio sin tener que pasar todo el tiempo haciendo cambios basados en la señal visual.
Ejemplo: Interfaz de videoconferencia
Así, al integrar los controles disponibles, es posible construir una interfaz de VC a gran escala específicamente para usuarios mayores.
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 la llamada
};
const handleVolumeChange = (e) => setVolume(e.target.value);
return (
{/* Video stream component */}
Este ejemplo ofrece una solución simple de videoconferencia donde los clientes pueden gestionar su calidad de audio y video, mientras garantizan que la estructura principal de la interfaz pueda ser gestionada usando un teclado y sea compatible con un dispositivo de asistencia.
Conclusión
Asegurar que se desarrolle un acceso alternativo y creíble a la telemedicina para la población de adultos mayores permite que cualquier persona, independientemente de su discapacidad, se beneficie plenamente de las capacidades de la atención remota. Los estándares WCAG, que incluyen el uso adecuado de HTML, ARIA, navegación por teclado y reproductor de video accesible, cuando se emplean, producirán plataformas lógicas. La flexibilidad radica en los componentes de React: soluciones y diseños transversales que abrazan, involucran y empoderan a los ancianos, así como coordinan las divisiones entre la tecnología y la atención médica.
Esta guía ofrece solo algunos ejemplos de cómo se puede usar React al diseñar plataformas de telesalud accesibles. Defender la cuestión de la accesibilidad de las soluciones desarrolladas es la mejor manera de asegurar que las soluciones de salud digital que se están desarrollando beneficiarán a quienes más las necesitan.
Referencias
- Cynthi, J., Sieck., Mark, R., Ann, Scheck, & McAlearney. ((2021)). ¿Podría la telesalud mejorar la equidad durante la pandemia de COVID-19? Journal of the American Board of Family Medicine,. doi:10.3122/JABFM.2021.S1.200229
- Nguyen, H. (2024). Mejorando la accesibilidad en aplicaciones web: Un estudio exhaustivo sobre problemas de accesibilidad comunes e implementación de soluciones en aplicaciones React. Mejorando la accesibilidad en aplicaciones web, 61. Recuperado de https://urn.fi/URN:NBN:fi:aalto-202408255819
- Puzis, Y., Borodin, Y., Soviak, A., & Melnyk, V. (2015). Accesibilidad web asequible: un argumento a favor de ARIA más económica. Actas de la 12ª Conferencia Internacional Web para Todos, 1-4. doi:https://doi.org/10.1145/2745555.2746657
- Watanabe, W. M., Geraldo, R. J., & Mattos, R. P. (2014). Mecanismos de navegación por teclado en widgets de pestañas: una investigación sobre la conformidad de ARIA. Actas del 29º Simposio Anual ACM sobre Computación Aplicada, 721-726. doi:https://doi.org/10.1145/2554850.2554947
Source:
https://dzone.com/articles/a-react-developers-guide-to-designing-telehealth-platforms