Roles are essential for custom widgets built from generic elements like div and span, which carry no inherent meaning for assistive technology until a role is added. Once a role is set, the browser exposes that element to the accessibility tree with the expected behaviors and keyboard interactions users of that assistive technology expect for that role type.
Landmark roles (like role=”banner”, role=”main”, and role=”contentinfo”) are a specific category used for page-level navigation, letting screen reader users jump directly between major sections of a page.