Sr Only Page Heading H 1

Ready

HTML
View
Context
Info
Notes


        
        <!-- SR-ONLY PAGE HEADING H1 - general markup. If the CMS provides another way to set a sr-only visibile hidden heading, use that instead. -->
<h1 class="rtds-sr-only"></h1>


        <!-- SR-ONLY PAGE HEADING H1 - general markup. If the CMS provides another way to set a sr-only visibile hidden heading, use that instead. -->
<h1 class="rtds-sr-only">
    {%- if title -%}
        {{ title|safe }}
    {%- endif -%}
</h1>


        
            
            /* No context defined. */

Handle: @sr-only-page-heading-h1
Preview:
- With layout
- Component only
Filesystem Path: components/02-atoms/sr-only-page-heading-h1/sr-only-page-heading-h1.njk
Referenced by (1): @home--regione

Description

The sr-only page heading h1 component is a accessible-hidden heading used to improve the accessibility of the page, when there’s no visibile heading on the page.

NOTE

H1 on page should always be present, even if it’s hidden with sr-only class. It would be better to have a visible heading on the page, but if it’s not possible, the sr-only page heading h1 component should be used.