Tests for User feedback on 2.5.3

[HelenBurge]

From a discussion in May, it was agreed to understand the Label in Name checkpoint we need to create a test case and find users of voice recognition software to give feedback on what works and what doesn't work for them. The following test cases have been defined:
https://docs.google.com/spreadsheets/d/1xfVuzokMBN9-3oxtdAXjDZ6NHfuydSeaoRTjDC1iLQI/edit?usp=sharing

We need a test page and format agreed on - how best to test this for the users and are there any scenarios missed?

[Jym77]

@dan-tripp-siteimprove Can you get a look at that, since you've been working on that rule in #2075 ?

[dan-tripp-siteimprove]

Sure, I can do it. I'll come up with something in a few days.

[dan-tripp-siteimprove]

@HelenBurge for rows 1-5 in your spreadsheet, what type of form field do you have in mind? I don't see an obvious choice, because the most common types of form field (text field, checkbox, radio button) don't support "name from content" so they don't meet the applicability of this rule (https://www.w3.org/WAI/standards-guidelines/act/rules/2ee8b8/proposed/)

[HelenBurge]

button, checkbox, gridcell, link, menuitem, menuitemcheckbox, menuitemradio, option, radio, searchbox, switch, tab, treeitem. - we have radio buttons and checkboxes that are included.

Should we expand to check each of these?

Also https://www.w3.org/WAI/WCAG21/Understanding/label-in-name.html does not state a text field is out of scope so it might be worth adding these in, as we are trying to work out what scenarios are most affected.

@carlosapaduarte, @Jym77 and @giacomo-petri - any thoughts?

[dan-tripp-siteimprove]

When I wrote this:

the most common types of form field (text field, checkbox, radio button) don't support "name from content"

I was wrong about checkbox and radio button. Those roles do support "name from content". But their native HTML elements (<input type="checkbox"> and <input type="radio">) do not. So for checkbox and radio button, the only thing I can think of to add to the test page for you would be: non-native implementations, something like this:
<div aria-checked="true" aria-label="opt in" role="checkbox">opt into email list</div>
... but with a bunch more CSS and javascript added in order to make it a functional checkbox. Is that what you want? It seems like an obscure thing to test. But what do I know.

For a text field, I agree that it's in scope for WCAG (and general interest) but still it's out of scope for this ACT rule. Even if I could justify spending time on text field (even though it's out of scope for ACT) I don't know what kind of HTML to write, because the textbox role doesn't support "name from content".

Fortunately I found an example of a native HTML element which is a form field and which meets the applicability of this ACT rule: <option>. For example:

<label for="pet-select">Choose a pet:</label>
<select name="pets" id="pet-select">
  <option value="">--Please choose an option--</option>
  <option value="dog">Dog</option>
  <option value="cat">Cat</option>
  <option aria-label="Wolf" value="sheep">Sheep</option>
</select>

I'm approaching a plan of action here: for the "form field" parts of your spreadsheet, I add a native <option> example, and maybe a non-native checkbox example. What do you think?

[dan-tripp-siteimprove]

@HelenBurge regardless - here's a start - what do you think? https://dan-tripp-siteimprove.github.io/act-rules/discussions/2124/index.html

[HelenBurge]

Great!

[dan-tripp-siteimprove]

I updated https://dan-tripp-siteimprove.github.io/act-rules/discussions/2124/index.html with some "native HTML <option>" and "custom ARIA checkbox" examples. So far my page has examples for rows 2-10 of your spreadsheet, and has nothing for rows 11-23. Before I add examples for rows 11-23, let me know what you think of my examples for rows 2-10.

[HelenBurge]

I think for the script we share the URL with each user. Then ask them to activate each control in turn.

However, it would help to have the examples listed with a number but no text description as will cause false positives.

@dan-tripp-siteimprove would you get me a “clean” list of example controls?

I will then recruit more users of Voice Recognition software to give feedback. Maybe via a Google questionnaire to start with (can we embed the controls in a questionnaire?) and then offer a few guided sessions for anyone that provide interesting observations?

@Jym77 and @carlosapaduarte FYI

[giacomo-petri]

I apologize for not being more engaged in this discussion; I'm currently experiencing a particularly busy period.

Thanks @dan-tripp-siteimprove for providing these examples. I share the sentiment with @HelenBurge about removing the example descriptions to avoid facilitating test participants with explanations.

Moreover, it's crucial to consider the presence of multiple inputs on the same page with the same acc name, as this may impact the activation of elements. This could potentially be a new test case to explore how users perceive having multiple elements on a page with the same accessible name.

To address this, we might want to create a list of pages featuring progress bars/pagination or incorporate JavaScript to toggle the visibility of each test case. This way, the testing of one case won't interfere with others.

@dan-tripp-siteimprove, please let me know if there's any way I can assist you.

After completing the test cases, it might be beneficial to seek feedback from the rest of the group before proceeding with user testing. This would help us understand if there are any crucial elements we may have overlooked or if there is room for improvement. I am making this assumption considering that reorganizing the user testing activity might not be a straightforward task.

Last, but not least, I don't recall all the scenarios that we've listed for this test, but might be worth to verify if all the items listed in this comment #1458 (comment) are covered here, so we'll have a comprehensive feedback that covers all the aspects needed to update all the relevant tickets.

[Jym77]

After completing the test cases, it might be beneficial to seek feedback from the rest of the group before proceeding with user testing.

Side note: it would be awesome if you can document a bit your learning in building the test cases and conducting user testing. We might have need for more user testing later on other rules, and it would be a shame do relearn the same thing every time.

[dan-tripp-siteimprove]

I think that I can do all this. I'll attempt it over the next few days.

[dan-tripp-siteimprove]

@HelenBurge Here is a list of controls so far:
Native HTML button
Native HTML link
Form field: native HTML <option>
Form field: custom ARIA checkbox
Form field: native HTML <input>, for text. (Inapplicable under the ACT rule, because <input> doesn't support 'name from content'. Included here regardless.)

[dan-tripp-siteimprove]

Helen wrote "it would help to have the examples listed with a number but no text description". I've done that on my page by adding show/hide widgets for the first two rows. What do you think? If this works then I'll do it for the rest of the rows, too.

[dan-tripp-siteimprove]

Regarding Giacomo's wording: "we might want to create a list of pages featuring progress bars/pagination or incorporate JavaScript to toggle the visibility of each test case" - I implemented the latter. That is: toggle the visibility of each test case, while keeping it on a single page. If there's something that this doesn't cover and a "list of pages" approach would cover, let me know.

[HelenBurge]

For the script, I propose it starts as:

Thank you for agreeing to this voice recognition user feedback session. We have a selection of controls with different styles of accessible names and we would like to invite you to activate each control following the methods you normally use. For each control we would like you to rate how easy it was for you to activate out of 5 (5 being the easiest and 1 being the hardest) and then give a reason for your rating.

Then we can add a SUS score for each. We would list each item - or just say "activate example 1" - to not give away or lead astray on the role the item has.

[HelenBurge]

I want a way to measure the ease consistently as hard to judge without a scale and reason.

[carlosapaduarte]

But the two questions (rating how easy it was and the reason for the rating) already give you that.
I don't think that, in addition to that, we need the SUS score. Unless, I'm not understanding correctly what you mean.

[HelenBurge]

Yes. Those are all I need for SUS. I thought you meant take out the rating as that is the SUS rating!

[carlosapaduarte]

Damn... we're talking about different SUS then...
This is the SUS I'm aware: https://www.usability.gov/how-to-and-tools/methods/system-usability-scale.html
It is a 10 question questionnaire. That is why I was afraid of asking 10 questions for every task the user did.

[HelenBurge]

Ah yes. I am using it and just focusing on one area, ease of use. So an adaptation that suits the needs of this study. So we are on the same page! A SUS adaptation is my proposal!

[dan-tripp-siteimprove]

I implemented a "random walk" and "one test case per page" on this new start page here. So far I've only implemented spreadsheet rows 2-5. Let me know what you think of the new structure.

[HelenBurge]

I love it Dan - please continue on this track!

[dan-tripp-siteimprove]

Will do.

[dan-tripp-siteimprove]

I implemented up to about row 15 of the spreadsheet. Live page is here.

[dan-tripp-siteimprove]

@HelenBurge I implemented the whole spreadsheet, I think. The start page is here. Let me know what you think.

[HelenBurge]

Perfect - so now I can start recruiting for this test - I will write a script first and ask for feedback.

[dan-tripp-siteimprove]

I don't mean to complicate things, but based on other 'label in name' commentary here at ACT rules (example 1, example 2, example 3, example 4) I have some extra cases on my mind, such as:

• <a aria-label="Call 1 2 3. 4 5 6. 7 8 9 0." href="tel:1234567890">123.456.7890</a>
• <button aria-label="close">X</button>
• <a aria-label="WAVE" href="#">W A V E</a>
• <a href="#" aria-label="lorem">ipsum</a>

@HelenBurge - do these extra cases fit with your goals for this project? If so, I'll add these extra cases to the spreadsheet, then to my website.