Accessibility of Finnair Shop

Non-accessible content

Issues recurring on every page

General navigation issues

• When navigating to another page, VoiceOver announces the page's title and then focuses & reads the first element, which is always the logo. A hidden "Skip to main content" link for screen readers would improve usability.
• The Finnair Shop logo link title is "Finnair Shop" and the image alt text is always the same as the page title. Better solution: link text should be "Home" and alt text "Finnair Shop".

Buttons do not have an accessible name

• Search icon (.js-toggleSearch) missing descriptive text
• Account icon (.js-toggleLogin) missing descriptive text. VoiceOver actually
• The header shopping cart link text is empty or just a number (eg. "1" when there is one item in the cart). The <a> element has a title attribute, but that is not sufficient.
• When scrolling down, the header's Shopping Cart / Back to top button lacks a description
• The Back to top button has the shopping cart link inside it. When clicking the button with VoiceOver, the link is activated instead of scrolling back to top.
• When scrolling down, the header's globe icons are missing link texts (or they are Unicode characters like \ue916, which is how icons fonts work)
• The language/currency selector's text is only "EUR" (or whatever currency is selected). Better solution: "Change language or currency".

Image elements do not have [alt] attributes

• Footer collection of logos
• Account dropdown: card image alt text empty. If the image only repeats the tier that's displayed under the customer name, this is probably OK (but the element could be explicitly ignored).

Background and foreground colors do not have a sufficient contrast ratio

• Gray links in footer
• When shopping cart is empty, cart icon has weak contrast (though intentional)

Touch targets do not have sufficient size or spacing

• Footer links such as "Terms and Conditions" and "Privacy Policy" too close together in mobile view

Redundant texts

• "Redundant title text" and "Redundant alternative text" appear on every page (not actual errors, but warnings). For example, footer links contain only text, but still have the same text as a title attribute. In product listing elements, there's identical text in both the image alt text and below it. This makes a screen reader announce the same text multiple times.

Menu navigation issues

• With VoiceOver, every link begins with an unnecessary "Plus": .navigation-plus-icon elements should be ignored.
• Desktop: When the user selects one of the main links using keyboard, due to HTML structure the next Tab press doesn't go to sub-links but continues the main links list until hitting the end. This does not occur in the mobile menu.

Visual order does not match element order

• For logged-in customers, the account dropdown's columns are in reverse order to what's showing. The customer's name, tier, points etc. are shown above links such as "Update profile" and "Log out", but in the document structure the links come first.

Pages

Home page (D: 73, M: 66)

• The "Choose gift" banner close button lacks descriptive text
• Carousel arrows lack proper link text (e.g., "previous" shows as "\ue690")

Product description page (D: 79, M: 75)

Test pages: 
https://www.finnairshop.com/fi/finnair-gift-card
https://www.finnairshop.com/fi/helsinki-day-spa

Form elements do not have associated labels

• Quantity field

Links do not have a discernible name

• Main image (which is a background-image instead of an <img> tag)
• Minus and plus buttons next to quantity field unlabelled

Links rely on color to be distinguishable

• Links within text paragraphs should be distinguished by other means, e.g., underlining

Product listing page (D: 82, M: 79)

Test pages:
https://www.finnairshop.com/fi/finnair-plus-awards-and-products 
https://www.finnairshop.com/fi/health 

Select elements do not have associated label elements

• "Sort by" label is not connected to the <select> element
• Also, when the filter section is open, the closing arrow has no associated label

Sales prices

• When there's both a strikethrough price and a normal price, there is no distinction for screen reader users.

Shopping cart / Checkout flow (D: 69, M: 64)

Due to technical limitations, Lighthouse and the WAVE extension could only test the first checkout step.

Form elements do not have associated labels

• Quantity field
• Point slider

Links do not have a discernible name

• Minus and plus buttons unlabelled

Other findings

• When going to the next phase, the focus stays in the button that was pressed. The heading of the next phase should be focused instead.
• Progress bar icons lack descriptive texts
• .payment-secured-logos logo image: empty alt text
• Credit card payment method cannot be focused with the Tab key
• VoiceOver skips the Company label for no apparent reason
• The arrow in the country dropdown gets focused separately and has no descriptive text

Cookie notification

Mixed language content

• In cookie notification, link reads "Hallinnoi evästettä" in Finnish but VoiceOver says "Manage cookies" (English text in Finnish interface). The same applies to other buttons in the cookie manager. Erroneous ARIA labels?

Unnecessary focusable elements

In VoiceOver testing, many unnecessary elements, mostly decorative icons, received focus when navigating the site. Examples:

• Product element: decorative icon next to "Finnair Plus benefits and products"
• Home page bottom banner icons
• Product listing filters: <span> elements inside the <label>s
• Account dropdown shopping cart icon
• <hr> separator lines whose existence isn't essential for screen readers (e.g., "Choose your Finnair Plus member gift" page)

External

• When adding a product to cart and the browser redirects to the login page (on https://auth.finnair.com/), VoiceOver reads Finnish texts in English. Likely caused by erroneous attribute <html lang="en">. More of a UX than a pure accessibility issue.