A little post on h1 and accessibility

Here’s a chunk of code I always used to wonder about. It’s the code that outputs the name of the website, in the header. It shows if there is no logo. If you are on the front page, home, the site name is surrounded by <h1></h1> tags. If you are inside the site, the site name is not surrounded by <h1></h1> tags.

<?php if ( is_front_page() && is_home() ) : ?>

		<h1 class="navbar-brand mb-0 h1-mimic">
			<a rel="home" href="<?php echo esc_url( home_url( '/' ) ); ?>" itemprop="url">
				<?php bloginfo( 'name' ); ?>
			</a>
		</h1>

	<?php else : ?>

		<a class="navbar-brand h1-mimic" rel="home" href="<?php echo esc_url( home_url( '/' ) ); ?>" itemprop="url">
			<?php bloginfo( 'name' ); ?>
		</a>

<?php endif; ?>

Why? What’s going on here?

The first thing to consider is that the h1 tag is not just a design element. Yes, it has distinct design properties – font-size, font-weight, perhaps text-transform and/or font-style – but it also serves an important semantic function.

Headings indicate the structure of the page’s content. They allow web browsers, plugins, and assistive technologies to offer in-page navigation. Consider the semantic organization of the page, rather than the visual organization. What is the title of the page? What should screen readers and other assistive technology recognize as the title? Remember that people using screen readers cannot actually see the visual organization. The screen reader will need to have them traverse structure.

In other words, there’s a semantic hierarchy in headings, and having multiple <h1></h1> tags on a single page is not recommended. Typically, the <h1></h1> tags are used to surround the page title or heading. On the home page, the site title is considered the page title, and thus, it’s surrounded by <h1></h1> tags. However, on other pages, the page title is just that, and it’s surrounded by the <h1></h1> tags. To surround the site title with <h1></h1> tags would conflict, and cause accessibility errors.

For design purposes, what we’ve done here is create a class called h1-mimic and assigned it the attributes of the h1:

.h1-mimic {
  @extend h1;
}

So in this example, on the home page the site title will be surrounded by <h1></h1> tags, and on inside pages the site title link will have a class that extends h1, and this has the sample properties as h1.

The accessibility problem is solved and everything remains visually consistent.