The group label is not programmatically associated with its checkboxes.

[nikhillale]

Select Topic Area

General

GitHub Feature Area

Mobile

Body

To improve the accessibility of the group of checkboxes (in this case, size filter options), we applied the following solution, but still grouping issue is exist on real mobile devices.

1. Link the Checkbox Group to a Label: The ul element that holds the size options needs to be properly linked to the corresponding region and label, which is currently referenced by aria-labelledby="group-heading". However, the group-heading element is missing in the code. To ensure proper accessibility and association, it's important to define this element.

2. Specify the Group Label: The

   is designated with a role="region" and references aria-labelledby="group-heading", but no element with the id="group-heading" exists. To make the label accessible to screen readers, you should include an appropriate heading.

3. Ensure the Correct Checkbox Role: The tags are being utilized as checkboxes with role="checkbox", which is acceptable, but it's essential to properly manage the aria-checked state. The checkbox state (whether checked or unchecked) should be updated dynamically in response to the user's actions.

4. Enhance aria-checked Management: The aria-checked attribute should toggle between "true" and "false" to accurately reflect the checkbox’s state, indicating whether it is selected or not.
   `

   US Size

   Size guide

    <ul role="group" class="values content us size">
   
        <li title="Refine by US Size: 14" class=" ">
            <a role="checkbox" href="https://dummyurl.com" 
               aria-checked="false" 
               aria-label="Select US Size 14 (UK 18)" 
               data-hrefurl="/s/" 
               data-refinementurl="/on/" 
               class="size-value">
                <span>14 (UK 18)</span>
            </a>
        </li>
   
        <div class="see-all d-none d-lg-block" role="listitem">
            <a class="see-all-link" href="javascript:void(0)" aria-label="Show all US sizes">Show All</a>
        </div>
    </ul>
   
    <div class="show-less d-none">
        <a class="show-less-link" href="javascript:void(0)" aria-label="Show less US sizes">Show Less</a>
    </div>
   

`

[queenofcorgis]

@nikhillale thank you for your post, in order for us to triage this properly would you mind sharing if this is on the mobile app or the mobile website please 😄

[nikhillale]

@queenofcorgis This is for mobile website page on real device.

[nikhillale]

Hey @queenofcorgis did you found any solutions ?

[queenofcorgis]

Thanks for checking in - we do triage all product feedback, but given the volume of it - we can't respond or guarantee a timeline for each one. If and when we have an update we'll post back here.

[cehfisher]

Hello @nikhillale - thank you for taking the time to provide this feedback!

Our Accessibility team reviewed your issue and asked if you could share the URL for the page where they experienced this issue? The code snippet you provided includes a data-lulu-track attribute, which we do not use so they cannot replicate your reported issue.

Thanks!