What is palpable content?

Published: 20 September 2026

I wrote an article on HTML content categories. However, it didn’t cover one of the key content categories: palpable content.

So, let’s look at palpable content now.

The HTML definition of palpable content

The HTML Living Standard says palpable content:

makes an element non-empty by providing either some descendant non-empty text, or else something users can hear (audio elements) or view (video, img, or canvas elements) or otherwise interact with (for example, interactive form controls).

In simple terms, palpable content is something with substance: text, an image, media, or a control.

Elements should not be empty

In general, elements that can contain flow content or phrasing content should not be empty. They should contain at least one piece of palpable content that is not hidden.

The key word here is “should”. This means it’s a recommendation rather than a strict requirement.

Empty elements can be valid

The specification also makes it clear that there are valid reasons for an element to be empty. It might be a placeholder that a script fills in later.

For example, an empty error message container above a form field may be used to provide an error message when one is needed.

<div class="error-message">
  <!-- Error message added here when needed -->
</div>

How can I check if an element contains palpable content?

Before you start, remember that you are checking the markup rather than testing the user experience.

For example, visually hidden text can still count as palpable content, and an image with empty alt can also count.

So checking only what you can see, or what a screen reader announces, may give you the wrong answer.

Gate 1: is the element non-empty?

Does it contain any child nodes at all, ignoring whitespace and comments?

Answer:

No: Stop. Nothing palpable here.
Yes: Continue.

Gate 2: is that content unhidden?

Is at least some of that content without a hidden attribute?

Answer:

No: Stop. Hidden content does not satisfy the rule.
Yes: Continue.

Gate 3: is at least some of the unhidden content palpable?

Work through the four kinds. One yes is enough.

Can you extract a non-empty text string?
Is there an <img>, <canvas> or <video>?
Is there an <audio> element?
Is there a form control or other interactive element?

Answer:

None: The element has contents, but nothing palpable.
Any: The element has palpable content.

A note on gate 3

These four questions follow the definition closely and will give you the right answer in most cases.

However, the full list of palpable content is longer, and some elements only count as palpable in certain situations. For example:

<ul> and <ol> are only palpable when they contain at least one <li>
<dl> is only palpable when it contains at least one name-value group
<audio> is only palpable when it has a controls attribute
<input> is only palpable when its type is not hidden

For example, <ul></ul> is not palpable, even though <ul> appears in the list.

If you come across an unusual case, check the full list in the specification.

So what does passing the test tell you?

Passing the test only tells you that the element contains palpable content. It does not tell you whether that content is actually usable or available to users.

There are four possible outcomes, listed below:

Example	Palpable?	Usable?
1. `<a href="#">Hello world</a>`	Yes	Yes
2. `<a href="#"><img src="x.png" alt=""></a>`	Yes	No
3. `<button aria-label="Close"></button>`	No	Partly
4. `<button></button>`	No	No

The two middle rows are where this gets interesting.

1. Passes palpable content check, usable yes

<a href="#">Hello world</a>

The <a> element contains non-empty text, so it passes the palpable content check. The text also gives the link its accessible name.

2. Passes palpable content check, usable no

<a href="#"><img src="x.png" alt=""></a>

The <a> element passes the palpable content check because it contains an <img>, regardless of whether the image's alt attribute is empty.

Because the image is the only content of the link, it has a functional purpose. It needs a text alternative that describes where the link goes or what it does.

This is a WCAG 2.4.4 failure.

This is an easy case to miss because the element passes the palpable content test and may look fine visually.

3. Fails palpable content check, partly usable

<button aria-label="Close"></button>

The <button> is empty, so it does not contain any palpable content.

However, aria-label="Close" gives the button an accessible name. This means a screen reader can identify the button, even though there is nothing visible inside it. For sighted users, the button appears empty.

This shows why the palpable content rule is still useful. The button relies entirely on its aria-label to explain its purpose, and that label is not visible.

Compare it with this:

<button><span class="visually-hidden">Close</span></button>

This version contains palpable content and still has the accessible name “Close”. If the visually hidden styling fails, the text is also still there.

If an element fails the palpable content check, this can be a useful sign that the markup deserves a closer look.

4. Fails palpable content check, usable no

<button></button>

The <button> element is empty and has no accessible name. It fails the palpable content check and is not usable.

Wrap-up

The palpable content check tells you whether something is there. Usability asks whether people can actually use it.

Ideally, you want both.