Dynamic content and ARIA

Make data tables understandable

Use captions, header cells, scopes, and simple structure so schedule relationships remain available.

9 minute lesson

~~~

The event schedule has a caption, column headers, and row headers where session names identify each row. This is a small part of a deliberately flawed event-registration page that is audited, repaired, and retested with real evidence, but the boundary it creates affects everything that follows.

A data table encodes relationships between headers and cells; layout tables and div grids do not provide those relationships. The useful target is not encyclopedic coverage. Make one deliberate choice, observe its consequences, and know which requirement would make you revise it.

Watch for one shortcut in particular: trying to style a div grid to look tabular or merge cells until header relationships become ambiguous. It makes later failures harder to locate. Instead, use a real table for relational data, keep it simple, and associate headers explicitly when complexity requires it. Prefer an implementation you can explain from the outside before optimizing it.

Keep the wider goal in view: Use ARIA and dynamic announcements only where native HTML cannot express the required relationship or state. A short observation with concrete evidence is more useful than a confident sentence with no reproduction path.

Navigate the schedule by table commands and verify the right headers are announced for every data cell. Hand the result to someone else and see whether the behavior is clear without an oral explanation.

Lesson completed

Take this course offline

Get every free book and course as PDF and EPUB files.

Get the download library →