Question 205456 in Html Question posted in
Some basic documentation can be found here.

What HTML Role to use for the infinite scroll sentinel in a Web page?

I made an infinite scroll feature for a Web page by using a Web Component that has an Intersection Observer on it, so basically the component itself is the "sentinel" that triggers the fetching of new data in the page. A basic example can be seen below:

<body>
  <main>
    <ul>
      <li></li>
      <li></li>
      .
      .
      .
    </ul>

    <infinite-scroll role="???" id="infinite-scroll-sentinel" class="infinite-scroll">
      <div id="infinite-scroll-spinner">
        {% render 'icon-spinner' %}
      </div>
    </infinite-scroll>
  </main>
</body>

So my question is: what type of role is better to use for this kind of implementations in order to improve accessibility? Maybe it’s better to not specify any role at all?

Tags:

2

Answers


  1. 0

    I think you’ll find quite some guidance on the Feed Pattern on the ARIA Authoring Practices Guide (APG).

    They explicitly refer to the feed role, which

    A scrollable list of articles where scrolling might cause articles to be added to or removed from either end of the list.

    Login or Signup to reply.
  2. 0

    I agree with @andy’s answer but also keep in mind that your "trigger" (at least in your code example) does not seem to be a keyboard focusable element (WCAG 2.1.1), so how does a keyboard user navigate to it to cause the infinite scroll? That would help clarify what type of role to use.

    Also, if the role you choose doesn’t quit fit, you can also use aria-roledescription to clarify the purpose of the role.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search