aria-readonly

<!-- Basic aria-readonly usage -->

<!-- Read-only input field -->
<label for="order-id">Order ID</label>
<input 
  type="text" 
  id="order-id"
  value="ORD-2024-001234"
  aria-readonly="true"
  readonly
/>

<!-- Screen reader announces: "Order ID, read only, edit text, ORD-2024-001234" -->

<!-- Read-only textarea -->
<label for="terms">Terms and Conditions</label>
<textarea 
  id="terms"
  aria-readonly="true"
  readonly
>
  By using this service, you agree to our terms...
</textarea>

<!-- aria-readonly vs disabled - KEY DIFFERENCE -->

<!-- READONLY: Can focus, can select/copy, IS in tab order -->
<input 
  type="text" 
  value="You can select and copy this text"
  aria-readonly="true"
  readonly
  tabindex="0"
/>
<!--
  • User CAN focus this field
  • User CAN select and copy text
  • User CANNOT edit the value
  • Value IS submitted with form
  • Included in tab navigation
-->

<!-- DISABLED: Cannot focus, cannot select, NOT in tab order -->
<input 
  type="text" 
  value="You cannot interact with this"
  disabled
/>
<!--
  • User CANNOT focus this field
  • User CANNOT select or copy text
  • User CANNOT edit the value
  • Value is NOT submitted with form
  • Excluded from tab navigation
-->

<!-- Choose wisely based on user needs! -->

<!-- Custom widgets with aria-readonly -->

<!-- Read-only custom combobox -->
<div 
  role="combobox"
  aria-readonly="true"
  aria-expanded="false"
  aria-labelledby="country-label"
  tabindex="0"
>
  <span id="country-label">Country</span>
  <span>United States (locked)</span>
</div>

<!-- Read-only grid cell -->
<div role="grid" aria-label="Data Table">
  <div role="row">
    <div role="gridcell" aria-readonly="true">
      Cell value (cannot be edited)
    </div>
    <div role="gridcell">
      Editable cell
    </div>
  </div>
</div>

<!-- Read-only slider (display only) -->
<div
  role="slider"
  aria-readonly="true"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-valuenow="75"
  aria-label="Progress"
  tabindex="0"
>
  75%
</div>

<!-- Toggle between read and edit mode -->
<form id="profile-form">
  <div class="form-field">
    <label for="username">Username</label>
    <input 
      type="text" 
      id="username"
      value="johndoe"
      aria-readonly="true"
      readonly
    />
  </div>
  
  <div class="form-field">
    <label for="email">Email</label>
    <input 
      type="email" 
      id="email"
      value="john@example.com"
      aria-readonly="true"
      readonly
    />
  </div>
  
  <button 
    type="button" 
    onclick="toggleEditMode()"
    aria-pressed="false"
  >
    Edit Profile
  </button>
</form>

<script>
function toggleEditMode() {
  const inputs = document.querySelectorAll('#profile-form input');
  const button = document.querySelector('button');
  const isEditing = button.getAttribute('aria-pressed') === 'true';
  
  inputs.forEach(input => {
    if (isEditing) {
      input.setAttribute('readonly', '');
      input.setAttribute('aria-readonly', 'true');
    } else {
      input.removeAttribute('readonly');
      input.setAttribute('aria-readonly', 'false');
    }
  });
  
  button.setAttribute('aria-pressed', !isEditing);
  button.textContent = isEditing ? 'Edit Profile' : 'Save Changes';
}
</script>

// React component with readonly toggle
import { useState } from 'react';

function ReadonlyInput({ 
  label, 
  value, 
  isReadonly, 
  onChange,
  ...props 
}) {
  return (
    <div className="form-field">
      <label htmlFor={props.id}>{label}</label>
      <input
        {...props}
        value={value}
        onChange={onChange}
        readOnly={isReadonly}
        aria-readonly={isReadonly}
        className={isReadonly ? 'readonly-field' : 'editable-field'}
      />
    </div>
  );
}

function EditableProfileForm() {
  const [isEditMode, setIsEditMode] = useState(false);
  const [profile, setProfile] = useState({
    name: 'John Doe',
    email: 'john@example.com',
    phone: '+1 (555) 123-4567'
  });

  const handleChange = (field) => (e) => {
    setProfile(prev => ({ ...prev, [field]: e.target.value }));
  };

  return (
    <form>
      <ReadonlyInput
        id="name"
        label="Full Name"
        value={profile.name}
        isReadonly={!isEditMode}
        onChange={handleChange('name')}
      />
      
      <ReadonlyInput
        id="email"
        type="email"
        label="Email Address"
        value={profile.email}
        isReadonly={!isEditMode}
        onChange={handleChange('email')}
      />
      
      <ReadonlyInput
        id="phone"
        type="tel"
        label="Phone Number"
        value={profile.phone}
        isReadonly={!isEditMode}
        onChange={handleChange('phone')}
      />
      
      <button
        type="button"
        onClick={() => setIsEditMode(!isEditMode)}
        aria-pressed={isEditMode}
      >
        {isEditMode ? 'Save Changes' : 'Edit Profile'}
      </button>
      
      {/* Announce mode change to screen readers */}
      <div 
        role="status" 
        aria-live="polite" 
        className="sr-only"
      >
        {isEditMode ? 'Edit mode enabled' : 'View mode enabled'}
      </div>
    </form>
  );
}