Conception de plateformes de télésanté accessibles pour les personnes âgées : le guide d’un développeur React

À mesure que les services de télésanté deviennent de plus en plus pertinents dans le monde d’aujourd’hui, en particulier après la pandémie de COVID-19, toutes les populations d’utilisateurs, y compris les personnes âgées, doivent bénéficier des programmes soulignant l’importance des recommandations ci-dessus.

React est adopté dans cet article pour examiner les principales approches techniques pour créer des applications de télésanté accessibles qui doivent suivre les WCAG. Comme pour beaucoup de choses, il est souvent possible de construire des interfaces accessibles à tous, y compris aux personnes âgées, en tenant compte des domaines clés suivants en matière de conception ou de développement.

Pourquoi l’accessibilité est importante pour les personnes âgées en télésanté

Les défis incluent des problèmes de vision, des problèmes d’audition, d’agilité et de charge cognitive, qui sont évidents chez les adultes âgés. La combinaison de ces facteurs rend difficile la navigation à travers les multiples dimensions des interfaces numériques. Étant donné que la télésanté est utilisée pour recevoir des services médicaux à distance, il devient nécessaire de rendre ces plateformes inclusives (Cynthi, et al., (2021)).

Les problèmes clés rencontrés par les personnes âgées incluent :

• Déficiences visuelles : Difficultés à lire des textes et des chiffres peu subtils, à différencier les couleurs et à discerner les détails fins des éléments de l’interface.
• Difficultés auditives : Entendre des sons ou des discours lors d’appels vidéo ou avoir des problèmes de compréhension de ce qui est dit pendant de tels appels.
• Limitations des compétences motrices: Pratiquement impossible de manipuler de petits boutons ou d’être précis avec les contrôles.
• Charge cognitive: Problème pour gérer des affichages compliqués ou passer d’une interface à une autre.

Intégrer des directives d’accessibilité dans les plateformes de télésanté exige des développeurs de concevoir des solutions où les personnes âgées peuvent trouver une utilisation plus confortable que dans les systèmes conventionnels.

Respecter les lignes directrices WCAG dans React

WCAG fait référence aux Directives pour l’accessibilité des contenus Web grâce auxquelles des normes sont mises en place pour rendre les contenus Web plus accessibles. Ces directives se concentrent sur quatre principes principaux : POUR, qui signifie Perceptible, Utilisable, Compréhensible et Robuste est le processus (Nguyen, 2024). Maintenant, voyons comment chacun de ces principes peut être mis en œuvre avec l’aide de React pour développer des plateformes de télésanté accessibles pour les personnes âgées.

Perceptible : HTML sémantique et attributs ARIA

L’utilisation de HTML sémantique et des attributs ARIA dans les éléments multimédias permet au lecteur d’écran d’informer correctement un utilisateur avec un dispositif d’aide.

  // Exemple : Barre de navigation sémantique
  

Ici, le mot « barre de navigation » est donné aria-label, ce qui augmente les chances qu’un lecteur d’écran comprenne le contenu de la section. L’utilisation de balises HTML sémantiques telles que <nav> et <ul> les rend compréhensibles pour les participants utilisant des lecteurs d’écran ou tout autre outil qu’ils peuvent avoir (Puzis, Borodin, Soviak, & Melnyk, 2015).

Opérationnel : Navigation au clavier

Certains personnes âgées pourraient avoir des problèmes à utiliser une souris et préfèrent accéder aux liens uniquement avec un clavier. C’est important pour l’accessibilité car cela exige que tous les éléments soient cliquables en utilisant uniquement le clavier.

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

export function App(props) {

  return (
    

      // Exemple : Modal accessible au clavier
    
  );
}

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

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

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

Close
Modal Content


  );
};

Dans cet exemple, dès que la modal est ouverte, elle entre automatiquement en focus, la rendant sensible aux utilisateurs utilisant un clavier. Le bouton de fermeture utilise un aria-label pour une identification facile, et la modal est décrite comme une boîte de dialogue ; elle utilise un attribut aria-modal (Watanabe, Geraldo, & Mattos, 2014).

Compréhensible : Étiquettes claires et instructions

La charge cognitive faible est soutenue en présentant de manière non équivoque des instructions et en s’assurant que chaque élément de formulaire a une étiquette à laquelle se référer ou un nom pour le décrire.

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

  return (

    

      // Exemple : Formulaire avec des étiquettes accessibles
      

Name

Appointment Date

Submit



  );

}
// Journaliser sur la console

console.log('Hello console');

En d’autres termes, l’élément label est associé à l’entrée de formulaire appropriée via l’attribut htmlFor, ce qui est plus compréhensible pour les utilisateurs de lecteurs d’écran. L’attribut aria-required indique aux personnes âgées que les champs doivent être remplis ; cela permet aux personnes âgées de compléter le formulaire de manière appropriée.

Robuste : Accessibilité aux technologies d’assistance

Les parties communes du bâtiment qui sont utilisables dans toutes les technologies d’application incluent les lecteurs d’écran, les commandes vocales ou tout autre dispositif d’entrée qui rend la plateforme adaptable à l’avenir et accessible à tous.

Implémentation de fonctionnalités de visioconférence accessibles

Peut-être l’un des éléments les plus cruciaux du système de télémédecine est le service de visioconférence. Pour les personnes âgées, cette fonctionnalité doit être intuitive, avec de grands boutons portant des étiquettes clairement imprimées et un contrôle audio simple.

Grands boutons faciles à utiliser

Pour les utilisateurs ayant de faibles capacités de contrôle moteur, les boutons doivent être grands, cliquables et facilement étiquetés.

import React from 'react';

export function App(props) {
  return (
    

      // Exemple : Boutons de contrôle vidéo accessibles
      import AccessibleButton from './AccessibleButton';
      const VideoControls = (
        ({ onMute, onToggleVideo, onEndCall, isMuted, isVideoOn }) => (
          


              {isMuted ? 'Unmute' : 'Mute'}
            

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

              End Call
            

        )
      ); 
      export default VideoControls;
    
  );
}

// Journaliser dans la console
console.log('Hello console');

Ces boutons sont grands et clairs, et le clavier ou le lecteur d’écran est accessible, et ils sont identifiés par un texte significatif. L’attribut aria-pressed fournit plus d’informations sur l’état actuel du bouton, que l’utilisateur soit en mode muet ou non, facilitant ainsi l’utilisation pour un utilisateur malvoyant.

Contrôles audio clairs

Une différenciation claire des paramètres de contrôle est cruciale, notamment pour les personnes âgées et les malentendants. Cela pourrait réduire leur expérience globale de télésanté, car le microphone aide les gens à ajuster le volume.

import React from 'react';

export function App(props) {
  return (
    

      // Exemple : Commandes audio accessibles
      const AudioControls = (
        ({ volume, onVolumeChange }) => (
          

Volume


        )
      ); 
      export default AudioControls;
    
  );
}

Le curseur est également utilisable pour les lecteurs d’écran car le volume est désormais défini par aria-value min, aria-value max et aria-value. Ainsi, vous pouvez facilement contrôler le son sans avoir à passer tout votre temps à effectuer des modifications en fonction de l’indice visuel.

Exemple : Interface de visioconférence

Ainsi, en intégrant les contrôles disponibles, il est possible de construire une interface de visioconférence complète spécifiquement pour les utilisateurs seniors.

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 = () => {
    // logique pour terminer l’appel
  };
  const handleVolumeChange = (e) => setVolume(e.target.value);

  return (
    


        {/* Video stream component */}
      



  );
};

Cet exemple propose une solution de visioconférence simple où les clients peuvent gérer la qualité audio et vidéo tout en garantissant que la structure principale de l’interface peut être gérée à l’aide d’un clavier et est compatible avec un dispositif d’assistance.

Conclusion

En veillant à développer un accès alternatif et fiable à la télésanté pour la population des personnes âgées, chacun, quelle que soit son incapacité, peut pleinement bénéficier des capacités des soins à distance. Les normes WCAG, notamment l’utilisation appropriée du HTML, de l’ARIA, de la navigation au clavier et du lecteur vidéo accessible, lorsqu’elles sont appliquées, produiront des plateformes logiques. La flexibilité réside dans les composants de React : des solutions et des conceptions transversales qui incluent, engagent et responsabilisent les personnes âgées, et qui coordonnent les divisions entre la technologie et les soins de santé.

Ce guide propose seulement quelques exemples de la manière dont React peut être utilisé lors de la conception de plateformes de télésanté accessibles. Promouvoir la question de l’accessibilité des solutions développées est le meilleur moyen de s’assurer que les solutions de santé numérique en cours de développement bénéficieront à ceux qui en ont le plus besoin.

Références

• Cynthi, J., Sieck., Mark, R., Ann, Scheck, & McAlearney. ((2021)). La télésanté pourrait-elle améliorer l’équité pendant la pandémie de COVID-19 ? Journal of the American Board of Family Medicine,. doi:10.3122/JABFM.2021.S1.200229
• Nguyen, H. (2024). Améliorer l’accessibilité dans les applications Web : une étude complète sur les problèmes d’accessibilité courants et la mise en œuvre de solutions dans les applications React. Améliorer l’accessibilité dans les applications Web, 61. Récupéré de https://urn.fi/URN:NBN:fi:aalto-202408255819
• Puzis, Y., Borodin, Y., Soviak, A., & Melnyk, V. (2015). Accessibilité Web abordable : un plaidoyer pour un ARIA moins cher. Actes de la 12e Conférence Internationale Web pour Tous, 1-4. doi:https://doi.org/10.1145/2745555.2746657
• Watanabe, W. M., Geraldo, R. J., & Mattos, R. P. (2014). Mécanismes de navigation au clavier dans les widgets d’onglets : une enquête sur la conformité d’ARIA. Actes du 29e Symposium Annuel de l’ACM sur l’Informatique Appliquée, 721-726. doi:https://doi.org/10.1145/2554850.2554947