Проектирование доступных платформ телемедицины для пожилых людей: руководство для разработчика React

JavaScript

Поскольку услуги телемедицины становятся все более актуальными в современном мире, особенно после пандемии COVID-19, все группы пользователей, включая пожилых людей, должны извлекать выгоду из программ, что подчеркивает важность вышеупомянутых рекомендаций.

React используется в этой статье для изучения ключевых технических подходов к созданию доступных приложений телемедицины, которые должны соответствовать стандартам WCAG. Как и во многих других областях, часто возможно создавать интерфейсы, доступные для всех, включая пожилых людей, учитывая следующие ключевые аспекты дизайна или разработки.

Почему доступность имеет значение для пожилых людей в телемедицине

Сложности включают проблемы со зрением, слухом, подвижностью и когнитивной нагрузкой, которые проявляются у пожилых людей. Комплекс этих факторов затрудняет им маневрирование в различных аспектах цифровых интерфейсов. Поскольку телемедицина используется для получения медицинских услуг удаленно, становится необходимым делать эти платформы инклюзивными (Cynthi и др., (2021)).

Ключевые проблемы, с которыми сталкиваются пожилые люди, включают:

Проблемы со зрением: трудности с чтением мелкого текста и цифр, различением цветов и восприятием мелких деталей элементов интерфейса.
Сложности со слухом: проблемы с восприятием звуков или речи во время видеозвонков или трудности с пониманием того, что говорят во время таких звонков.
Ограничения в моторике: Почти невозможно нажимать маленькие кнопки или быть точным в управлении.
Когнитивная нагрузка: Проблема в обращении с сложными дисплеями или переключении между интерфейсами.

Внедрение руководящих принципов доступности в платформы телемедицины требует от разработчиков создания решений, позволяющих пожилым людям чувствовать себя более комфортно, чем в традиционных системах.

Соблюдение руководящих принципов WCAG в React

WCAG относится к Руководству по доступности веб-контента, благодаря которому появляются стандарты, делающие веб-контент более отзывчивым. Эти руководящие принципы фокусируются на четырех основных принципах: POUR, что означает Воспринимаемость, Управляемость, Понятность и Устойчивость, является процессом (Нгуен, 2024). Теперь давайте обсудим, как каждый из этих принципов может быть реализован с помощью React для разработки доступных платформ телемедицины для пожилых людей.

Воспринимаемость: Семантический HTML и ARIA

Семантический HTML и атрибуты ARIA, используемые в медиа-элементах, позволяют экранным чтецам правильно информировать пользователя с ассистивным устройством.

HTML



  // Пример: Семантическое навигационное меню
  


Appointments


Profile


Settings

Здесь слово “панель навигации” имеет aria-label, что повышает вероятность того, что считыватель экрана поймет содержимое раздела. Использование семантических тегов HTML, таких как <nav> и <ul>, делает их понятными для участников, использующих считыватели экрана или любые другие инструменты, которыми они могут пользоваться (Puzis, Borodin, Soviak, & Melnyk, 2015).

Доступность: Навигация с клавиатуры

Некоторым пожилым людям может быть сложно пользоваться мышью, и они предпочитают получать доступ к ссылкам только с помощью клавиатуры. Это важно для доступности, поскольку требует, чтобы все элементы были доступны для нажатия при использовании только клавиатуры.

JavaScript

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 (
    

Modal Content


  );
};

В этом примере, в момент открытия модального окна, оно автоматически получает фокус, что делает его доступным для пользователей, использующих клавиатуру. Кнопка закрытия использует aria-label для удобной идентификации, а модальное окно описывается как диалоговое; оно использует атрибут aria-modal (Watanabe, Geraldo, & Mattos, 2014).

Понятность: Ясные метки и инструкции

Низкая когнитивная нагрузка поддерживается недвусмысленным представлением инструкций и обеспечением того, что каждый элемент формы имеет метку для ссылки или имя для описания.

JavaScript

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

  return (

    
      // Пример: Форма с доступными метками
      
Name

Appointment Date





  );

}
// Вывод в консоль

console.log('Hello console');

Иными словами, элемент метки ассоциируется с соответствующим входным формой через атрибут htmlFor, что более понятно для пользователей скринридеров. Атрибут aria-required сообщает пожилым людям, что поля должны быть заполнены; это позволяет пожилым людям заполнять форму правильно.

Надежность: Доступность для Технологий Вспомогательной Навигации

Общие части здания, которые могут использоваться во всех технологиях приложений, включают скринридеры, голосовое управление или любые другие устройства ввода, делающие платформу адаптивной в будущем и доступной для всех.

Внедрение Доступных Возможностей Видеоконференций

Возможно, один из самых важных элементов системы телемедицины – это видеоконференц-сервис. Для пожилых людей эта функция должна быть интуитивно понятной, с крупными кнопками с четко надписанными ярлыками и простым аудиоуправлением.

Крупные Простые Кнопки

Для пользователей с ограниченными возможностями моторики кнопки должны быть крупными, нажимаемыми и легко различимыми.

JavaScript

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 дает больше информации о текущем состоянии кнопки, является ли пользователь заглушен или нет, что упрощает использование для пользователя с нарушениями зрения.

Ясное Аудиоуправление

Четкое различие в настройках управления имеет решающее значение, особенно для пожилых людей и тех, кто испытывает трудности со слухом. Это может снизить их общий опыт телемедицины, поскольку микрофон помогает людям регулировать громкость.

JavaScript

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. Таким образом, вы можете легко управлять аудио, не тратя все время на изменения, основанные на визуальном сигнале.

Пример: интерфейс видеоконференции

Таким образом, интегрируя доступные элементы управления, можно создать полнофункциональный интерфейс видеоконференции специально для пожилых пользователей.

JavaScript

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)). Может ли телемедицина улучшить равенство во время пандемии COVID-19? Журнал Американского совета семейной медицины,. doi:10.3122/JABFM.2021.S1.200229
Nguyen, H. (2024). Повышение доступности в веб-приложениях: комплексное исследование общих проблем доступности и внедрение решений в приложении на React. Повышение доступности в веб-приложениях, 61. Получено с https://urn.fi/URN:NBN:fi:aalto-202408255819
Puzis, Y., Borodin, Y., Soviak, A., & Melnyk, V. (2015). Доступная веб-доступность: случай для более дешевой ARIA. Материалы 12-й Международной конференции Web for All, 1-4. doi:https://doi.org/10.1145/2745555.2746657
Watanabe, W. M., Geraldo, R. J., & Mattos, R. P. (2014). Механизмы навигации с клавиатуры в вкладках: исследование соответствия ARIA. Материалы 29-й Ежегодной симпозиума ACM по прикладным вычислениям, 721-726. doi:https://doi.org/10.1145/2554850.2554947

Source:
https://dzone.com/articles/a-react-developers-guide-to-designing-telehealth-platforms