How to Organize Headings for Accessibility

How to Organize Headings for Accessibility in your WordPress Theme

[series]Making your WordPress Theme Accessible Series:

1. An Intro to Web Accessibility
2. How to Organize Headings for Accessibility ( We’re here now )

[/series]

 

In today’s post, I’m going to focus one aspect in making our WordPress theme accessible – and that aspect is headings. After reviewing what headings are, and what they’re for, we’ll go into our theme files and make any changes necessary related to headings. It should only take a few minutes and although we’re only focusing on headings in this post, it’ll bring us one step closer to making our theme accessible.

Let’s get started. As an FYI, I’ll be using TwentyThirteen for most of my references, but the theme I’m using on this blog is Hexa.

First, what is a heading?

A heading in html are the “title” tags, I like to call them, ranging from the highest one (h1) to the lowest (h6).

<h1>This is an h1 tag, the highest in importance</h1>
<h2>This is an h2 tag</h2>
<h3>This is an h3 tag</h3>
<h4>This is an h4 tag</h4>
<h5>This is an h5 tag</h5>
<h6>This is an h6 tag</h6>

How are headings used?

They’re used to organize content for SEO as well structuring your site content in a way that makes sense to screen readers or other technology to assist those with disabilities. You can get an idea of how this works if you view your WordPress theme right now, and use the tab key to navigate instead of your mouse when the page loads.

If you try it on WordPress’ TwentyThirteen Theme Demo, you’ll notice that after the tabbing goes past the logo, navigation, and search bar, that it takes the user to the title of each post, any links within content,  taxonomy and so on before it goes to the next post and does the same thing. TwentyThirteen is marked with the theme accessibility tag. If you tried this on a theme that isn’t structured so well html wise – well perhaps the tabbing won’t flow in a way that makes sense. You may not even clearly see where your tabbing on the page – which is a css focus issue that we’ll talk about in a future post.

Take a look at the TwentyThirteen screenshot below to get an idea of how headings should be ordered. Ideally, there should only be one H1 tag on a page, usually reserved for the logo/site heading although that’s a bit of a debate so I’ll leave that up to you. What follows after an H1 are the secondary sub-headings, H2, and then the third sub-headings, H3, and so on.

Great! Now how can we apply this to our theme?

The first step is checking that your logo or site header is an H1. You can check this in your WordPress theme’s header.php file. In TwentyThirteen, it looks like this:

<a class="home-link" href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
 <h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
 <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
 </a>

Notice how the site title is an H1. This is what we want! So if it’s already an H1, leave it as is. If not, make sure it’s an H1:

<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>

I normally remove the site description as I almost never display it beneath my site title/logo. This is just my personal preference. For my current theme, Hexa, I’ll remove it when I replace my header with a logo (at some point, ah procrastination, my mortal enemy). For now though, guess I’ll leave it in – moving on!

The second step is to open your content.php file and if you’re using post formats, your content-gallery/image/video/whatever.php files. ( Some older themes might be using loop.php or loop-something.php ) These files are responsible for your post loops. Look for the line of PHP that outputs your post titles. It appears like this in TwentyThirteen using the the_title function:

<h1 class="entry-title"><?php the_title(); ?></h1>

If you want your logo to be the only H1, then you can go ahead and change those H1s to H2s instead. That’s what I did in my Hexa theme, but here’s what the change looks like in TwentyThirteen:

<h2 class="entry-title"><?php the_title(); ?></h2>

As a reminder, this is something I forget as well, check these files:

•  404.php
• archive.php
• category.php
• tag.php
• page.php

There may be other templates depending on your theme, but the goal here is to ensure that any blog post titles or page titles are wrapped in H2 tags.

You might also want to check your functions.php and look for where your sidebars are being registered with register_sidebar(). Confirm that these are an appropriate heading. In Hexa, they were originally H1s, which is understandable considering it’s on the top of the site above my site title, but they’re not as important as the site title. So to stick to my original goal of one H1 and de-prioritize them heading-wise, I changed the widget titles to be H3s in the before_title and after_title parameters.

Here’s what that change looks like in my functions.php in Hexa ( using a child theme of course ).

function child_hexa_widgets_init() {
	register_sidebar( array(
		'name'          => __( 'Sidebar 1', 'hexa' ),
		'id'            => 'sidebar-1',
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget'  => '</aside>',
		'before_title'  => '<h3 class="widget-title">',
		'after_title'   => '</h3>',
	) );
	register_sidebar( array(
		'name'          => __( 'Sidebar 2', 'hexa' ),
		'id'            => 'sidebar-2',
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget'  => '</aside>',
		'before_title'  => '<h3 class="widget-title">',
		'after_title'   => '</h3>',
	) );
	register_sidebar( array(
		'name'          => __( 'Sidebar 3', 'hexa' ),
		'id'            => 'sidebar-3',
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget'  => '</aside>',
		'before_title'  => '<h3 class="widget-title">',
		'after_title'   => '</h3>',
	) );
}
remove_action( 'widgets_init', 'hexa_widgets_init', 20 );
add_action( 'widgets_init', 'child_hexa_widgets_init', 30 );

 

And this is what my Hexa theme on the front-end looks like with the other template changes:

 

The last step is where we might have to put a little elbow grease into it depending on how large your site is. Log into your dashboard and check your post and page content in the text editor. If you’re using headings and your post/page titles are now H2s, the highest heading that should be in your content should be H3s. Take a look at a screenshot of the previous post in this series as an example for what the content looks like in your text editor:

If that’s not the case, here’s where you’ll have to put a bit of effort and fix them. Now, if your site has hundreds of posts/pages, then it’s understandable if this is a step that you want to skip. However, it’s in your best benefit to fix them eventually so that your site is accessible to everyone. You can work on a few posts a day or grab a buddy to help out. Or maybe if it’s just that much content, just making sure your headings are in the right order from this point is fine – just keep in mind that your older content may prove difficult for those audiences that benefit from proper accessibility structure.

And that’s it!

Hopefully we’ve only spent a few minutes reviewing and going over headings ( unless you’re one of those guys with the billion posts to edit – Ganbatte! ). There’s a lot more to making our WordPress theme accessible, but we’re already one step closer now that we’ve gone over what headings are, what they’re for, and edited our template files. In the next installment, we’ll go over a new aspect to bring our theme closer to meeting accessibility guidelines.

Look forward to it!