Screen Reader Not Reading Dynamic Content Fix

<!-- Wrong — error message appears but screen reader does not announce it -->
<div id="error-message" style="color: red;"></div>

<script>
    document.getElementById('error-message').textContent = 'Invalid email address';
</script>

<!-- Right — use aria-live to announce changes -->
<div id="error-message" aria-live="polite" style="color: red;"></div>

<script>
    document.getElementById('error-message').textContent = 'Invalid email address';
    // Screen reader announces: "Invalid email address"
</script>

<!-- Polite — waits for user to finish current action -->
<div aria-live="polite">
    <!-- Search results updated automatically -->
</div>

<!-- Assertive — interrupts current announcement (use sparingly) -->
<div aria-live="assertive">
    <!-- Critical error alerts -->
</div>

<!-- Off — default, no announcements -->
<div aria-live="off">
    <!-- Content changed but screen reader does not announce -->
</div>

<!-- Wrong — no announcement for urgent error -->
<div class="error-summary">
    <h2>3 errors found</h2>
    <ul>
        <li>Email is required</li>
        <li>Password too short</li>
    </ul>
</div>

<!-- Right — use role="alert" for urgent content -->
<div class="error-summary" role="alert" aria-live="assertive">
    <h2>3 errors found</h2>
    <ul>
        <li>Email is required</li>
        <li>Password too short</li>
    </ul>
</div>

<!-- Wrong — toast appears but is not announced -->
<div class="toast">
    <span class="icon-success"></span>
    Message sent successfully
</div>

<!-- Right — use role="status" for non-critical updates -->
<div class="toast" role="status" aria-live="polite">
    <span class="icon-success" aria-hidden="true"></span>
    Message sent successfully
</div>

// Wrong — replacing content may not trigger announcement
function updateSearchResults(results) {
    const container = document.getElementById('results');
    container.innerHTML = ''; // Clear
    results.forEach(r => {
        container.innerHTML += `<div>${r.title}</div>`;
    });
}

// Right — use live region for the container
// <div id="results" aria-live="polite" aria-relevant="additions removals">

function updateSearchResults(results) {
    const container = document.getElementById('results');
    container.innerHTML = ''; // Clear — screen reader hears "removals"
    results.forEach(r => {
        container.innerHTML += `<div>${r.title}</div>`;
    });
    // Screen reader announces the new content
}