aria-describedby

Regular Elements

Div

This is a div [teacup]
This is a div [none]
This is a div [tabindex="0" teacup]
This is a div [tabindex="0" none]

Heading

This is a heading [teacup]

This is a heading [none]

This is a heading [tabindex="0" teacup]

This is a heading [tabindex="0" none]

Role="Heading"

Here is <div role="heading" aria-level="3"> with aria-describedby [teacup].
Here is <div role="heading" aria-level="3"> with aria-describedby [none].
Here is <div role="heading" aria-level="3"> with aria-describedby [teacup] and tabindex="0".
Here is <div role="heading" aria-level="3"> with aria-describedby [none] and tabindex="0".

Paragraph

This is a humble paragraph [teacup]

This is a humble paragraph [none]

This is a humble paragraph [tabindex="0" teacup]

This is a humble paragraph [tabindex="0" none]

Link

This is a link [teacup]

This is a link [none]

Span

This is a span [teacup]

This is a span [none]

This is a span [tabindex="0" teacup]

This is a span [tabindex="0" none]

Unordered List

Here is an unordered list with aria-describedby on the <ul> [teacup]

  • This is list item one
  • This is list item two

Here is an unordered list with aria-describedby on the <ul> [none]

  • This is list item one
  • This is list item two

Here is an unordered list with aria-describedby (& tabindex="0") on the <ul> [teacup tabindex="0"]

  • This is list item one
  • This is list item two

Here is an unordered list with aria-describedby (& tabindex="0") on the <ul> [none tabindex="0"]

  • This is list item one
  • This is list item two

Unordered List Items

Here are unordered list items with aria-describedby on the <li>

  • This is list item one [teacup]
  • This is list item two [none]

Here are unordered list items with aria-describedby (& tabindex="0") on the <li>

  • This is list item one [teacup tabindex="0"]
  • This is list item two [none tabindex="0"]

Forms

Form with aria-describedby [teacup]:

Here is my form with some text

Here is more text

Form with aria-describedby [none]:

Here is my form with some text

Here is more text

Form Input, type="text"

input with aria-describedby ONLY (no <label>) [teacup]

input with aria-describedby ONLY (no <label>) [none]

input with aria-describedby (plus id/for label) [teacup]

input with aria-describedby (plus id/for label) [none]

input with aria-describedby (plus wrapped label, with "for") [teacup]

input with aria-describedby (plus wrapped label, with "for") [none]

input with aria-describedby (plus wrapped label, no "for") [teacup]

input with aria-describedby (plus wrapped label, no "for") [none]

input with aria-describedby (with no label) [teacup]

Name

input with aria-describedby (with no label) [none]

Name

Textarea

textarea with aria-describedby ONLY (no <label>) [teacup]

textarea with aria-describedby ONLY (no <label>) [none]

textarea with aria-describedby (plus id/for label) [teacup]


textarea with aria-describedby (plus id/for label) [none]


textarea with aria-describedby (plus wrapped label, with "for") [teacup]

textarea with aria-describedby (plus wrapped label, with "for") [none]

textarea with aria-describedby (plus wrapped label, no "for") [teacup]

textarea with aria-describedby (plus wrapped label, no "for") [none]

textarea with aria-describedby (with no label) [teacup]

Message

textarea with aria-describedby (with no label) [none]

Message

textarea with aria-describedby (with no label, and no nearby text) [teacup]:

 

textarea with aria-describedby (with no label and no nearby text) [none]

 

Image with alt

This is an image: ATM [teacup]

This is an image: ATM [none]

This is an image: ATM [tabindex="0" teacup]

This is an image: ATM [tabindex="0" none]

Image without alt

This is an image: [teacup]

This is an image: [none]

This is an image: [tabindex="0" teacup]

This is an image: [tabindex="0" none]

Image with null alt

This is an image: [teacup]

This is an image: [none]

This is an image: [tabindex="0" teacup]

This is an image: [tabindex="0" none]

The Same Elements in Application Mode

Div - App

This is a div [teacup]
This is a div [none]
This is a div [tabindex="0" teacup]
This is a div [tabindex="0" none]

Heading - App

This is a heading [teacup]

This is a heading [none]

This is a heading [tabindex="0" teacup]

This is a heading [tabindex="0" none]

Role="Heading" - App

Here is <div role="heading" aria-level="3"> with aria-describedby [teacup].
Here is <div role="heading" aria-level="3"> with aria-describedby [none].
Here is <div role="heading" aria-level="3"> with aria-describedby [teacup] and tabindex="0".
Here is <div role="heading" aria-level="3"> with aria-describedby [none] and tabindex="0".

Paragraph - App

This is a humble paragraph [teacup]

This is a humble paragraph [none]

This is a humble paragraph [tabindex="0" teacup]

This is a humble paragraph [tabindex="0" none]

Link - App

This is a link [teacup]

This is a link [none]

Span - App

This is a span [teacup]

This is a span [none]

This is a span [tabindex="0" teacup]

This is a span [tabindex="0" none]

Unordered List - App

Here is an unordered list with aria-describedby on the <ul> [teacup]

  • This is list item one
  • This is list item two

Here is an unordered list with aria-describedby on the <ul> [none]

  • This is list item one
  • This is list item two

Here is an unordered list with aria-describedby (& tabindex="0") on the <ul> [teacup tabindex="0"]

  • This is list item one
  • This is list item two

Here is an unordered list with aria-describedby (& tabindex="0") on the <ul> [none tabindex="0"]

  • This is list item one
  • This is list item two

Unordered List Items - App

Here are unordered list items with aria-describedby on the <li>

  • This is list item one [teacup]
  • This is list item two [none]

Here are unordered list items with aria-describedby (& tabindex="0") on the <li>

  • This is list item one [teacup tabindex="0"]
  • This is list item two [none tabindex="0"]

Forms - App

Form with aria-describedby [teacup]:

Here is my form with some text

Here is more text

Form with aria-describedby [none]:

Here is my form with some text

Here is more text

Form Input, type="text" - App

input with aria-describedby ONLY (no <label>) [teacup]

input with aria-describedby ONLY (no <label>) [none]

input with aria-describedby (plus id/for label) [teacup]

input with aria-describedby (plus id/for label) [none]

input with aria-describedby (plus wrapped label, with "for") [teacup]

input with aria-describedby (plus wrapped label, with "for") [none]

input with aria-describedby (plus wrapped label, no "for") [teacup]

input with aria-describedby (plus wrapped label, no "for") [none]

input with aria-describedby (with no label) [teacup]

Name

input with aria-describedby (with no label) [none]

Name

Textarea - App

textarea with aria-describedby ONLY (no <label>) [teacup]

textarea with aria-describedby ONLY (no <label>) [none]

textarea with aria-describedby (plus id/for label) [teacup]


textarea with aria-describedby (plus id/for label) [none]


textarea with aria-describedby (plus wrapped label, with "for") [teacup]

textarea with aria-describedby (plus wrapped label, with "for") [none]

textarea with aria-describedby (plus wrapped label, no "for") [teacup]

textarea with aria-describedby (plus wrapped label, no "for") [none]

textarea with aria-describedby (with no label) [teacup]

Message

textarea with aria-describedby (with no label) [none]

Message

textarea with aria-describedby (with no label, and no nearby text) [teacup]:

 

textarea with aria-describedby (with no label and no nearby text) [none]

 

Image with alt - App

This is an image: ATM [teacup]

This is an image: ATM [none]

This is an image: ATM [tabindex="0" teacup]

This is an image: ATM [tabindex="0" none]

Image without alt - App

This is an image: [teacup]

This is an image: [none]

This is an image: [tabindex="0" teacup]

This is an image: [tabindex="0" none]

Image with null alt - App

This is an image: [teacup]

This is an image: [none]

This is an image: [tabindex="0" teacup]

This is an image: [tabindex="0" none]

Short text for aria-describedby:

I'm a little teacup, short and stout.

Text hidden with display:none