Accessibility Basics for Building Telehealth Platforms With React Code Examples

Let’s cut to the chase: telehealth platforms aren’t just fancy video call apps. They’re lifelines for people with disabilities, chronic illnesses, and mobility challenges. But here’s the kicker — if your platform isn’t accessible, you’re slamming the door in the face of the very people who need it most.

In this guide, we’ll break down accessibility basics for telehealth platforms using React, complete with code examples that’ll make your UI not just compliant, but compassionate. No jargon, no fluff — just actionable steps to avoid building a digital hospital that’s “stairs-only.”

Semantic HTML: The Foundation You’re Probably Ignoring

You wouldn’t build a hospital without ramps, so why build a telehealth app with <div> soup? Semantic HTML isn’t just for SEO — it’s how screen readers understand your app.

The Problem:

// Yikes: A "button" made of divs  
<div onClick={handleVideoStart}>  
  <div>Start Video Call</div>  
</div>  

This might look like a button, but to a screen reader, it’s just… noise.

The Fix:

// Yes: An actual button with ARIA  
<button   
  onClick={handleVideoStart}  
  aria-label="Start video call with your doctor"  
>  
  Start Video Call  
</button>  

Why It Matters:

• Screen readers announce elements based on their tag. <button> triggers button behavior; <div> doesn’t.
• Keyboard navigation works out of the box. No hacking tabIndex.

Pro Tip: Use the eslint-plugin-jsx-a11y plugin to catch non-semantic elements masquerading as interactive controls.

Keyboard Navigation: Because Not Everyone Can Click

Imagine trying to navigate your app with a TV remote. That’s what keyboard-only users experience. For telehealth platforms, where users might have motor disabilities, this is non-negotiable.

The Problem:
Custom dropdowns or modals that trap focus, making it impossible to exit without a mouse.

The Fix: Manual Focus Management

// Custom modal component  
const ConsultationModal = ({ isOpen, onClose }) => {  
  const closeButtonRef = useRef();  

  useEffect(() => {  
    if (isOpen) {  
      closeButtonRef.current.focus();  
    }  
  }, [isOpen]);  

  return isOpen ? (  
    <div role="dialog" aria-labelledby="modal-title">  
      <h2 id="modal-title">Consultation Details</h2>  
      <button   
        ref={closeButtonRef}  
        onClick={onClose}  
        aria-label="Close consultation details"  
      >  
        ×  
      </button>  
      {/* Modal content */}  
    </div>  
  ) : null;  
};  

Why it matters:

• Focus is programmatically moved to the close button when the modal opens.
• The role="dialog" tells assistive tech this is a modal, not just another <div>.

Pro tip: Use focus-trapping libraries like focus-trap-react for complex modals.

ARIA Roles and Live Regions: The Invisible Narrators

Screen readers need play-by-play commentary for dynamic content, like incoming messages in a telehealth chat.

The Problem:
A patient’s chat message pops in, but the screen reader doesn’t announce it.

The Fix: aria-live Regions

// Chat message stream  
<div aria-live="polite" aria-atomic="false">  
  {messages.map((msg) => (  
    <div key={msg.id}>  
      <strong>{msg.sender}:</strong> {msg.text}  
    </div>  
  ))}  
</div>  

Why it matters:

• aria-live="polite" tells the screen reader to announce updates when the user isn’t busy.
• Use aria-live="assertive" for critical alerts (e.g., "Your session will end in 2 minutes").

Pro tip: For real-time video controls, label icons with aria-label:

<button  
  onClick={toggleVideo}  
  aria-label={isVideoOn ? "Turn camera off" : "Turn camera on"}  
>  
  {isVideoOn ? "x" : "y"}  
</button>  

Color Contrast and Visual Design: Not Everyone Sees Like You

Low vision? Color blindness? Sunlight glare? Your pretty pastel UI might be a wall of mud.

The Problem:
Grey text on a white background (#AAA) fails WCAG contrast ratios.

The Fix: Automated Contrast Checks

// Use styled-components or CSS-in-JS with theme variables  
const PrescriptionButton = styled.button`  
  background: ${(props) => props.theme.colors.primary};  
  color: ${(props) => props.theme.colors.textOnPrimary};  
  // WCAG 4.5:1 minimum contrast  
`;  

Verify with tools:

• Chrome DevTools’ Accessibility Tab
• @axe-core/react for automated testing:

import React from 'react';  
import { ReactDOM } from 'react-dom';  
import axe from '@axe-core/react';  

axe(React, ReactDOM, 1000); // Logs accessibility errors in dev  

Pro tip: Add a “High Contrast” theme toggle for users with low vision.

Form Accessibility: Where Telehealth Gets Real

Medical history forms, prescription uploads, symptom checklists — forms are the heart of telehealth.

The Problem:
Unlabeled inputs are like medical charts with no patient name.

The Fix: Proper Labels and Error Handling

// Patient input field  
<div>  
  <label htmlFor="patient-weight">Weight (kg)</label>  
  <input  
    type="number"  
    id="patient-weight"  
    name="weight"  
    aria-required="true"  
    aria-describedby="weight-error"  
  />  
  <span id="weight-error" role="alert">  
    {errors.weight && "Please enter a valid weight"}  
  </span>  
</div>  

Why it matters:

• aria-describedby links the input to its error message.
• role="alert" makes the error announced immediately.

Testing: The Accessibility Stress Test

You wouldn’t skip testing payment processing. Don’t skip accessibility testing.

Tools to use:

1. Screen readers: NVDA (Windows), VoiceOver (Mac)
2. Keyboard-only navigation: Try tabbing through your entire app.
3. Linters: eslint-plugin-jsx-a11y
4. Automated scanners: Axe, Lighthouse

React-specific tip: Test portals and conditional renders — these often break focus management.

The Bottom Line

Building an accessible telehealth platform isn’t about checking compliance boxes. It’s about recognizing that your code is a stethoscope, a wheelchair ramp, a pair of reading glasses. With 26% of U.S. adults living with disabilities, inaccessible design isn’t just lazy — it’s discriminatory.

So next time you’re coding a telehealth feature, ask: “Can someone with Parkinson’s use this? What about a blind parent managing their child’s asthma?”

Your React components might just save a life.

Accessibility Checklist for Telehealth Devs

1. Semantic HTML everywhere
2. Full keyboard navigation
3. ARIA roles and live regions for dynamic content
4. Minimum color contrast of 4.5:1
5. Form fields with visible labels and aria-labels
6. Automated + manual accessibility testing

Now go build something that heals, not hinders!