为老年人设计无障碍远程医疗平台：React开发者指南

随着远程医疗服务在当今世界变得日益重要，特别是在新冠疫情之后，所有用户群体，包括老年人，都必须从旨在强调上述重要性的项目中获益。

本文采用React来审查创建可访问的远程医疗应用的关键技术方法，这些方法应该遵循WCAG。和许多事物一样，通过考虑以下设计或开发的关键领域，通常可以构建对所有人（包括老年人）都可访问的界面。

为什么可访问性对老年人在远程医疗中很重要

挑战包括视力问题、听力问题、灵活性和认知负担问题，这些问题在老年人群中很明显。这些因素的综合使他们难以在数字界面的多个维度上操纵。由于远程医疗用于远程接收医疗服务，使这些平台具有包容性变得必要（Cynthi等人（2021年））。

老年人面临的关键问题包括：

• 视力受损：难以阅读不清晰的文本和数字，区分颜色，辨别界面项目的细节。
• 听力困难：在视频通话期间听到声音或语音，或者在此类通话期间理解所说的内容。
• 运动技能限制：在操作小按钮或需要精确控制时几乎不可能。
• 认知负荷：处理复杂显示或在不同界面之间切换时遇到问题。

在远程医疗平台中引入可访问性指南要求开发人员设计解决方案，使老年人的使用体验比传统系统更舒适。

遵循React中的WCAG指南

WCAG指的是网络内容可访问性指南，通过这些指南提供了使网络内容更具可接收性的标准。这些指南侧重于四个主要原则：可感知、可操作、可理解和稳健（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