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 I was inspired by a vibrant poster of a fictional pop music festival by designer Daytona Mess.

Let's focus on the artist lineup at the bottom and how that would be built out using HTML. While it may be tempting to put each name into a <p>, div or span tag like below:

<p>Lana Del Rey</p>
<p>Lady Gaga</p>
<p>Mo</p>
...

This method fails level A requirement of WCAG 2.1 1.3.1: Info and Relationships. The requirement states that:

Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.

Visually, it's immediately obvious that this is a list of names because of the dots in between each name, the way the block of text is structured and through popular artist names that pop out at first glance.

Programmatically, screen reader users should be able to identify that the information they're about to read is a list. Also, they can navigate back and forth to each name instead of having to read the entire <p> or <div> as a paragraph.

The artists can be listed using the following HTML:

<h2 class="sr-only">Artist lineup</h2>
<ul id="artists">
  <li>Lana Del Rey</li>
  <li>Lady Gaga</li>
  <li>Mo</li>
  <li>Cruel Youth</li>
  <li>Lorde</li>
  <li>Marina and the Diamonds</li>
  <li>Ariana Grande</li>
  <li>Sevdaliza</li>
  <li>Caro Emerald</li>
  <li>Kali Uchis</li>
  <li>Taylor Swift</li>
  <li>Beyoncé</li>
  <li>Melanie Martinez</li>
  <li>Rihanna</li>
  <li>Britney Spears</li>
  <li>Katy Perry</li>
  <li>Selena Gomez</li>
  <li>Miley Cyrus</li>
  <li>Madonna</li>
  <li>Adele</li>
  <li>Sia</li>
</ul>

I have added a heading called 'Artist lineup' that isn't in the design but programmatically helps identify the purpose of the list to come.

CSS

I've used flexbox with <ul> as the flex container and the <li>'s as the flex items.

Here is the working example of the artist lineup using CodePen.

The result looks pretty close to the designer's version. Of course there are tweaks that could be made, the exact colour and font used to start.

Things to consider that weren't covered in this exercise

• The rest of the poster.

• Whether or not the contrast of the text and the background are suitable for people with colour blindness or low vision.

• How magnifying the screen will alter the design and text. Will it overlap?

• Alternatively, an ARIA role called list can be used. But why rely on ARIA if the same thing can be achieved through HTML?

Only use role="list" and role="listitem" if you have to — for example if you don't have control over your HTML but are able to improve accessibility dynamically after the fact with JavaScript.

Conclusion

My goal is to prove through this series that beautiful design can be accessible and equally experienced for everyone. Accessibility doesn't have to be limited to bland government websites and forms. It's just a matter of considering different needs throughout the process.