Tables, Multimedia Embedding, and Accessibility Basics (ARIA Roles) are essential components of modern web development that help structure data, enrich user experience, and ensure inclusivity.
Tables present structured information clearly, multimedia elements enhance engagement through audio and video, and ARIA roles improve accessibility by enabling assistive technologies to better understand and interact with web content.
Tables for Tabular Data
Tables organize data grids like sales reports or schedules—never use them for layouts (that's CSS Grid's job).
Proper structure makes them screen-reader friendly and searchable. HTML5 requires <thead>, <tbody>, and <caption> for full semantics.
When and How to Use Tables Correctly
Reserve tables for true tabular data where rows and columns have meaning. Add a <caption> describing the table's purpose.
1. Start with <table> wrapper.
2. Add <caption> immediately after.
3. Use <thead> for headers, <tbody> for data rows.
4. Apply scope="col" or scope="row" to <th> elements.
Practical Example: Monthly Sales Table
<table>
<caption>2025 Q1 Sales by Product</caption>
<thead>
<tr>
<th scope="col">Product</th>
<th scope="col">Units Sold</th>
<th scope="col">Revenue</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Laptops</th>
<td>150</td>
<td>$22,500</td>
</tr>
<tr>
<th scope="row">Phones</th>
<td>300</td>
<td>$45,000</td>
</tr>
</tbody>
</table>Common Mistakes to Avoid:
Multimedia Embedding Best Practices
HTML5 revolutionized media with native <video>, <audio>, and <picture>—no plugins needed.
These elements support responsive delivery and accessibility. Always include fallbacks and captions for universal playback.
Images and Responsive Embedding with <picture>
The <picture> element serves different images by device size, saving bandwidth. Pair with <figcaption> inside <figure> for context.
Responsive Image Syntax:
<figure>
<picture>
<source media="(min-width: 1024px)" srcset="large.jpg">
<source media="(min-width: 768px)" srcset="medium.jpg">
<img src="small.jpg" alt="Mountain landscape at sunset">
</picture>
<figcaption>Sunset over the Alps, captured 2025</figcaption>
</figure>Key Benefits
1. Reduces mobile data usage by 50–70%:
Optimized images and responsive loading techniques ensure that smaller, appropriate image sizes are delivered to mobile devices.
This significantly lowers data consumption, improves load speed, and enhances the user experience on slower networks.
2. Maintains quality across screens:
Responsive images adapt to different screen sizes and resolutions, ensuring visuals remain sharp on desktops, tablets, and high-DPI displays.
This provides a consistent and professional appearance across all devices.
3. <figcaption> boosts SEO as crawlable text:
The <figcaption> element provides descriptive, indexable text associated with images or media.
Search engines can crawl this content to better understand context, improving accessibility and potentially enhancing search rankings.
Attributes Table
Video and Audio Embedding
Native players work everywhere in 2025 browsers. Provide multiple formats and controls.
Video Example:
<video controls poster="thumbnail.jpg" width="640">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<p>Your browser doesn't support video.</p>
</video>Accessibility Basics with ARIA Roles
ARIA (Accessible Rich Internet Applications) enhances HTML when native semantics fall short. Use sparingly—native elements first. Follow the ARIA spec: no decoration-only roles, always valid HTML.
Core ARIA Principles and Common Roles
ARIA adds meaning to custom components. Prefix: aria-*. Never use on native elements with built-in roles.
Fundamental Rules:
1. ARIA is a last resort: <button> beats <div role="button">.
2. Use aria-hidden="true" for decorative images.
3. aria-live="polite" announces dynamic updates.
Practical ARIA Implementation Steps
Search Icon Example:
<button aria-label="Search site" aria-expanded="false">
<svg aria-hidden="true">...</svg>
</button>Integration Example: Accessible Product Card
Combine everything in a real component:
<article>
<figure>
<picture>...</picture>
<figcaption>Premium Laptop</figcaption>
</figure>
<table>
<caption>Specs</caption>
<tbody>
<tr><th>RAM</th><td>16GB</td></tr>
</tbody>
</table>
<button aria-label="Add to cart">Add</button>
</article>