Keyboard only accessibility: Aesop's homepage
Tags: a11y, html, testing, tab
Published: 2021-11-09 07:24:13

**Day 3:** Aesop
**Topic:** Tabbing through with a keyboard

Today I am testing [Aesop's homepage](https://www.aesop.com/) using only a keyboard using the criterion outlined in WCAG 2.1.

#Failed

##[2.4.1 Bypass Blocks (Level A)](https://www.w3.org/WAI/WCAG21/quickref/#bypass-blocks)

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)](https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html)

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*
![Aesop's navigation links: shop, read, stores and there is a magnifying glass icon. Read is outlined with a thin grey dashed rectangle to indicate keyboard focus.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xtbi3z864crqhr5b8t5h.PNG)
The focus indicator lost in the abyss of the dark grey footer
![The footer area which has a dark grey background and beige text. A circle button with a chat dialogue icon sits in the bottom right corner. No focus indicator is present.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/778vx3edvk40neihkea8.PNG)

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

*Button without keyboard focus.*
![A beige rectangle button with a thin grey outline reading Browse all gifts. The button has no keyboard focus.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tlgqc4fsw2z4c4qdwfm5.PNG)

*Button with keyboard focus.*
![A dark grey rectangle button with beige text reading Browse all gifts. The button has keyboard focus.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/576xhksmuz8ehcyr3xvj.PNG)


# Passed

##[2.1.2 No Keyboard Trap](https://www.w3.org/WAI/WCAG21/quickref/#keyboard)

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](https://www.w3.org/WAI/WCAG21/quickref/#keyboard-no-exception)

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

##[2.4.3: Focus Order (Level A)](https://www.w3.org/WAI/WCAG21/quickref/#focus-order)

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*
![There are four links on the top left that read: shop (which is underlined), read, stores, search and an x. Underneath are seven sub-links which read: Aesop (that is outline in thin grey rectangle), skin care, hair, body and hand, fragrance, home, kits and travel, gifts.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/97tai7p7icld671mm616.PNG)

##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.
![A module outlining Shipping information is overlaying the left half of the sites main page. The Login link on the main page has a focus indicator, a thing grey dashed border, despite the module being open.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jmaih4u15k090ju2fxx5.PNG)