SiteLint documentation and guidelines

Role application

Description

The role="application" attribute is used in web development to identify an element as a web application rather than a standard web document. This ARIA (Accessible Rich Internet Applications) role signals to assistive technologies, such as screen readers, that the content within the element is interactive and requires application-like behavior, offering users more control and interaction options.

Disabilities impacted

  • Visual impairments: users with visual impairments who rely on screen readers benefit from the role="application" as it enables more interactive and dynamic content handling, akin to desktop applications.
  • Motor impairments: users who navigate using keyboards or other assistive devices can interact with application-like interfaces more effectively if the role is correctly applied.
  • Cognitive disabilities: users with cognitive disabilities may find application-like interactions more predictable and easier to use if the interface is properly marked up.

Why it matters

Using role="application" appropriately enhances the accessibility of web applications by allowing assistive technologies to switch into application mode, providing a richer set of interactions. It can improve the user’s experience by offering a more intuitive and manageable interface. However, misuse of this role can lead to confusion and accessibility issues.

Coding problems and solutions

Common coding problems

  • Overuse or misuse: applying role="application" to non-interactive content or entire web pages, which can confuse users and hinder the functionality of assistive technologies.
  • Lack of proper role application: not using role="application" for interactive sections of web applications where it would enhance the user experience.
  • Incorrect context: using role="application" in contexts where standard document interaction is more appropriate.

How to fix it

Apply to interactive regions

Use role="application" only for sections of the web application that are highly interactive and behave like desktop applications.

Incorrect example
<div role="application">
    <p>This is a paragraph of text.</p>
</div>
Correct example
<div role="application">
    <!-- Interactive elements here -->
</div>

Avoid full page application role

Do not apply role="application" to entire web pages unless the entire page is an interactive application.

Incorrect example
<body role="application">
    <h1>Welcome to the site</h1>
    <p>This is some introductory text.</p>
</body>
Correct example
<div role="application">
    <button>Save</button>
    <button>Cancel</button>
</div>

Ensure proper role context

Use role="application" in contexts where it clearly improves interaction, such as within a rich text editor, interactive game, or dynamic form interface.

Incorrect example
<div role="application">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>
Correct example
<div role="application">
    <textarea aria-label="Rich text editor"></textarea>
    <button>Bold</button>
    <button>Italic</button>
</div>

Known limitations

  • Assistive technology variability: different assistive technologies might interpret role="application" in various ways. Testing across multiple tools is necessary.
  • Complexity of interaction: overusing this role can add unnecessary complexity, making simple interactions harder for users to navigate.
  • User experience: misapplication can degrade the user experience, making navigation and interaction more difficult than easier.

Resources