"Speech" media.

This paragraph has very interesting secret content to read.

"Title" attribute

"About" attribute

Zero Pixel Image

ARIA labels

alt attributes

aria-labelledby

• Image:
• Button: Button Text
• span: Span text.
• div:
  Div text.

aria-describedby

• Image:
• Button: Button Text
• span: Span text.
• div:
  Div text.

Just "del" and "ins"

Here are plain old del and ins tags in a paragraph.

Let's try it in a list:

• content inside del tag
• content inside ins tag

CSS "before" and "after" content.

Let's try a span with classes that add before and after content using CSS in a paragraph.

How about using CSS labels with del or ins tags?

Let's try it in a list with just the classes:

• the list content itself

Let's try it in a list with del and ins tags and the classes:

• content inside del tag
• content inside ins tag

Hidden blocks

Let's try leaving an invisible message using the hidden and aria-hidden attributes.

Let's try leaving an invisible secret message using the aria-hidden attribute and display:none.

Let's try using the aria-label attribute.

Let's try using CSS to hide text that should only be spoken by a screen reader.