Re: aria-labelledby with aria-hidden

apologies, it was unclear from your original email that it was not a native
checkbox, use of <label> for custom controls does not work.
--

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 09:47, bryan rasmussen <rasmussen.bryan@gmail.com>
wrote:

> 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
>>>
>>>