Bug 77: List Markup for Layout (F1)

WCAG 1.3.1 (Info & Relationships) | Lists used for layout, not semantic lists.

Failure F1: Horizontal Navigation as List (CSS Hides Semantics)

Navigation below:

Issue: List is semantic HTML, but CSS makes it horizontal. However, this is actually CORRECT. The problem occurs when:

  • Assistive tech may announce list items if CSS disabled
  • Better to use <nav> with semantic list items
Failure F1: Grid Layout Using List (Visual Grid, Semantic List)

Product grid (should be divs, not list items):

  • Product 1

    Price: $29.99

  • Product 2

    Price: $39.99

  • Product 3

    Price: $49.99

Issue: Products aren't related list items. Using <ul> announces as list (three items in list), confusing screen reader users who expect related data, not three unrelated items.

Failure F1 + F2: List Structure Lost for Layout
<!-- BUG: List with CSS turns into 2-column layout --> <ul style="display: grid; grid-template-columns: 1fr 1fr; list-style: none;"> <li>Column 1, Item 1</li> <li>Column 2, Item 1</li> <li>Column 1, Item 2</li> <li>Column 2, Item 2</li> </ul> <!-- Screen reader linearizes: Item 1, Item 1, Item 2, Item 2 --> <!-- Confusing! Users expect list of related items, not visual layout -->
Failure F1: CSS Content Changes Meaning
<!-- BUG: Unordered list with CSS columns makes it unclear --> <ul style="column-count: 3; list-style: none;"> <li>Step 1</li> <li>Step 2</li> <li>Step 3</li> <li>Step 4</li> </ul> <!-- Visual: Multi-column layout --> <!-- Screen reader: Unordered list (no implied sequence) --> <!-- Should be <ol> (ordered list) -->
HAL Fixes: HAL detects lists used for layout and may: (1) convert to divs if not semantically a list, (2) keep list but ensure semantics are correct (ordered vs unordered), (3) add ARIA roles if needed, (4) ensure visual layout doesn't contradict semantic meaning.