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.