Blog
Mert Özen's blog posts on software development, backend, frontend, and DevOps.
Tables and Tabular Data: caption, thead, th scope, colgroup and Responsive Tables
A data table gets its name from caption and its row and column relationships from th scope; on a narrow screen it goes into a scrollable wrapper with tabindex, role="region" and a name. In this post we read Bookstore's order history in the accessibility tree and measure that text-align on col does nothing, a headers/id bug, WebKit not focusing a plain wrapper, and how an Angular row using a host element instead of tr empties the table.
Semantic HTML and Landmarks: header, nav, main, article, section, aside, footer and search
Semantic elements turn into landmarks in the accessibility tree; but an unnamed section does not become a region, a header inside an article does not become a banner, and an h1 inside a section is still level one. In this post we move Bookstore's book detail page from div soup to a semantic structure, read every step from Chromium's accessibility tree, and settle the section/article/div decision, the search element, the single main rule and heading hierarchy without an outline algorithm.