DEV Community: Mahzeb

Quick Accessibility: Burts Bees & large target size

Mahzeb — Sat, 04 May 2024 10:38:35 +0000

This post is brought to you by me looking to order my favourite hand cream from Burts Bees through my phone.

I touched the side of the page to scroll down, only to be abruptly taken to a new page. This is because the entire yellow section introducing lip care is a link.

To have a large target area in this case is poor usability and accessibility because it is not obvious that the section is a link. A simple & straightforward fix is to only hyperlink the text 'Shop Lip Care'.

Designing with accessibility in mind: Ubergood Festival

Mahzeb — Fri, 03 May 2024 03:51:53 +0000

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.

Designing with accessibility in mind: Labour Day Poster

Mahzeb — Wed, 01 May 2024 08:53:36 +0000

Introduction

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:

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.
'Live Music & DJs' is a piece of information about the event, but not necessarily a heading. I think a <p> tag is fine.
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.
The dates and the details are lists, so they are written as lists.
'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!

Designing with accessibility in mind: Pound Cafe Menu

Mahzeb — Tue, 30 Apr 2024 13:34:17 +0000

Introduction

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!

Keyboard only accessibility test: OAK + FORT

Mahzeb — Wed, 10 Nov 2021 23:42:08 +0000

Day 3: OAK + FORT's
Topic: Tabbing through the sort & filter feature

Failed

2.1.1 Keyboard Level A(solution TBD)
The 'see more' button is skipped in the tabbing order. The focus jumps from 6 to beige.

2.4.7 Focus Visible
Under 'filter', the checkboxes and their respective labels do not have visible focus indicators.

Passed

2.1.2 No Keyboard Trap Level A
Surprisingly enough the keyboard focus does not trapped. But it does disappear on many occasions.

2.4.1 Bypass Blocks
Users have the option of skipping the main navigation. It would be helpful to allow users to skip the sort/filter section as well.

Passed but could be better

Sort & filter feature
Checkboxes are checked/unchecked using different keys. The options under 'filter' are toggled using the spacebar, whereas the options under 'size' require the enter key. Too much cognitive load is expended figuring out how to toggle boxes that look the same, and serve the same purpose (filtering items). Many keyboard only users might assume it isn't possible and leave the site entirely.

Losing focus
Visible focus is lost between various features such as after the main navigation and before the sort/filter feature. The user will find it difficult to locate their location on the page.

Keyboard only accessibility test: MoMA

Mahzeb — Wed, 10 Nov 2021 02:29:40 +0000

**Accessibility test series
MoMA's homepage

Failed

2.4.1 Bypass Blocks
A 'skip to main content' button is missing.

Passed

2.1.2 No Keyboard Trap Level A
Simple, I was not trapped.

2.1.3 Keyboard (No Exception) Level AAA
Yup, everything including signing up for their newsletter was possible with just my keyboard!

2.4.7 Focus Visible Level AA
I appreciate MoMA's thick focus indicator which varies in colour depending on the background. It is integrated well into the design of their website.

An element out of focus

An element in focus

Keyboard only accessibility: Aesop's homepage

Mahzeb — Tue, 09 Nov 2021 07:24:13 +0000

Day 3: Aesop
Topic: Tabbing through with a keyboard

Today I am testing Aesop's homepage using only a keyboard using the criterion outlined in WCAG 2.1.

Failed

2.4.1 Bypass Blocks (Level A)

A 'Skip to content' button is missing from Aesop's site. This button ensures that users don't have to repeatedly tab through the navigation links on every page they visit. It's a good thing Aesop has a minimalist menu, very on brand for them!

2.4.7 Focus Visible (Level AA)

Most outlines on focus are too thin to notice. The links in the footer and the button for the help widget do not have a focus indicator.

Aesop's main navigation with the link 'Read' in focus

The focus indicator lost in the abyss of the dark grey footer

The focus indicators of certain CTA buttons however were present and pleasant!

Button without keyboard focus.

Button with keyboard focus.

Passed

2.1.2 No Keyboard Trap

The tab focus does not get trapped at any point. Users can freely move to and away from elements using only the keyboard.

2.1.3 Keyboard (No Exception) Level AAA

The functionality of all the content on Aesop's homepage is in fact operable through a keyboard.

2.4.3: Focus Order (Level A)

All links, buttons and inputs receive focus using the keyboard technically, but not visibly as mentioned above.

Passed but could be better

Tabbing logic of the sub-menu

Using the sub-menu is a bit tricky because it's unclear how to get to the sub-links without a mouse. After tabbing through and landing on the 'Aesop' link, the arrow keys are required to navigate to sub-links Skin Care, Hair, Body & Hand ext. A keyboard user may get trapped and not be able to figure out how to navigate to the sub-pages.

The sub-menu after selecting 'Shop' in the main menu, then tabbing to the 'Aesop' heading

Tabbing logic of the Shipping module

When tabbing through the Shipping module, the keyboard navigates back to the main page with the module still open. Ideally, the focus would remain within the module until the user decides to close it.