為老年人設計無障礙的遠程醫療平台：React 開發者指南

隨著遠程醫療服務在當今世界變得越來越重要，特別是在COVID-19大流行之後，所有用戶群體，包括老年人，都必須從這些計劃中受益，這突顯了上述建議的重要性。

React在本文中被採用，以檢視創建可訪問的遠程醫療應用程序的關鍵技術方法，這些應用程序應遵循WCAG。與許多事物一樣，通過考慮以下設計或開發的關鍵領域，往往可以構建對所有人，包括老年人均可訪問的界面。

為什麼可訪問性對老年人在遠程醫療中至關重要

挑戰包括視力問題、聽力問題、靈活性和認知負荷問題，這些問題在老年人中十分明顯。這些因素的組合使他們在多個維度的數字界面上行動困難。由於遠程醫療用於遠程接收醫療服務，因此使這些平台具包容性變得必要（Cynthi等，(2021)）。

老年人面臨的主要問題包括：

• 視力障礙：難以閱讀不明顯的文本和數字，區分顏色，及辨識界面項目的細微細節。
• 聽力困難：在視頻通話中聽到聲音或語音時有困難，或在這些通話中理解所說內容時存在問題。
• 動作技能限制: 在操作小按鈕或需要精確控制時幾乎不可能。
• 認知負荷: 處理複雜顯示或在不同介面之間切換時出現問題。

將可及性指導方針引入遠程健康平台需要開發人員設計出讓老年人比傳統系統更易於使用的解決方案。

遵循WCAG指南於React中

WCAG指的是網頁內容可及性指南，這些指南提供了使網頁內容更具可接納性的標準。這些指南專注於四個主要原則：可感知（Perceivable）、可操作（Operable）、可理解（Understandable）和穩健（Robust）是這一過程（Nguyen, 2024）。現在，讓我們討論如何利用React實施這些原則，以開發適合老年人的可及性遠程健康平台。

可感知：語義HTML和ARIA

在媒體元素中使用的語義HTML和ARIA屬性使得螢幕閱讀器能夠正確地告知使用輔助設備的用戶。

  // 例子：語義導航欄
  

在這裡，單詞「導航欄」被賦予了aria-label，這增加了螢幕閱讀器理解該部分內容的機會。使用語義化的HTML標籤，例如<nav>和<ul>，使其對使用螢幕閱讀器或其他工具的參與者更具可理解性（Puzis, Borodin, Soviak, & Melnyk, 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屬性（Watanabe, Geraldo, & Mattos, 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 在設計無障礙遠程醫療平台時的應用。支持開發解決方案的無障礙性問題是確保正在開發的數字健康解決方案能夠惠及最需要的人的最佳方式。

參考文獻

• 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