Tutorial - Using Headings for Accessibility and SEO

[wparasae]

Topic Description

Many first-time and intermediate WordPress users use headings for their stylistic appeal--and not necessarily as they are intended to be, or in a way that makes their websites accessible. This tutorial will teach users how to use Headings correctly on posts or page, which will make their website more accessible and boost their rank in search engines.

Related Resources

Links to related content on Learn, HelpHub, DevHub, GitHub Gutenberg Issues, DevNotes, etc.

• https://make.wordpress.org/accessibility/handbook/content/using-headings-in-content/
• https://make.wordpress.org/accessibility/handbook/markup/heading-structure-in-theme-development/
• https://www.w3.org/WAI/tutorials/page-structure/headings/
• https://www.a11yproject.com/posts/how-to-accessible-heading-structure/

Objective

Learners will be able to...

• Explain the difference between font size and Headings
• Use headings correctly on posts, pages, and across their websites

Guidelines

Review the team guidelines

Tutorial Development Checklist

• Gather links to Support and Developer Docs
• Review any related material on Learn
• Define several SEO keywords to use in the article and where they should be prominently used
• Description and Objectives finalized
• Tutorial created and announced to the team for Q/A review
• Tutorial reviewed and ready to publish
• Tutorial submitted and published to WPTV
• Tutorial published on WPTV
• Tutorial captioned
• Tutorial created on Learn.WordPress.org
• Tutorial post reviewed for grammar, spelling, etc.
• Tutorial published on Learn.WordPress.org
• Tutorial announced to Marketing Team for promotion

[wparasae]

Tutorial Script Rough Draft

Did you know? Using headings on your website's posts and pages can be the difference between making a connection to your website's audience--or result in them bouncing away to find a different website. For example, imagine you are a parrot owner in a coastal town, a hurricane is coming, and you need to find information fast on how to keep your feathered friends safe. Which article are you more likely to read? [Example with headings and example without]

Most people will bounce away from the first example because without headings, they can't find what they're looking for quickly, and go in search of the second one they can understand a lot more quickly. Headings serve to organize content and make it easier for the reader to navigate and locate information--but most importantly, they are also important tools for accessibility and Search Engine Optimization.

In general, it's important to use headings to...

• introduce new topics, sections, or articles
• guide the reader's eye: let your readers skim your content to give the reader an idea of what to expect
• break topics up into smaller, more digestible pieces of information

Headings use typography and formatting to distinguish them from the rest of the content. Website headings often use larger font sizes and different font weights or colors to differentiate them from the body text. However, to use headings well in a way that will rank your website higher in search engines and make your website more accessible, you need to do more than just adjust the size of your paragraphs!

Using Heading Blocks

It's important to use the Headings blocks to organize content and indicate the hierarchy of information.

Each page should have one main heading, typically an H1, which serves as the title of the page and should accurately and concisely summarize the content. Subheadings, such as H2, H3, etc., can then be used to break the content into sections and subsections. **Fun Fact: ** You'll notice when you use your first heading block that "H2" is automatically selected--that's because your page or post title is your first heading! Once you've aded a heading, you can change which heading is which by selecting the heading in the list view, then selecting the option that says "H2". From there, you can structure your headings.

It is important to use headings correctly, both for accessibility reasons and to ensure that search engines can properly understand the structure and content of your page.

Proper use of headings on a website can help improve accessibility in several ways:

1. Screen reader users: Screen readers use headings to navigate through web content and understand the structure of the page. Proper use of headings makes it easier for screen reader users to quickly find the information they need. For example, without headings, the screen reader can only read this giant chunk of text. If I add headings, the screen reader can allow its user to quickly navigate to the section (Electus parrot training) so they can learn how to train their feathered friend--without being forced to hear all about a different species of bird!

2. Keyboard-only users: Users who navigate using only a keyboard can use headings to skip over sections they don't need and quickly jump to the content they're interested in.

3. Users with cognitive disabilities: Properly formatted headings can make content more scannable and easier to understand for users with cognitive disabilities, such as dyslexia or ADHD.

4. Low vision users: Users with low vision may use headings to zoom in and make the content larger. Properly formatted headings can help maintain the structure of the page as the user zooms in.

Overall, using headings in a way that follows best practices for accessibility can help create a more inclusive website that is easier to use for a wider range of users. It's important to use headings properly by using the correct Headings Block, avoiding decorative formatting, and using descriptive and concise text.

Headings Best Practices for Content:

Heading Do's:
-Use headings to structure your content: organize your content into logical chunks. Use them to break down your content into logical chunks. For example, this post is "About Parrots", which is the title -- the H1. It's considered a best practice to only use one H1 per page. I decide to start my article by writing about Parrot Health, which I use an H2 for. Another sub-topic about All Parrots, and then Parrot health is "Nutrition"--it falls under the heading "Parrot Health", so I drill down to the next sub-heading. Each sub-topic should relate to the topic above it.

• Use headings in chronological order (H1 followed by H2, H2 followed by H3, etc.) as your topics get more individualize. When you finish writing in one topic and want to switch to another, it's okay to switch back to an earlier heading that relates to your post or page topic, like you see here. For example, "Parrot Enrichment" is important to parrot health, but isn't really about nutrition, so I switched back to an H3.
• Be consistent! Consistency is key when it comes to using headings on your website. While you do have the option to style each heading uniquely in your site editor's style section, it's a good idea to use the same heading hierarchy and styling throughout your site to create a uniform look and feel
• Make your headings visually distinct: Use size, font weight, color, and other styling elements to make your headings stand out from the rest of the content. This will make it easier for users to quickly identify the important sections of your content.
• Use headings sparingly, and make them descriptive, relevant, and concise text for each heading. Your headings should provide a clear and concise summary of the content that follows. They should accurately reflect the contents of the section. Overusing headings can be confusing and overwhelming for users. Use headings only where they add value to the user experience.
  -Consider using headings for search engine optimization: You can also choose to thoughtfully incorporate keywords into headings can also boost your website's SEO - Use keywords in your headings: Incorporate relevant keywords into your headings to make it clear to both users and search engines what your content is about. But be careful not to overuse keywords, as this can be seen as spammy and harm your SEO. Don't only headings solely for SEO purposes--this can result in poor user experience. Your main goal should always be to organize and present content in a way that is clear and intuitive for the user.

Did you know? You can use the "outline" feature under your list view to quickly check your headings. Select the list view icon, then "outline". If you read over your headings, imagine yourself as a reader quickly skimming your page: would these headings make sense if you didn't see anything else on the page? Does your H2 heading relate to your H1 heading? This is a quick way you can check your pages for any errors so you can correct them quickly, rather than searching block by block.

One last tip -- it can be tempting to use your heading blocks stylistically, for emphasis. Don't do this! If you're looking for a stylistic flare, instead, style your paragraphs differently or use additional blocks, such as quote blocks, prose blocks, and ONE MORE EXAMPLE OF ANOTHER BLOCK.

For more information on using headings, please see the WordPress handbook page: https://make.wordpress.org/accessibility/handbook/content/using-headings-in-content/

Happy writing!

[wparasae]

This rough draft is ready for review. I want to make sure we have plenty of time to go over this, as it touches on accessibility and I want to make sure to get it right. I chose to use person-first sentences in this recording.

Please view the rough draft of Using Headings for Accessibility and SEO, and leave comments for feedback in this Github issue:

Specific Feedback

1. Is the content accurate? Is there anything else I should add, or a different way I should phrase something?
2. Sound / pacing -- this is always a concern. Let me know if I should speed up or slow down, or if you hear random birds in the background (specifically, when I should record).
3. Do the visuals enhance what I'm saying well, or do you have a suggestion for change?

Thank you so much for your time and attention to detail, team!

[alexstine]

I did not watch the video but the content seems good. 👍

[westnz]

Review:

Great tutorial! This is going to be very helpful for folks.

• I really like the examples you use throughout the video.
• 0:50 - 1:01 Add a slide with text or a different image directly correlating with your words. I started reading the slide and couldn't focus on what was said. The text on the slide is only said/read at 1:02.
• 1:29 - 1:31 I would suggest making the arrows a bit shorter and ensuring they are straight
• 3:07 - 3:20 The text is not directly overlapping with what is said. I got a bit lost trying to read and hearing something different. This can be solved if your words are exactly the same as on screen when the bullet points appear for the first time. After the bullet point is read, you can elaborate, but then the viewer can focus on what is being said. Hope this makes sense 😬
• 3:45 - 4:05 See the previous point
• 3:53 -3:55 You might want to consider removing the pause
• 6:07 - 6:14 The bullet point 'Use Headings sparingly, - Be descriptive, concise and relevant' disappeared and returned. It was already on the screen at 5:58/5:59.
• You explained the Outline feature really well and how one should not use Headings to style.

[wparasae]

Changes made, and published!

[westnz]

https://learn.wordpress.org/tutorial/using-headings-for-accessibility-and-seo/

[westnz]

Updated and added to the Beginner User learning pathway.

[westnz]

Note for future update:
Structuring Content slide in the video, bullet point says "To give a reader AND idea what to expect." Should be "To give a reader AN idea what to expect.