Designing Accessible Telehealth Platforms for Older Adults: A React Developer's Guide

As telehealth services increasingly become relevant in today’s world, particularly after the COVID-19 pandemic, all the user populations, including the elderly, must benefit from the programs leading to the importance of the above recommendations. 

React is adopted in this article to examine the key technical approaches for creating accessible telehealth applications that should follow the WCAG. As with many things, it is often possible to build interfaces that are accessible to all, including the elderly, by considering the following key areas of design or development.

Why Accessibility Matters for Older Adults in Telehealth

Challenges include vision problems, hearing problems, agility, and cognitive loading problems, which are evident in old-age adults. The composite of these factors makes it hard for them to maneuver across multiple dimensions of digital interfaces. Since telehealth is used to receive medical services remotely, making these platforms inclusive becomes necessary (Cynthi, et al., (2021)).

Key issues faced by older adults include:

• Vision impairments: Struggles to read unsubtle texts and numbers, differentiate colors, and discern fine details of interface items.
• Hearing difficulties: Hear sounds or speech during video calls or have issues comprehending what is said during such calls.
• Motor skills limitations: Near impossibilities when trying to operate small buttons or when being required to get precise with the controls.
• Cognitive load: Problem in handling complicated displays or having a problem shifting from one interface to another.

Introducing accessibility guidelines into telehealth platforms requires developers to design solutions where older adults can find utilization more comfortable than in conventional systems.

Adhering to WCAG Guidelines in React

WCAG refers to the Web Content Accessibility Guidelines through which there is an availability of standards that make web content more receptive. These guidelines focus on four main principles: POUR, which stands for Perceivable, Operable, Understandable, and Robust is the process (Nguyen, 2024). Now, let us discuss how each of these principles can be enacted with the help of React to develop accessible telehealth platforms for older adults.

Perceivable: Semantic HTML and ARIA

Semantic HTML and ARIA attributes used in media elements enable the screen reader to correctly inform a user with an assistive device.

<div className='App'>

  // Example: Semantic navigation bar
  <nav aria-label='Main Navigation'>
    <ul>
      <li>
        <a href='/appointments'>Appointments</a>
      </li>
      <li>
        <a href='/profile'>Profile</a>
      </li>
      <li>
        <a href='/settings'>Settings</a>
      </li>
    </ul>
  </nav>

</div>

Here, the word ‘navigation bar’ is given aria-label, which enhances the chances that a screen reader will understand the content of the section. Employing semantic HTML tags such as <nav> and <ul> make them comprehensible to participants using screen readers or any other tools they may have (Puzis, Borodin, Soviak, & Melnyk, 2015).

Operable: Keyboard Navigation

Some older people might have problems with using a mouse and prefer to access the links with a keyboard only. This is important for accessibility because it requires all elements to be clickable while using only the keyboard.

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

export function App(props) {

  return (
    <div className='App'>
      // Example: Keyboard-accessible modal
    </div>
  );
}

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

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

  }, [isOpen]);
  
  if (!isOpen) return null;
  
  return (
    <div className="modal" role="dialog" aria-modal="true" tabIndex="-1" ref={modalRef}>

      <button onClick={onClose} aria-label="Close Modal">Close</button>

      <p>Modal Content</p>
    </div>

  );
};

In this example, the moment the modal is opened, it automatically comes into focus, making it sensitive to users using a keyboard. The close button uses an aria-label for easy identification, and the modal is described as a dialog; it uses an aria-modal attribute (Watanabe, Geraldo, & Mattos, 2014).

Understandable: Clear Labels and Instructions

The low cognitive load is supported by unambiguously presenting instructions and making sure that every form element has a label to refer to or a name to describe it.

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

  return (

    <div className='App'>
      // Example: Form with accessible labels
      <form>

        <label htmlFor='name'>Name</label>

        <input type='text' id='name' name='name' aria-required='true' />

        <label htmlFor='date'>Appointment Date</label>

        <input type='date' id='date' name='date' aria-required='true' />

        <button type='submit'>Submit</button>

      </form>

    </div>

  );

}
// Log to console

console.log('Hello console');

In other words, the label element is associated with the proper form input through the htmlFor attribute, which is more comprehensible for screen reader users. The aria-required attribute tells the older adults that the fields have to be filled in; this enables the older adults to complete the form appropriately.

Robust: Accessibility to the Assistive Technologies

Common parts of the building that are usable in all technologies of application include screen readers, voice controls, or any other input devices that make the platform adaptable in the future and accessible by all.

Implementing Accessible Video Conferencing Features

Perhaps one of the most crucial elements of the telemedicine system is the video conferencing service. For the elderly, this feature should be intuitive, topped with large buttons with clearly printed labels and simple audio control.

Large, Easy-to-Use Buttons

For users with poor motor control abilities, the buttons should be large, clickable, and easily labeled.

import React from 'react';

export function App(props) {
  return (
    <div className='App'>
      // Example: Accessible video control buttons
      import AccessibleButton from './AccessibleButton';
      const VideoControls = (
        ({ onMute, onToggleVideo, onEndCall, isMuted, isVideoOn }) => (
          <div className='video-controls'>
            <AccessibleButton onClick={onMute} aria-pressed={isMuted}>
              {isMuted ? 'Unmute' : 'Mute'}
            </AccessibleButton>

            <AccessibleButton onClick={onToggleVideo} aria-pressed={isVideoOn}>
              {isVideoOn ? 'Stop Video' : 'Start Video'}
            </AccessibleButton>

            <AccessibleButton onClick={onEndCall} aria-label='End Call'>
              End Call
            </AccessibleButton>
          </div>
        )
      ); 
      export default VideoControls;
    </div>
  );
}

// Log to console
console.log('Hello console');

These buttons are large and clear, and the keyboard or screen reader is accessible, and they are identified by meaningful text. The aria-pressed attribute gives more information about the current state of the button, whether the user is muted or not, making it easier for a visually impaired user.

Clear Audio Controls

Clear differentiation of control settings is crucial, particularly for elderly people and those with hearing difficulties. This could reduce their overall telehealth experience since the microphone helps people adjust the volume.

import React from 'react';

export function App(props) {
  return (
    <div className='App'>
      // Example: Accessible audio controls
      const AudioControls = (
        ({ volume, onVolumeChange }) => (
          <div className='audio-controls'>
            <label htmlFor='volume-slider'>Volume</label>
            <input
              type='range'
              id='volume-slider'
              name='volume'
              min='0'
              max='100'
              value={volume}
              onChange={onVolumeChange}
              aria-valuemin='0'
              aria-valuemax='100'
              aria-valuenow={volume}
              aria-label='Volume Control'
            />
          </div>
        )
      ); 
      export default AudioControls;
    </div>
  );
}

The slider is also usable for screen readers because the volume is now defined as aria-value min, aria-value max, and aria-value. That way, you can easily control the audio without having to spend the entire time making changes based on the visual cue.

Example: Video Conferencing Interface

Thus, by integrating available controls, it is possible to construct a full-scale VC interface specifically for senior users.

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 = () => {
    // logic to end the call
  };
  const handleVolumeChange = (e) => setVolume(e.target.value);

  return (
    <div className="video-conference">
      <div className="video-feed" role="region" aria-label="Video Feed">
        {/* Video stream component */}
      </div>
      <VideoControls
        onMute={handleMute}
        onToggleVideo={handleToggleVideo}
        onEndCall={handleEndCall}
        isMuted={isMuted}
        isVideoOn={isVideoOn}
      />
      <AudioControls
        volume={volume}
        onVolumeChange={handleVolumeChange}
      />
    </div>
  );
};

This example offers a simple video conferencing solution where customers can manage their audio and video quality while also guaranteeing that the main structure of the interface can be managed using a keyboard and is compatible with an assistive gadget.

Conclusion

Ensuring that credible, alternate telehealth access is developed for the older adult population allows anyone, regardless of disability, to fully benefit from the capabilities of remote care. WCAG standards, including proper use of HTML, ARIA, keyboard navigation, and accessible video player, when employed, will produce logical platforms. Flexibility lies in the components of React: cross-cutting solutions and designs that embrace, engage, and empower the elderly, as well as coordinate the divisions between technology and health care.

This guide offers only several examples of how React can be used while designing accessible telehealth platforms. Championing the issue of accessibility of the developed solutions is the best way of making sure that the Digital Health solutions that are being developed will benefit those who need them most.

References

• 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