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

The COVID-19 pandemic accelerated the adoption of telehealth services, highlighting the need to make these technologies accessible to all users, especially older adults. Implementing the following recommendations is crucial to ensure telehealth benefits reach every population group.

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, hearing, 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 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 conventional systems.

Adhering to WCAG Guidelines in React

WCAG refers to the Web Content Accessibility Guidelines, which are standards that are available to 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 label ‘Main Navigation’ is added as an aria-label, which enhances the chances that a screen reader will understand the section's content. 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 mouse problems and prefer to access the links with a keyboard. 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, when the modal is opened, it automatically becomes focused, making it sensitive to keyboard users. The close button uses an aria-label for easy identification, 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 ensuring 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 must 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 application technologies include screen readers, voice controls, or any other input devices that will make the platform adaptable and accessible to all in the future.

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

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

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 button's current state, 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 spending the entire time making changes based on the visual cue.

Example: Video Conferencing Interface

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

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 guaranteeing that the interface's main structure can be managed using a keyboard and is compatible with an assistive gadget.

Conclusion

Ensuring that accessible telehealth software 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 an accessible video player, will help produce digitally accessible platforms. React’s flexible components enable solutions that bridge the gap between healthcare and technology while creating an engaging and empowering experience for older adults.

This guide offers only some examples of how React can be used while designing accessible telehealth platforms. Prioritizing accessibility in digital health solutions ensures they serve those who most need them.

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