Skip to main content

Use semantic HTML list elements for unordered and ordered lists

Medium
accessibilityreacthtml

What​

When displaying collections of items in a list format, check that the code uses native HTML list elements (<ul> or <ol> with <li>). Avoid replacing semantic elements with generic containers (like <div>) even when using ARIA roles.

Why​

Native list elements provide inherent accessibility, allowing assistive technologies to interpret list structures correctly. This ensures compliance with WCAG guidelines and improves user experience for people using screen readers.

Fix​

Replace non-semantic containers with <ul> or <ol> for unordered and ordered lists respectively. Use <li> for list items instead of generic elements, or add proper ARIA roles only as a fallback when native elements cannot be used.

Examples​

Example 1:​

Positive​

This example uses native <ol> and <li> elements, ensuring semantic correctness and enhanced accessibility.

import React from 'react';

const OrderedList: React.FC = () => {
  return (
    <ol>
      <li>Introduction</li>
      <li>Features</li>
      <li>Conclusion</li>
    </ol>
  );
};

export default OrderedList;

Negative​

This example uses non-semantic <div> elements with ARIA roles, which is less optimal than using native <ul> and <li> elements.

import React from 'react';

const UnorderedListFallback: React.FC = () => {
  return (
    <div role="list">
      <div role="listitem">Home</div>
      <div role="listitem">About</div>
      <div role="listitem">Contact</div>
    </div>
  );
};

export default UnorderedListFallback;