Designing with accessibility in mind: Pound Cafe Menu

Introduction

Inspired by Jen Simmon's Layout Lab, I will be taking design and layouts that I come across and imagining how they would be built as webpages (using HTML, CSS and JavaScript) with accessibility as a priority.

Start of exercise

In this exercise I'll be focusing on the headings of a menu from a coffee shop called Pound Cafe.

The order of headings is a straightforward place to start when it comes to accessibility. It's especially important for screen reader users that rely on a verbal description of a page in order to understand it. Screen reader users rely on distinct and logically ordered headings to easily navigate a page.

HTML

Here is the menu, I only focused on the left half:

If I was to build this menu as a webpage, the headings would look like this in HTML:

<H1 class="sr-only">Menu of Pound Cafe</H1>
   <H2 class="sr-only">Mains</H2>
     <H3>Toast with Spreads</H3>
     <H3>Fruit toast or banana bread with butter</H3>
     <H3>Bircher muesli</H3>
     <H3>Porridge</H3>
     <H3>Avocado Toast</H3>
     <H3>Heirloom tomato toast</H3>
     <H3>Spanish omelette</H3>
     <H3>Eggs on toast</H3>
     <H3>Eggs benedict/florentine</H3>
       <H4>Bacon or ham</H4>
       <H4>Salmon</H4>
       <H4>Sauteed spinach</H4>
   <H2 class="v-h3">Sides</H2>
     <H3 class="v-p">Bacon, chorizo, salmon, goats cheese, avocado</H3> 
     <H3 class="v-p">Spinach, tomato, asparagus, mushrooms</H3>
     <H3 class="v-p">Extra Egg</H3>
     <H3 class="v-p">Hollandaise</H3>
     <H3 class="v-p">Fresh chilli, sriracha</H3>
     <H3 class="v-p">Hash brown</H3>
  <H2 class="v-h3">Recovery</H3>
     <H3 class="v-p">Mimosa</H3>
     <H3 class="v-p">Bloody Mary</H3>

Notes

1. There is a missing H1 on the page.

The Pound Cafe logo can technically be a substitute for a H1, but it is best practice to have one distinctly labeled H1 on each page that is not a logo

Solution: Insert a visually hidden H1 at the start of the page. This heading can be read by a screen reader.

2. There is a missing heading before the food options are listed

Solution: Insert a visually hidden H2 above the food options. This heading can be read by a screen reader.

3. Visual and logical order of headings vary

'Mains', 'Sides' and 'Recovery' are hierarchically at the same level (H2) since they describe a category of food/drink. Visually however, 'Sides' and 'Recovery' look like the food options under 'Mains', which are H3s.

Consequently, the options under 'Sides' and 'Recovery' are H3 headings but look like the descriptions that I would write as <P> elements.

Solution: Visually change the font using CSS.

Many of the issues stated can be addressed during the design process before the page gets built. For the sake of this exercise, I've kept the design as I see it and stated how I would work around them.

I am excited to take a look at more menus and print design and how it would translate to the web!