עיצוב פלטפורמות טלרפואה נגישות עבור קשישים: מדריך למפתח React

ככל ששירותי הטלה עולים על חשיבותם בעולם היומיום, במיוחד לאחר מגפת הקורונה, כל אוכלוסיות המשתמשים, כולל הקשישים, חייבות להשיג תועלת מהתוכניות שמובילות לחשיבות ההמלצות שלמעלה.

React נאמץ במאמר זה כדי לבחון את הגישות הטכניות המרכזיות ליצירת יישומי טלהאלת נגישים שצריכים לעקוב אחרי WCAG. כמו גם בהרבה דברים אחרים, ניתן לבנות ממשקים שנגישים לכולם, כולל הקשישים, על ידי עיון באזורים המרכזיים הבאים בעיצוב או פיתוח.

למה נגישות חשובה עבור מבוגרים בטלהאלת

אתגרים כוללים בעיות ראייה, בעיות שמיעה, זריזות, ובעיות טעינת קוגניטיבית, שגולמיים בקרב מבוגרי גיל. הקומפוזיט של גורמים אלה עשוי להקשות עליהם לנווט בממדים מרובים של ממשקים דיגיטליים. מאחר ששירותי הטלהאלת משמשים לקבלת שירותי רפואה מרחוק, הפיכת הפלטפורמות הללו לכוללות הופכת להיות נחוצה (Cynthi, et al., (2021)).

הבעיות המרכזיות שמתמודדות איתן מבוגרים כוללות:

• חוסרי ראייה: קשיים בקריאת טקסטים ומספרים בלא רמזים, הבחלת צבעים, והבחלת פרטים עדינים של פריטי ממשק.
• קשיים בשמיעה: קשי לשמוע צלילים או דיבור במהלך שיחות וידאו או בעיות בהבנת מה שנאמר במהלך כאלה.
• מגבלות מיומנויות מוטוריות: כמעט בלתי אפשרי כשמנסים להפעיל כפתורים קטנים או כשנדרשים להיות מדויקים עם הבקרות.
• עומס קוגניטיבי: בעיה בטיפול בתצוגות מורכבות או בעיה בשינוי מראי פנים אחד לאחר.

הכנסת הנחיות נגישות לפלטפורמות טלהבריאות מחייבת מפתחים לעצב פתרונות שבהם אנשים מבוגרים יכולים למצוא את השימוש נוח יותר מאשר במערכות מסורתיות.

עמידה בהנחיות WCAG ב-React

WCAG מתייחס ל-הנחיות נגישות תוכן האינטרנט שבאמצעותן קיימת זמינות של תקנים שהופכים את תוכן האינטרנט ליותר נגיש. ההנחיות הללו מתמקדות בארבעה עקרונות עיקריים: POUR, המייצג נגיש, ניתן להפעלה, ניתן להבנה ועמיד הוא התהליך (נגuyen, 2024). עכשיו, בואו נדון כיצד כל אחד מהעקרונות הללו יכול להתבצע בעזרת React כדי לפתח פלטפורמות טלהבריאות נגישות עבור אנשים מבוגרים.

נגיש: HTML סמנטי ו-ARIA

HTML סמנטי ו-ARIA משמשים באלמנטים מדיה ומאפשרים לקורא המסך להודיע בצורה נכונה למשתמש עם מכשיר עזר.

  // דוגמה: סרגל ניווט סמנטי
  

לשורת הניווט ניתן תג aria-label, מה שמגביר את הסיכוי שקורא מסך יבין את תוכן המקטע. שימוש בתגים סמנטיים של HTML כמו <nav> ו- <ul> גורם להם להיות מובנים למשתתפים המשתמשים בקוראי מסך או בכלים אחרים שעומדים לרשותם (פוזיס, בורודין, סוביאק ומלניק, 2015).

ניתן להפעלה: ניווט מקלדת

לחלק מהאנשים המבוגרים עלולה להיות בעיה בשימוש בעכבר והם מעדיפים לגשת לקישורים באמצעות מקלדת בלבד. זה חשוב לנגישות מכיוון שזה דורש שכל האלמנטים יהיו ניתנים ללחיצה תוך שימוש רק במקלדת.

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

export function App(props) {

  return (
    

      // דוגמה: חלון מוקפץ נגיש למקלדת
    
  );
}

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

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

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

Close
Modal Content


  );
};

בדוגמה זו, ברגע שחלון המוקפץ נפתח, הוא מקבל אוטומטית את המוקד, מה שהופך אותו לרגיש למשתמשים המשתמשים במקלדת. לחצן הסגירה משתמש ב- aria-label לזיהוי קל, וחלון המוקפץ מתואר כדיאלוג; הוא משתמש בתכונת aria-modal (וואטאנאבה, ג'ראלדו ומטוס, 2014).

מובן: תוויות והוראות ברורות

עומס קוגניטיבי נמוך נתמך על ידי הצגת הוראות באופן חד משמעי והבטחה שכל רכיב טופס כולל תווית התייחסות או שם לתיאורו.

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

  return (

    

      // דוגמה: טופס עם תוויות נגישות
      

Name

Appointment Date

Submit



  );

}
// יומן ל קונסולה

console.log('Hello console');

במילים אחרות, רכיב התווית מקושר עם קלט הטופס המתאים דרך המאפיין htmlFor, שהוא יותר מובן עבור משתמשי קוראי המסך. המאפיין aria-required מודיע לאנשים מבוגרים שיש למלא את השדות; זה מאפשר לאנשים מבוגרים למילא את הטופס באופן הולם.

חזק: נגישות לטכנולוגיות סיוע

חלקים נפוצים בבניין הזמינים בכל טכנולוגיות היישום כוללים קוראי מסך, בקרת קול, או כל מכשירי קלט אחרים שהופכים את הפלטפורמה לנגישה בעתיד ונגישה לכולם.

יישום תכונות וידאו נגישות לשיחה בוידאו

אחד מרכיבי המערכת לטלמדיקין הכי חשובים הוא שירות השיחה בוידאו. עבור אנשים מבוגרים, התכונה הזו צריכה להיות אינטואיטיבית, עם כפתורים גדולים שיש בהם תוויות מודפסות בבהירות ובפיקוד קול פשוט.

כפתורים גדולים וקלים לשימוש

עבור משתמשים עם יכולות שליטה בתנועה נמוכה, הכפתורים צריכים להיות גדולים, לחיצה ומותווים בקלות.

import React from 'react';

export function App(props) {
  return (
    

      // דוגמה: כפתורי בקרת וידאו נגישים
      import AccessibleButton from './AccessibleButton';
      const VideoControls = (
        ({ onMute, onToggleVideo, onEndCall, isMuted, isVideoOn }) => (
          


              {isMuted ? 'Unmute' : 'Mute'}
            

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

              End Call
            

        )
      ); 
      export default VideoControls;
    
  );
}

// התחבר למסוף
console.log('Hello console');

הכפתורים הללו הם גדולים וברורים, והמקלדת או קורא המסך נגישים, והם מזוהים על ידי טקסט משמעותי. המאפיין aria-pressed מעניק מידע נוסף על מצב הנוכחי של הכפתור, בין אם המשתמש מושתק או לא, מה שהופך את השימוש לקל יותר עבור משתמש עם פגיעות ראיה.

בקרי קול ברורים

הבחנה ברורה בין הגדרות הבקרה חיונית, במיוחד עבור קשישים ואנשים עם קשיי שמיעה. זה יכול להפחית את חוויית הטלקו-רפואה הכוללת שלהם מכיוון שהמיקרופון עוזר לאנשים להתאים את עוצמת הקול.

import React from 'react';

export function App(props) {
  return (
    

      // דוגמה: בקרות שמע נגישות
      const AudioControls = (
        ({ volume, onVolumeChange }) => (
          

Volume


        )
      ); 
      export default AudioControls;
    
  );
}

המחוון גם ניתן לשימוש עבור קוראי מסך מכיוון שעוצמת הקול מוגדרת כעת כ- aria-value min, aria-value max, ו- aria-value. בדרך זו, ניתן לשלוט בקלות על השמע מבלי לבזבז את כל הזמן על ביצוע שינויים בהתבסס על רמז חזותי.

דוגמה: ממשק ועידת וידאו

לכן, על ידי שילוב בקרות זמינות, ניתן לבנות ממשק ועידת וידאו בקנה מידה מלא במיוחד עבור משתמשים מבוגרים.

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 = () => {
    // לוגיקה לסיום השיחה
  };
  const handleVolumeChange = (e) => setVolume(e.target.value);

  return (
    


        {/* Video stream component */}
      



  );
};

דוגמה זו מציעה פתרון פשוט לוועידות וידאו שבו לקוחות יכולים לנהל את איכות השמע והוידאו שלהם תוך הבטחת המבנה העיקרי של הממשק ניתן לניהול באמצעות מקלדת ותואם עם מכשיר סיוע.

סיכום

הבטחת פיתוח גישה טלקו-רפואית חלופית ואמינה עבור אוכלוסיית הקשישים מאפשרת לכל אחד, ללא קשר למוגבלויות, ליהנות במלואה מיכולות הטיפול מרחוק. תקני WCAG, כולל שימוש נכון ב-HTML, ARIA, ניווט מקלדת, ונגן וידאו נגיש, כאשר הם מיושמים, יפיקו פלטפורמות לוגיות. הגמישות טמונה ברכיבי React: פתרונות ועיצובים חוצי תחומים המאמצים, מעורבים ומעצימים את הקשישים, כמו גם מתאמים את החלוקות בין טכנולוגיה לבריאות.

המדריך הזה מציע רק מספר דוגמאות כיצד ניתן להשתמש ב-React בעיצוב פלטפורמות טלהלף נגישות. להוביל את הנושא של נגישות הפתרונות המפותחים היא הדרך הטובה ביותר לוודא שהפתרונות הדיגיטליים לבריאות המפותחים יועילו לאלו שזקוקים להם ביותר.

מראי מקום

• סינטי, ג', סיק, מארק, ר', אן, שכר, ו-מקאלרני. ((2021)). האם טלהלף יכול לשפר שוויון במהלך מגיפת COVID-19? כתב עת של המועצה האמריקאית לרפואת משפחה,. doi:10.3122/JABFM.2021.S1.200229
• נגuyen, ה. (2024). שיפור הנגישות באפליקציות אינטרנט: מחקר מקיף על בעיות נגישות נפוצות ויישום פתרונות באפליקציית React. שיפור הנגישות באפליקציות אינטרנט, 61. נלקח מ-https://urn.fi/URN:NBN:fi:aalto-202408255819
• פוזיס, י', בורודין, י', סוביאק, א', ו-מלניק, ו'. (2015). נגישות אינטרנט זולה: מקרה עבור ARIA זולה יותר. פרוטוקולים של הכנס הבינלאומי ה-12 לאינטרנט עבור כולם, 1-4. doi:https://doi.org/10.1145/2745555.2746657
• וואטנבה, ו', ג'רלדו, ר' ג', ו-מאטוס, ר' פ'. (2014). מנגנוני ניווט באמצעות מקלדת בווידג'טים של טאבים: חקירה על התאמה של ARIA. פרוטוקולים של הסימפוזיון השנתי ה-29 של ACM על מחשוב יישומי, 721-726. doi:https://doi.org/10.1145/2554850.2554947