Skip to main content
SimpleAccess.io | Sensory Lab

A Tale of Two Bread Recipes

Welcome to the Sensory Lab. In this experiment, we explore the profound difference between code that is merely "visually functional" and code that is genuinely accessible.

The Magic of Intentional Design

When you use HTML as it was designed and as it was intended to be used, you don't just build a visual document—you build a multi-sensory experience. A well-structured webpage gives you a successful visual experience as a sighted user, but crucially, it also provides a rich, navigable auditory experience for a screen reader user.

To the eye, the two recipes below might look identical. But to the ear, they represent two completely different worlds of accessibility.

The Experiment: Div-Driven vs. Semantic HTML

Choose an experience below to see (and hear) how underlying code impacts users.

✅ Accessible Recipe

The Semantic Standard

This version is built using standard, semantic HTML elements. It leverages <h1>, <h2>, <ul>, and properly labeled <img> tags.

  • Navigable Headers: Screen reader users can bring up their rotor and jump instantly to the "Ingredients" or "Instructions" headings.
  • Contextual Images: The alt text beautifully describes "A loaf of no knead bread dusted in flour with artistic cuts in the crust."
  • Spatial Awareness: When reaching the lists, the screen reader announces "List, 4 items," giving the user an immediate understanding of how much content to expect.
Experience the Accessible Recipe
❌ Inaccessible Recipe

The Div-Driven Disaster

This version relies entirely on generic <div> tags and CSS classes (like .big and .bigger) to mimic visual structure.

  • A Wall of Text: Visually, you see headers. Auditorily, a screen reader just sees a flat wall of text. There is no way to jump to the Ingredients.
  • Useless Images: The image alt text simply reads "bread.jpg", providing absolutely zero descriptive value to a non-sighted user.
  • Fake Lists: Using asterisks and line breaks creates the illusion of a list, but a screen reader will mercilessly read it all as one long, exhausting, run-on paragraph.
Experience the Div-Driven Recipe