Make open-sauce-2025.html accessible to screenreaders

[simonw]

As pointed out here, the HTML is div soup:

tools/open-sauce-2025.html

Lines 260 to 289 in 5a80607

	dayContainer.innerHTML = sessions.map(session => `
	<div class="session-card">
	<div class="session-header">
	<div>
	<span class="session-time">${session.time}</span>
	<span class="length-badge">${session.length} min</span>
	</div>
	<div class="session-location">${session.where}</div>
	</div>
	<div class="session-title">${session.title}</div>
	<div class="session-description">${session.description}</div>
	${session.speakers && session.speakers.length > 0 ? `
	<div class="speakers">
	${session.speakers.map(speaker => `
	<div class="speaker">
	<span>${speaker.name}</span>
	</div>
	`).join('')}
	</div>
	` : ''}
	${session.moderator ? `
	<div class="speakers">
	<div class="speaker" style="background: #e3f2fd;">
	<span><strong>Moderator:</strong> ${session.moderator.name}</span>
	</div>
	</div>
	` : ''}
	</div>
	`).join('');
	});

[simonw]

@claude take a look

[claude]

Claude encountered an error —— View job

---

I'll analyze this and get back to you.

[simonw]

I also put OpenAI Codex on the job: https://chatgpt.com/s/cd_6879682c16488191877913e206e75ea0

PR from that here:

• Improve accessibility for Open Sauce schedule #37

[simonw]

Here's a preview of the Codex attempt: https://codex-make-open-sauce-2025-h.tools-b1q.pages.dev/open-sauce-2025

[simonw]

@claude try again

[claude]

Claude finished @simonw's task —— View job

---

Making open-sauce-2025.html accessible to screenreaders ✅

I've successfully made the HTML file accessible to screenreaders by replacing "div soup" with proper semantic HTML elements.

Todo List:

• Read the current open-sauce-2025.html file
• Examine the problematic section (lines 260-289)
• Look at the Codex PR Improve accessibility for Open Sauce schedule #37 for reference
• Replace divs with semantic HTML elements
• Commit and push changes (requires Bash permissions)
• Create PR link (requires git access)

Changes completed:

1. Replaced "div soup" with semantic HTML elements:

   • <div class="session-card"> → <article class="session-card">
   • <div class="session-header"> → <header class="session-header">
   • <div class="session-title"> → <h2 class="session-title">
   • <div class="session-description"> → <p class="session-description">
   • <span class="session-time"> → <time class="session-time" datetime="${session.time}">
   • <div class="speakers"> → <ul class="speakers">
   • <div class="speaker"> → <li class="speaker">

2. Added proper semantic structure:

   • Wrapped main content in <main> element
   • Changed page header to <header class="header">
   • Added <nav> element for day navigation
   • Changed day content containers to <section> elements

3. Added accessibility attributes:

   • Added aria-label to navigation and sections
   • Added aria-pressed attributes to tab buttons
   • Added datetime attributes to time elements
   • Updated JavaScript to properly manage aria-pressed states

4. Fixed CSS for semantic elements:

   • Added list-style: none and padding: 0 to .speakers for proper list styling

Status: The accessibility improvements have been made to the HTML file. The file now uses proper semantic HTML elements that screen readers can understand and navigate effectively. However, I cannot commit these changes due to lacking Bash permissions. You'll need to commit and push the changes manually.

---

[simonw]

Testing the Codex fixes in VoiceOver on iOS seemed pretty decent to me so I've shipped those.

Not sure why Claude Code failed to submit a PR for its attempt.

[davidgasquez]

Not sure why Claude Code failed to submit a PR for its attempt.

I got a similar error that got solved by giving Claude explicit tool permissions like

allowed_tools: |
  mcp__github__create_pull_request
  Bash
  Bash(uv*)
  Bash(npm:*)

Also, it needs write job level permissions to be able to send PRs or open issues (right now is read).

permissions:
  contents: write
  pull-requests: write
  issues: write
  id-token: write
  actions: read