WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: [External Sender]What are the semantics in html?

for

From:
Date: Jul 10, 2020 5:25AM

On 10/07/2020 12:12, Brian Lovely via WebAIM-Forum wrote:
> The below paragraph I would like you to expand upon as I am not sure if I
> follow:
>
> " Part of the semantics of an element being in the tab order is that that
> element is actionable, so adding a non-actionable element to the tab order
> with tabindex="0" is a semantic failure."
>
> Could you provide a specific example on the above to make it clearer.
>
> I have encountered the mistaken idea that no content can be navigated by a
> user of assistive technology unless the element has been added to the tab
> order. This results in numerous non-actionable elements added to the tab
> order. like headings, divs, paragraphs, etc. A similar misunderstanding is
> that only aria-label exposes content to assistive technology, so you end up
> with code like:
>
> <div tabindex="0" aria-label="Mary had a little lamb">Mary had a little
> lamb</div>

Making every element focusable is a mistake that developers do make
sometimes, albeit with good intentions, but it really doesn't have
anything to do with semantics as Patrick mentioned. An h1 with
tabindex="0" is still semantically a heading, just one that you can
focus on with a keyboard when you likely shouldn't be able to.

> On Thu, Jul 9, 2020 at 8:19 PM Patrick H. Lauke < <EMAIL REMOVED> >
> wrote:
>
>> On 09/07/2020 13:26, Brian Lovely via WebAIM-Forum wrote:
>>> Part of the semantics of an element being in the tab order is that that
>>> element is actionable, so adding a non-actionable element to the tab
>> order
>>> with tabindex="0" is a semantic failure.
>>
>> Seems a bit of a stretch. It's a failure of focus order/behaviour, not
>> of semantics, I'd say... (how it behaves vs what it conveys)
>>
>> P
>> --
>> Patrick H. Lauke
>>
>>
>> https://urldefense.com/v3/__https://www.splintered.co.uk/__;!!EFVe01R3CjU!MmT4FKmpqP828tFJoWpa4LOos6LNOEbIMzCC6SqsbAJUCdqDurYINLgiYUyhEBcdQXiZkg$
>> |
>> https://urldefense.com/v3/__https://github.com/patrickhlauke__;!!EFVe01R3CjU!MmT4FKmpqP828tFJoWpa4LOos6LNOEbIMzCC6SqsbAJUCdqDurYINLgiYUyhEBf5mIXkFA$
>>
>> https://urldefense.com/v3/__https://flickr.com/photos/redux/__;!!EFVe01R3CjU!MmT4FKmpqP828tFJoWpa4LOos6LNOEbIMzCC6SqsbAJUCdqDurYINLgiYUyhEBc68sIRXg$
>> |
>> https://urldefense.com/v3/__https://www.deviantart.com/redux__;!!EFVe01R3CjU!MmT4FKmpqP828tFJoWpa4LOos6LNOEbIMzCC6SqsbAJUCdqDurYINLgiYUyhEBePUUHjjw$
>> twitter: @patrick_h_lauke | skype: patrick_h_lauke
>> >> >> https://urldefense.com/v3/__http://list.webaim.org/__;!!EFVe01R3CjU!MmT4FKmpqP828tFJoWpa4LOos6LNOEbIMzCC6SqsbAJUCdqDurYINLgiYUyhEBff5RcZJQ$
>> List archives at
>> https://urldefense.com/v3/__http://webaim.org/discussion/archives__;!!EFVe01R3CjU!MmT4FKmpqP828tFJoWpa4LOos6LNOEbIMzCC6SqsbAJUCdqDurYINLgiYUyhEBda7XhVyw$
>> >>
>
>

--
Director @TetraLogical
https://tetralogical.com