aria-label and aria-labelledby

Go to screen reader results page.

Items in the Regular Document

Div

Div with aria-labelledby.
Div with aria-label
Div with aria-labelledby and tabindex="-1".
Div with aria-labelledby and tabindex="0".
Div with aria-label and tabindex="-1"
Div with aria-label and tabindex="0"

Heading

Here is a heading level 4 with aria-labeledby.

Here is a heading level 4 with aria-label.

Here is a heading level 4 with aria-labeledby and tabindex="-1".

Here is a heading level 4 with aria-labeledby and tabindex="0".

Here is a heading level 4 with aria-label and tabindex="-1".

Here is a heading level 4 with aria-label and tabindex="0".

Here is <div role="heading" aria-level="3"> with aria-labeledby.
Here is <div role="heading" aria-level="3"> with aria-label.
Here is <div role="heading" aria-level="3"> with aria-labeledby and tabindex="-1".
Here is <div role="heading" aria-level="3"> with aria-labeledby and tabindex="0".
Here is <div role="heading" aria-level="3"> with aria-label and tabindex="-1".
Here is <div role="heading" aria-level="3"> with aria-label and tabindex="0".

Paragraph

Paragraph with aria-labelledby.

Paragraph with aria-label.

Paragraph with aria-labelledby and tabindex="-1".

Paragraph with aria-labelledby and tabindex="0".

Paragraph with aria-label and tabindex="-1".

Paragraph with aria-label and tabindex="0".

Span

Here is some spanned text with aria-labelledby.

Here is some spanned text with aria-label.

Here is some spanned text with aria-labelledby and tabindex="-1".

Here is some spanned text with aria-labelledby and tabindex="0".

Here is some spanned text with aria-label and tabindex="-1".

Here is some spanned text with aria-label and tabindex="0".

Unordered List

Here is an unordered list with two items with aria-labelledby on the <ul>

  • Item one
  • Item two

Here is an unordered list with two items with aria-label on the <ul>

  • Item one
  • Item two

Here is an unordered list with two items with aria-labelledby on the <ul> and tabindex="-1"

  • Item one
  • Item two

Here is an unordered list with two items with aria-labelledby on the <ul> and tabindex="0"

  • Item one
  • Item two

Here is an unordered list with two items with aria-label on the <ul> and tabindex="-1"

  • Item one
  • Item two

Here is an unordered list with two items with aria-label on the <ul> and tabindex="0"

  • Item one
  • Item two

Unordered List Items

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

  • Item one
  • Item two

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

  • Item one
  • Item two

Here are unordered list items with aria-labelledby on the <li> and tabindex="-1"

  • Item one
  • Item two

Here are unordered list items with aria-labelledby on the <li> and tabindex="0"

  • Item one
  • Item two

Here are unordered list items with aria-label on the <li> and tabindex="-1"

  • Item one
  • Item two

Here are unordered list items with aria-label on the <li> and tabindex="0"

  • Item one
  • Item two

Forms

Form with aria-labelledby:

Here is my form with some text

Here is more text

Form with aria-label:

Here is my form with some text

Here is more text

Form Input, type="text"

input with aria-labelledby ONLY (no <label>)

input with aria-label ONLY (no <label>)

input with aria-labelledby (plus id/for label)

input with aria-label (plus id/for label)

input with aria-labelledby (plus wrapped label, with "for")

input with aria-label (plus wrapped label, with "for")

input with aria-labelledby (plus wrapped label, no "for")

input with aria-label (plus wrapped label, no "for")

input with aria-labelledby (with no label)

Name

input with aria-label (with no label)

Name

input with aria-labelledby AND aria-label AND id/for <label>

Textarea

textarea with aria-labelledby ONLY (no <label>)

textarea with aria-label ONLY (no <label>)

textarea with aria-labelledby (plus id/for label)


textarea with aria-label (plus id/for label)


textarea with aria-labelledby (plus wrapped label, with "for")

textarea with aria-label (plus wrapped label, with "for")

textarea with aria-labelledby (plus wrapped label, no "for")

textarea with aria-label (plus wrapped label, no "for")

textarea with aria-labelledby (with no label)

Message

textarea with aria-label (with no label)

Message

textarea with aria-labelledby (with no label, and no nearby text):

 

textarea with aria-label (with no label and no nearby text)

 

textarea with aria-label AND aria-labelledby AND <label>


Image

Image with alt text

Deque logo Img with aria-labelledby.
Deque logoImg with aria-label
Deque logo Img with aria-labelledby, tabindex="-1".
Deque logoImg with aria-labelledby, tabindex="0"
Img with aria-label, tabindex="-1".
Img with aria-label, tabindex="0"

Image with no alt attribute

Img with aria-labelledby.
Img with aria-label
Img with aria-labelledby, tabindex="-1".
Img with aria-labelledby, tabindex="0"
Img with aria-label, tabindex="-1".
Img with aria-label, tabindex="0"

Image with null alt attribute

Img with aria-labelledby.
Img with aria-label
Img with aria-labelledby, tabindex="-1".
Img with aria-labelledby, tabindex="0"
Img with aria-label, tabindex="-1".
Img with aria-label, tabindex="0"

Items in an Application Region

Div

Div with aria-labelledby.
Div with aria-label
Div with aria-labelledby and tabindex="-1".
Div with aria-labelledby and tabindex="0".
Div with aria-label and tabindex="-1"
Div with aria-label and tabindex="0"

Heading

Here is a heading level 4 with aria-labeledby.

Here is a heading level 4 with aria-label.

Here is a heading level 4 with aria-labeledby and tabindex="-1".

Here is a heading level 4 with aria-labeledby and tabindex="0".

Here is a heading level 4 with aria-label and tabindex="-1".

Here is a heading level 4 with aria-label and tabindex="0".

Here is <div role="heading" aria-level="3"> with aria-labeledby.
Here is <div role="heading" aria-level="3"> with aria-label.
Here is <div role="heading" aria-level="3"> with aria-labeledby and tabindex="-1".
Here is <div role="heading" aria-level="3"> with aria-labeledby and tabindex="0".
Here is <div role="heading" aria-level="3"> with aria-label and tabindex="-1".
Here is <div role="heading" aria-level="3"> with aria-label and tabindex="0".

Paragraph

Paragraph with aria-labelledby.

Paragraph with aria-label.

Paragraph with aria-labelledby and tabindex="-1".

Paragraph with aria-labelledby and tabindex="0".

Paragraph with aria-label and tabindex="-1".

Paragraph with aria-label and tabindex="0".

Span

Here is some spanned text with aria-labelledby.

Here is some spanned text with aria-label.

Here is some spanned text with aria-labelledby and tabindex="-1".

Here is some spanned text with aria-labelledby and tabindex="0".

Here is some spanned text with aria-label and tabindex="-1".

Here is some spanned text with aria-label and tabindex="0".

Unordered List

Here is an unordered list with two items with aria-labelledby on the <ul>

  • Item one
  • Item two

Here is an unordered list with two items with aria-label on the <ul>

  • Item one
  • Item two

Here is an unordered list with two items with aria-labelledby on the <ul> and tabindex="-1"

  • Item one
  • Item two

Here is an unordered list with two items with aria-labelledby on the <ul> and tabindex="0"

  • Item one
  • Item two

Here is an unordered list with two items with aria-label on the <ul> and tabindex="-1"

  • Item one
  • Item two

Here is an unordered list with two items with aria-label on the <ul> and tabindex="0"

  • Item one
  • Item two

Unordered List Items

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

  • Item one
  • Item two

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

  • Item one
  • Item two

Here are unordered list items with aria-labelledby on the <li> and tabindex="-1"

  • Item one
  • Item two

Here are unordered list items with aria-labelledby on the <li> and tabindex="0"

  • Item one
  • Item two

Here are unordered list items with aria-label on the <li> and tabindex="-1"

  • Item one
  • Item two

Here are unordered list items with aria-label on the <li> and tabindex="0"

  • Item one
  • Item two

Forms

Form with aria-labelledby:

Here is my form with some text

Here is more text

Form with aria-label:

Here is my form with some text

Here is more text

Form Input, type="text"

input with aria-labelledby ONLY (no <label>)

input with aria-label ONLY (no <label>)

input with aria-labelledby (plus id/for label)

input with aria-label (plus id/for label)

input with aria-labelledby (plus wrapped label, with "for")

input with aria-label (plus wrapped label, with "for")

input with aria-labelledby (plus wrapped label, no "for")

input with aria-label (plus wrapped label, no "for")

input with aria-labelledby (with no label)

Name

input with aria-label (with no label)

Name

input with aria-labelledby AND aria-label AND id/for <label>

Textarea

textarea with aria-labelledby ONLY (no <label>)

textarea with aria-label ONLY (no <label>)

textarea with aria-labelledby (plus id/for label)


textarea with aria-label (plus id/for label)


textarea with aria-labelledby (plus wrapped label, with "for")

textarea with aria-label (plus wrapped label, with "for")

textarea with aria-labelledby (plus wrapped label, no "for")

textarea with aria-label (plus wrapped label, no "for")

textarea with aria-labelledby (with no label)

Message

textarea with aria-label (with no label)

Message

textarea with aria-labelledby (with no label, and no nearby text):

 

textarea with aria-label (with no label and no nearby text)

 

textarea with aria-label AND aria-labelledby AND <label>


Image

Image with alt text

Deque logo Img with aria-labelledby.
Deque logoImg with aria-label
Deque logo Img with aria-labelledby, tabindex="-1".
Deque logoImg with aria-labelledby, tabindex="0"
Img with aria-label, tabindex="-1".
Img with aria-label, tabindex="0"

Image with no alt attribute

Img with aria-labelledby.
Img with aria-label
Img with aria-labelledby, tabindex="-1".
Img with aria-labelledby, tabindex="0"
Img with aria-label, tabindex="-1".
Img with aria-label, tabindex="0"

Image with null alt attribute

Img with aria-labelledby.
Img with aria-label
Img with aria-labelledby, tabindex="-1".
Img with aria-labelledby, tabindex="0"
Img with aria-label, tabindex="-1".
Img with aria-label, tabindex="0"

This is the text used in the aria-labelledby in all instances above:

Fred is my hero!