Accessibility issues (from Fable testing session)

[nicklepine]

Context

This is the results of the testing session. We (Sofia and Melissa) highlighted all the pain points the user encounter with some additional context.

• Fable NVDA users on PC, Chrome: Link to full session video
• Tested on the following version fo Dawn: v2.0.0-alpha.15

Key learnings

• Down arrow key is a more natural way to browse the page for NVDA users on PC
• Screen reader loads the HTML in a buffer, buffers the text of all the information, so when you browse this page. When the user was dealing with the text, for some reason it doesn’t buffer... We should look at document object model, it needs to be sorted.
• When a user doesn’t want the page to refresh when browsing the combo box (select component) form the collection template, user press alt + down arrow to expand it. It is a special key for the combo box to navigate without affecting a page load until pressing enter. It expands, allows users to navigate the list without the combo box to refresh the page all the time.

Biggest user frustrations

• Page not working as expected, a big issue
• Buttons not expanding
• The shop section when it expanded, didn’t load in the buffer, you couldn’t use the down key, you had to use the tab
• Those are the main pain points

General

• Do we have guidelines for merchant in how to write proper and accessible product names? cc. @svinkle (Link to product)
  • Name of product: “Brick” What does that mean?

Homepage

Searching a product

• User was able to find the search but took many refreshes to happen.
  • User using button collapse unsuccessfully
  • Tried a work around; Tried routing the mouse search
  • Navigating by button: was able to open the search bar
  • Space bar doesn't do anything when it should

Browsing the page

• Got stuck in some section browsing with arrow down (Got stuck in the accessories section (Image banner). Refreshing seemed to have fixed it (shouldn’t have to do that)

Search template

• Typed “white sandals size 38” and no results came and wasn’t able to access that. Looking for the search, pressed H = no headings either.
  • With the current layout the order was not relevant to his needs, the header must have been below the search input, this is a better practice.
    • The new layout should solve this but we should look into ensuring that we communicate the results successfully.

Header menu links

• Was able to expand it. The moment you move, it collapses. Can't use arrow down keys. Clicked on a menu item (“shoes”) and nothing happened.
  • User expects to use up and down arrow keys at this point, this was unusual (The user would try other ways but he's an experienced user)
• Wasn't able to click on any links (Even on non-expandable links)

Product page

Variant radio component

• When you selected a variant (size 38), moved away and then back even though it was checked it said it was unchecked.
• Also it should tell you on the radio button itself an item is sold out in that variant
  • Didn’t announce it was - no way to know for the user
  • The radio button: It should announce at the size 38 sold out, the button should be unavailable to check, but be focusable
• Wasn’t able to click on “add to cart”, it didn’t work

Tab content

• Accordion not expanding with the arrow keys. Not telling you it expanded, while he was able to expand with a work around, no feedback. (Enter key doesn’t expand or space key)
• Can't access the content inside either
  • Content not available with arrow keys, they got to the next heading

Cart notification

• User add an item to the cart
  • Does nothing, no information it was added to the cart
  • Focus on the add to cart, pressing not working

Collection template

• Gets stuck after the landmark
• Can’t see them doing a quick browse down the page, refresh was fixing things though.
• Couldn’t find the filter and sort. Found it after on refresh. To investigate if this happens on low connection?

Info about the Fable tester set up:
Windows: Version 20H2 (OS Build 19042.985)
Nvda: Version 2020.4
Chrome: Version 90.0.4430.212 (Official Build) (64-bit)
Regarding chrome, Chrome is updated regularly so I'm nnot sure what it could have been last week

[svinkle]

Do we have guidelines for merchant in how to write proper and accessible product names?

The confusion here may stem from a number of issues:

• the product name is also a name for another common, real-world object
• product images missing descriptive alternative text to alert the user on what the product is
• not selecting/linking into the product to read the textual description

We've heard from other testers that not having descriptive alt text on product/collection pages places them at a disadvantage in not knowing what the product is at this point. The AT user would need to click into the link and try to understand from the product text, causing more work to go into product pages and back out again.

Review this usability test session of Debut theme for an example.

We could include visually hidden pre-text, such as, <h1><span class="visuallyhidden">Product:</span> {product.title}</h1> but this would get noisy and repetitive very quickly.

I believe we need to get content involved in order to write alternative text for our demo store products. This will alert partners to the fact this this is important and provide examples on how to write alt text.

[Stephanie-Chou]

We are closing this issue. This issue was reported 2 years ago on an old version of Dawn. If this is still a high priority issue today, please re open with updated reproduction steps