Section

The x-section directive relates a <section> to its title for better screen reader navigation.

Usage

<section x-init x-section>
  <h2 x-section:title>This is a section title</h2>
</section>

Note

Notice the x-init in the markup. This is required for Alpine to detect and run directives.

Demo

This is a section title

Inspect the section title above. Notice that an id is automatically created for the <h2> and associated with the <section> with aria-labelledby.

<section x-section aria-labelledby="toolbelt-section-title-1">
  <h2 x-section:title id="toolbelt-section-title-1">This is a section title</h2>
</section>