(WIP) Keyboard Accessibility: Use Case for Converse Shoe Customization
👟

(WIP) Keyboard Accessibility: Use Case for Converse Shoe Customization

Converse Website
Resources

Disclaimer: I am not a keyboard accessibility expert. I solely initiated this case study for self-learning purposes— overall, this was performed for myself to learn more and how to study and analyze keyboard interactions. After my internship with Intuit, I wanted to further into the areas of keyboard accessibility, I wanted to touch up on during my internship.

The Basics of Keyboard Accessibility

Before touching upon the issues with Converse's keyboard accessibility— I think its essential to understand at least the basics of keyboard accessibility. When I first learned about keyboard accessibility, I thought it was primarily for individuals who were blind and those who used keyboard shortcuts. Keyboard navigation is also for people who do not have fine motor skills to use a mouse and others who feel like using a keyboard to do so.

There are multiple things that should considered when working with keyboard navigation.

  • Focus Management - Indicators of what elements are in focus, and where the keyboard's location
  • Navigational Order - The order of how the keyboard will move through a webpage
  • Interacting Elements with the Keys - Keystrokes are used to activate different elements on a page

Focus Management

For someone to move throughout a website with a keyboard is done through the use of the TAB key. When the person uses TAB, it will bounce from interactive elements to another interactive element. So they are moving throughout the website by interacting with every element, that is coded to be accessible. The typical way of indicating focus on an interactive element is by applying a square around it with a color that contrasts with the background.

image

The picture includes a menu bar from Converse's website, it shows there is focus on the Women tab in the menu bar.

Navigational Order

To provide more of a visual representation of how the navigational structure looks like on a website. On the picture in the right, it shows a zoomed out picture of Converse website. There are dotted boxed rows and numbers next to it.

Navigational structure follows a logical order from top to the bottom. When TAB is pressed it will move from all interactive elements. So for this example, TAB will start the person at the logo of Converse and next to women. Once all the interactive elements in the first row has been TABBED, it will move to the second row and repeats the pattern to the bottom.

image

Interacting Elements with the Keyboard

Once there is focus on the different elements on the website, there are multiples to activate an element. The reason why there different ways of activating an element would be to accommodate the diverse styles of interactive elements. For example, the common way to activate an element like a button is by pressing ENTER or SPACEBAR. Whereas, an element like Links (ENTER) or Checkboxes (SPACEBAR) are activated with a singular key.

image

Here is a link to a resource that has a table showing the common interactions with different elements.

image

Introduction

Converse is one of the most popular sneakers worn today and is constantly used to buy a pair of sneakers. Inevitably their website will encounter a diverse ranges of people, especially culturally and even of abilities. As a consumer, the most important aspect of buying something is being able to select and purchase what I want. Thus, in this case study I want to address a few problems and offer solutions on how to improve their website.

I will analyzing the process from selecting a shoe to adding it to cart.

Identifying the Problems

After learning the basics of the Keyboard Navigation— we will be looking at different problems that can be improved upon.

Working Components

This component is located in the filtering section, it works really well. I don't see why there's a need to
This component is located in the filtering section, it works really well. I don't see why there's a need to select the product type to be shoes when you select shoes in the main menu. 😂
This dropdown is located in the sub-nav bar for when someone feels like they like to see the most pricey shoes first.
This dropdown is located in the sub-nav bar for when someone feels like they like to see the most pricey shoes first.
This component is focused on when the person wants to favorite. For this particular example, I do LOVE it actually. 🙂
This component is focused on when the person wants to favorite. For this particular example, I do LOVE it actually. 🙂

image

Issue to Improve #1: The current structure takes too long to get to the actual shoes

I am pressing TAB and going through all of the content in the filter before I can select the shoes I like. While the components work well on this site but the amount of time it takes for an individual to reach to the main content is ridiculously tedious.

Issue to Improve #2: The current structure takes too long to get to the actual shoes

I am pressing TAB and going through all of the content in the filter before I can select the shoes I like. While the components work well on this site but the amount of time it takes for an individual to reach to the main content is ridiculously tedious.

image

Selecting Shoe to Customize

image

Selected the Shoe

image
image

image
image

Customizing Shoes

image
image

Comparative Analysis

Needs and Goals

  • Efficient use of TAB
  • Replicate of mouse-users
  • Do not get lost

I need to do research on finding the needs for this topic

Fixing the Problems

This raises an idea for how the navigation bar could be designed. The header in the code itself isn't coded to be accessible. If they designed the menu to be more operated with arrow keys rather than multiple buttons, it allow the user to jump into the content faster.

image

image

When the page opens the accordions are already closed when an option is selected. This will allow the user to TAB a lot less.

image

Allowing for a skip link— skip from the header to the content

image

Moving the HEART (Like) and Customize to the bottom with the title. (Follows a similar design trend to like Instagram and other components like selecting a preferred color).

Presenting the Solution

Take Aways