CodePark/ questions / Accessibility in React
START PRACTICINGPRACTICE
Frontend question · Accessibility › Accessibility in React

Why might a screen reader no longer announce this as "list, 3 items"?

function Items() {
  return (
    <div>
      <li>Apples</li>
      <li>Pears</li>
      <li>Plums</li>
    </div>
  );
}

<ul><Items /></ul>
The <div> sits between <ul> and <li>, which breaks the list structure. Return a Fragment instead

A <ul> may only contain <li> elements (and script-supporting elements). The extra <div> breaks the parent-child link, so the browser may not expose a proper list with a count. Returning <>…</>, a Fragment, adds no DOM element, so the <li>s become direct children again. The same problem happens with <tr> inside a wrapper div in tables.

"React removes <li> elements" is the tempting wrong answer. React renders exactly what you return. The problem is the invalid HTML. key props are only for React's own updates, and screen readers never see them.