Add ARIA landmarks, live regions, and semantic HTML for screen reader accessibility

[Copilot]

Implements WCAG 2.1 AA accessibility improvements for screen readers and dynamic content announcements.

Changes

Screen Reader Navigation

• Skip link to main content with visible-on-focus styling
• ARIA landmarks: <main>, <nav role="navigation">, role="search"
• Semantic HTML: <header>, <article>, <section> replacing generic divs
• Proper heading hierarchy (h1 for page titles, h2 for sections)
• Descriptive aria-label attributes on all interactive elements

Form & Input Accessibility

• Explicit labels with aria-required on required fields
• aria-describedby for contextual field help
• Screen reader text for icon-only actions using .sr-only
• Decorative icons marked aria-hidden="true"

Dynamic Content Handling

• aria-live="polite" for status updates (search results, product counts)
• aria-live="assertive" for errors and alerts
• Modal focus management with auto-focus on open/close
• Live region announcements for AJAX form submissions

Data Table Semantics

• scope="col" and scope="row" attributes on headers
• Hidden <caption> elements for table context
• Proper <th> usage for row/column headers

Example

Before:

<div class="jumbotron">
    <h1>Hello, to NodeVulnerable!</h1>
</div>
<div id="grid">
    <div class="item">
        <img src="/images/product.jpg" alt="">
    </div>
</div>

After:

<header class="jumbotron">
    <h1>Welcome to NodeVulnerable!</h1>
</header>
<section id="grid" aria-label="Product listing">
    <article class="item">
        <img src="/images/product.jpg" alt="Product name product image">
    </article>
</section>

Security

Fixed XSS vulnerabilities in new ARIA attributes by using HTML-escaped output (<%= vs <%-) for user-controlled content in alt text and aria-labels.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Update the UI for accessibility</issue_title>
<issue_description>Update the UI for accessibility

• Screen reader UX improvements
• Live region / dynamic content handling</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Update the UI for accessibility #103

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.