Accessible and Inaccessible Recipe Example

These two recipe examples look similar, but only one gives screen reader users a clear heading structure and real lists.

Inaccessible Recipe

Simple Pancakes

A quick breakfast recipe for soft, fluffy pancakes.

Ingredients

* 1 cup flour
* 1 cup milk
* 1 egg
* 1 tablespoon sugar

Steps

1. Mix the flour and sugar.
2. Add milk and egg.
3. Stir until smooth.
4. Cook on a hot pan.

Tips

  • Do not overmix the batter.
  • Allow the batter to rest for 5 minutes.
  • Cook on medium heat for best results.

What is wrong?

  • The recipe title and section titles are styled text, not real headings.
  • The ingredients use typed asterisks instead of a real unordered list.
  • The steps use typed numbers instead of a real ordered list.
  • Screen reader users cannot navigate the recipe by heading or list structure.

Accessible Recipe

Simple Pancakes

A quick breakfast recipe for soft, fluffy pancakes.

Ingredients

  • 1 cup flour
  • 1 cup milk
  • 1 egg
  • 1 tablespoon sugar

Steps

  1. Mix the flour and sugar.
  2. Add milk and egg.
  3. Stir until smooth.
  4. Cook on a hot pan.

Tips

  • Do not overmix the batter.
  • Allow the batter to rest for 5 minutes.
  • Cook on medium heat for best results.

Why this works

  • The recipe title and section titles use real heading elements.
  • The ingredients are marked up as a real unordered list.
  • The steps are marked up as a real ordered list.
  • Screen reader users can understand the structure and move through the content more easily.