Learn what ARIA roles are, how native HTML elements already have them, and which roles are worth knowing: landmark, widget, live region, and structure roles. Includes a searchable role explorer, a landmark lab that shows what a screen reader's landmark list looks like, and a live roles lab for status, alert, and log.
Learn the HTML main element: marking the dominant content of a page, why a page should have only one visible main, what belongs inside and outside it, skip link targets with tabindex, single-page app focus handling, reader modes, layout CSS, and common mistakes, with live examples.
Learn how semantic HTML makes pages accessible: heading outlines, landmarks, lists, buttons versus links, skip links, reading order, and visually hidden text. Includes a live structure navigator that shows what a screen reader user can jump between, and a real skip-link focus test.
Learn how semantic HTML helps search engines and other tools understand a page: main content versus boilerplate, landmarks, articles, sections, figures, dates, lists, tables, and breadcrumbs. Be honest about what semantics do and do not do for ranking. Includes a live semantic page analyzer, an element picker quiz, and a breadcrumb builder with matching structured data.
Put it all together: build a complete, accessible HTML page layout with header, nav, main, article, section, aside, and footer, add a skip link, style it with CSS grid, keep the reading order sensible, and check it with a practical checklist, with live examples.