Several ARIA attributes help users orient themselves within sets of related content. aria-current indicates that an element represents the current item in a set, accepting values like "page", "step", "location", "date", "time", "true", or "false"; it is commonly used on navigation links to mark the active page. aria-controls points to the id of an element that the current element affects, such as a button that controls a menu's id or a tab that controls a tabpanel. aria-owns goes further by declaring a parent-child relationship in the accessibility tree that does not exist in the DOM, which is useful when reparenting nodes such as moving a tooltip into a dialog tree. Changing the visual reading order with CSS without corresponding source-order or aria-flowto changes violates WCAG 1.3.2 Meaningful Sequence because tabbing and screen-reader navigation follow the DOM order, not the visual layout.
Two roles complement HTML semantics in specific situations. role="article" can mark any element as self-contained content, but a real `` element already has that semantic and is preferred. role="region" should be applied to a section that is a significant area of the page that screen-reader users should be able to navigate to, but only when the region also has an accessible name — otherwise it is not exposed as a landmark. Multiple landmarks of the same type should be distinguished with aria-label or aria-labelledby; role="search" (or a `` element with an accessible name) marks a search region. The aria-roledescription attribute overrides the screen reader's default announcement of an element's role with a custom string, useful for custom widgets where the default role name would be misleading.
Sortable table headers follow a precise pattern: a `