Problem Set 02

Problem Set 02

Due: Wednesday, January 14, 2026 at 11:59pm

Status: Submitted on January 14, 2026

This problem set focused on accessible HTML and CSS tables. While the visual appearance may look similar before and after, the underlying code changes make a significant difference for screen readers and search engines.

Problem A: Code Changes

• Wrapped page sections in semantic elements: <header>, <main>, <section>, <footer>
• Fixed heading hierarchy (no skipping levels like h1 → h3)
• Added <label> elements with for attributes linking to form inputs
• Added type and name attributes to <input> elements
• Used aria-label on the submit button for screen reader accessibility
• Replaced <i> with <em> and <cite> for semantic meaning
• Added <time> element with datetime attribute for machine-readable dates
• Used <address> for contact info and proper mailto: / tel: links

Problem B: Code Changes

• Built table structure with <thead> and <tbody> separation
• Used <th> for header cells and <td> for data cells
• Applied :nth-child(even) for alternating row colors
• Added hover effects with tbody tr:hover selector
• Used border-collapse: collapse for clean table borders