Include ARIA setsize and posinset on dynamic list items

Medium

---

accessibilityreactARIA

What

This practice is triggered when generating list items dynamically, especially when the complete list is not fully available in the DOM at render time. Violating code might omit ARIA attributes like aria-setsize and aria-posinset on each list item.

Why

Providing aria-setsize and aria-posinset helps assistive technologies understand the overall size of the list and the position of each item. This ensures better accessibility and context for users with disabilities.

Fix

Include aria-setsize to indicate the total number of items in the list and aria-posinset to denote each item's sequence. Ensure these attributes are updated if the list changes dynamically.

Examples

Example 1:

Positive

This example includes aria-setsize and aria-posinset attributes on each list item, providing clear context for assistive technologies.

import React from 'react';

const DynamicList: React.FC<{ items: string[] }> = ({ items }) => {
  return (
    <ul>
      {items.map((item, index) => (
        <li 
          key={index} 
          aria-setsize={items.length}
          aria-posinset={index + 1}
        >
          {item}
        </li>
      ))}
    </ul>
  );
};

export default DynamicList;

Negative

This example omits aria-setsize and aria-posinset attributes, which may result in a less accessible dynamic list for users relying on assistive technologies.

import React from 'react';

const DynamicListMissingARIA: React.FC<{ items: string[] }> = ({ items }) => {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>
          {item}
        </li>
      ))}
    </ul>
  );
};

export default DynamicListMissingARIA;