Re: aria-labelledby with aria-hidden

I have something like this structure

<div id="dynamic id" role="checkbox" ...other pertinent attributes>
</div>
<label for="dynamic id">
  <span class="screenreaderonly">this only shows up if you have selected
the wrong checkbox in group</span>
 <div>possibly mixed content html content appears in here from third party
solution</div>
</label>

IF I do without aria-labelledby then VO on safari reads unticked tickbox
and no label.
IF I do with aria-labelledby on the role checkbox then VO on safari reads

> unticked tickbox, possibly mixed content html content appears in here from
> third party solution
>
if I then press VO-right arrow it goes to next tickbox

IF I do with aria-labelledby on the role checkbox with VO on Chrome it
reads

> unticked tickbox, possibly mixed content html content appears in here from
> third party solution
>
if I then press VO-right arrow it goes to label and reads

> possibly mixed content html content appears in here from third party
> solution
>

If I do with aria-labelledby on the role checkbox and aria-hidden on the
label then on VO with chrome and VO with safari it reads

> unticked tickbox, possibly mixed content html content appears in here from
> third party solution
>
If I then press VO-right arrow it skips the label and goes to next checkbox
div.

Thanks,
Bryan Rasmussen


On Mon, Sep 20, 2021 at 10:07 AM Steve Faulkner <faulkner.steve@gmail.com>
wrote:

> hi Bryan
> if you use a <label> why do you need aria-labelledby?
> --
>
> Regards
>
> SteveF
> Accessibility is political[image: ✊]
> Working for the web
> <https://twitter.com/stevefaulkner/status/940835584410574850>,
> anywhere and everywhere [image: 🖖🏽]
>
>
> On Mon, 20 Sept 2021 at 08:58, bryan rasmussen <rasmussen.bryan@gmail.com>
> wrote:
>
>> Hey,
>>
>> I had an element with role checkbox, if I did that with a label next to
>> it and
>> checkbox - aria-labelldby=label, label for = checkobox
>>
>> I found that using VO with chrome ended up reading first tickbox with
>> the correct label in the checkbox and then next move with the virtual
>> cursor read out the text content of the label.
>>
>> however if I put aria-hidden on the label then VO with chrome and VO
>> with safari both read out tickbox with label content and I don't
>> navigate into label content with my next forward navigation.
>>
>> This works great, however I worry it is against the standard?
>>
>> Thanks,
>> Bryan Rasmussen
>>
>>