ARIA Labelledby Property 2

From Level Access Web Labs
Jump to: navigation, search
  • It may reference containers with display:none set and it will still read the content.
  • If set on a form field, it will not allow a mouse user to click the label text and activate the form field in the same manner as a standard Label element with matching For and ID attributes.
  • aria-labelledby won't be announced when applied to elements that do not contain valid ARIA region/landmark roles or if they are not already active elements like form fields, links, or buttons.
  • When applied to links or buttons that support innerHTML, the text referenced by aria-labelledby must be included within the opening and closing tags in order to be announced reliably on iOS touch screen devices.
  • When applied on an active element, it must be included on the element that receives focus.

Input example

City:
(where do you live?)

Link example

The ARIA aria-labelledby in the first example references the paragraph text. In the second it is inclusive of the paragraph text and self-references the link text so that the aria-labelledby includes both the link text and the paragraph text.

Learn more about SSB BART Group Read more

Learn more about SSB BART Group Read more

Region example

Related links

This is some text in the region. The region has an aria-labelledby that references the heading "related links". SSB BART Group