role="application" should wrap a widget, not browse-mode content

Rule role-application-misuse · Component patterns (best practice) · impact serious · Static + live

↩ Back to the rules index · WCAG cross-reference

Why it matters#

role="application" tells screen readers to pass keystrokes straight to the page and disables their reading (browse) mode. That is correct for a genuine keyboard widget, but when it wraps ordinary reading content — headings, paragraphs, plain links, form fields — screen-reader users lose their normal navigation with no widget to justify it.

How to fix#

Remove role="application" from static content, or scope it tightly to the actual interactive widget (grid, tree, spreadsheet) and keep browse-mode content outside it.

Example#

<div role="application"><h1>Article</h1><p>A long paragraph of text.</p><a href="/next">Next</a></div>

<div role="application"><div role="grid"><div role="row"><div role="gridcell">A1</div></div></div></div>

WCAG success criteria#

4.1.2 Name, Role, Value — Level A#

Every UI component must expose a correct name, role, and (where relevant) state/value to assistive technology.

Understanding 4.1.2

1.3.1 Info and Relationships — Level A#

Structure and relationships conveyed visually (headings, lists, tables, labels, groups) must also be available programmatically.

Understanding 1.3.1

Standards#

This rule contributes to the following standards:

WCAG A EN 301 549

References#

• WAI-ARIA — application role