Designing with accessibility in mind: Labour Day Poster

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

Today's exercise is using a funky Labour Day poster that caught my attention. Let's imagine this as a web page and figure out how to recreate it using HTML, CSS and JavaScript while keeping accessibility in mind!

At first glance it's clear that plenty of CSS magic will be needed to bring these twisted letters and sentences to life as they are in this design.

Let's start by deciding the HTML structure of the page and imagine how a screen reader user would best map out this information.

I landed on the following:

<H1>Labour day & Eve Party</H1>
<p>Live Music & DJS</p>
<H2 class="sr-only">Dates</H2>
 <ul>
  <li>Monday 11 March</li>
  <li>Sunday 10 March</li>
 </ul>
<H2 class="sr-only">Details</H2>
   <ul>
        <li>Food & drinks specials</li>
        <li>Open both days til'late</li>
        <li>No cover charge</li>
    </ul>

Let me explain:

1. I believe 'Labour Day & Eve Party' is an apt title because it clearly states the meaning of the page, which is to advertise the Labour Day event.
2. 'Live Music & DJs' is a piece of information about the event, but not necessarily a heading. I think a <p> tag is fine.
3. I've added two level H2 headings named 'Dates' and 'Details' that are not present in the design. The titles create clear distinct sections that would help screen reader users map out the page and jump to sections.
4. The dates and the details are lists, so they are written as lists.
5. 'Live Music & DJs' can also be written as a list item under the 'Details' heading and displayed differently using CSS. However, that would create even more of a mismatch between the reading order and visual order.

<H1>Labour day & Eve Party</H1>
<H2 class="sr-only">Dates</H2>
 <ul>
  <li>Monday 11 March</li>
  <li>Sunday 10 March</li>
 </ul>
<H2 class="sr-only">Details</H2>
   <ul>
        <li>Live Music & DJS</li>
        <li>Food & drinks specials</li>
        <li>Open both days til'late</li>
        <li>No cover charge</li>
    </ul>

I did attempt to recreate this page using CSS but the H1 letters were tricky. My method was to use CSS grid + JavaScript to separate the letters into specific spots. I have left it alone for the sake of my own time, sanity and the scope of this exercise.

Note: These are exercises are mostly for my own learning, so please read with caution as they might be incorrect. If you know of better method, or something I said was wrong, I would love to hear your feedback!